Rename Heatmap -> BucketBar

Ref #1236

h/static/bootstrap.js

@@ -2,7 +2,7 @@ var Klass = window.Annotator.Host;
 var docs = 'https://github.com/hypothesis/h/blob/master/README.rst#customized-embedding';
 var options = {
   app: jQuery('link[type="application/annotator+html"]').attr('href'),
-  Heatmap: {container: '.annotator-frame'},
+  BucketBar: {container: '.annotator-frame'},
   Toolbar: {container: '.annotator-frame'}
 };
 

h/static/scripts/guest.coffee

@@ -141,10 +141,10 @@ class Annotator.Guest extends Annotator
     .bind('onEditorSubmit', this.onEditorSubmit)
 
     .bind('setDynamicBucketMode', (ctx, value) =>
-      return unless @plugins.Heatmap
-      return if @plugins.Heatmap.dynamicBucket is value
-      @plugins.Heatmap.dynamicBucket = value
-      if value then @plugins.Heatmap._update()
+      return unless @plugins.BucketBar
+      return if @plugins.BucketBar.dynamicBucket is value
+      @plugins.BucketBar.dynamicBucket = value
+      if value then @plugins.BucketBar._update()
     )
 
     .bind('focusAnnotations', (ctx, tags=[]) =>
@@ -185,10 +185,6 @@ class Annotator.Guest extends Annotator
       this.publish 'setVisibleHighlights', state
     )
 
-    .bind('updateHeatmap', =>
-      @plugins.Heatmap._scheduleUpdate()
-    )
-
   _setupWrapper: ->
     @wrapper = @element
     .on 'click', (event) =>
@@ -290,7 +286,7 @@ class Annotator.Guest extends Annotator
   # toggle: should this toggle membership in an existing selection?
   selectAnnotations: (annotations, toggle) =>
     # Switch off dynamic mode; we are going to "Selection" scope
-    @plugins.Heatmap.dynamicBucket = false
+    @plugins.BucketBar.dynamicBucket = false
 
     if toggle
       # Tell sidebar to add these annotations to the sidebar

h/static/scripts/host.coffee

@@ -42,9 +42,9 @@ class Annotator.Host extends Annotator.Guest
       this.setTool('comment')
       this.setVisibleHighlights(!!options.showHighlights)
 
-    if @plugins.Heatmap?
+    if @plugins.BucketBar?
       this._setupDragEvents()
-      @plugins.Heatmap.element.on 'click', (event) =>
+      @plugins.BucketBar.element.on 'click', (event) =>
         if @frame.hasClass 'annotator-collapsed'
           this.showFrame()
 
@@ -118,7 +118,7 @@ class Annotator.Host extends Annotator.Guest
       @drag.enabled = false
       @drag.last = null
 
-    for handle in [@plugins.Heatmap.element[0], @plugins.Toolbar.buttons[0]]
+    for handle in [@plugins.BucketBar.element[0], @plugins.Toolbar.buttons[0]]
       handle.draggable = true
       handle.addEventListener 'dragstart', dragStart
       handle.addEventListener 'dragend', dragEnd

h/static/scripts/plugin/heatmap.coffee → h/static/scripts/plugin/bucket-bar.coffee

 $ = Annotator.$
 
-class Annotator.Plugin.Heatmap extends Annotator.Plugin
+class Annotator.Plugin.BucketBar extends Annotator.Plugin
   # prototype constants
   BUCKET_THRESHOLD_PAD: 30
   BUCKET_SIZE: 16
 
-  # heatmap svg skeleton
+  # svg skeleton
   html: """
-        <div class="annotator-heatmap">
-          <div class="annotator-heatmap-bar"></div>
+        <div class="annotator-bucket-bar">
         </div>
         """
 
@@ -97,7 +96,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
     addEventListener "docPageScrolling", this._scheduleUpdate
 
-  # Update the heatmap sometimes soon
+  # Update sometime soon
   _scheduleUpdate: =>
     return if @_updatePending
     @_updatePending = true
@@ -200,7 +199,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
     $.merge above, this._collectVirtualAnnotations 0, currentPage-1
     $.merge below, this._collectVirtualAnnotations currentPage+1, lastPage
 
-    # Construct control points for the heatmap
+    # Construct indicator points
     points = highlights.reduce (points, hl, i) =>
       d = hl.annotation
       x = hl.getTop() - defaultView.pageYOffset
@@ -312,7 +311,7 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
       @tabs.push(div[0])
 
-      div.addClass('heatmap-pointer')
+      div.addClass('annotator-bucket-indicator')
 
       # Creates highlights corresponding bucket when mouse is hovered
       # TODO: This should use event delegation on the container.

h/static/scripts/plugin/toolbar.coffee

@@ -103,5 +103,5 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
     else
       height = 35
       this.toolbar.css("min-height", "")
-    this.annotator.plugins.Heatmap?.BUCKET_THRESHOLD_PAD = height
-    this.annotator.plugins.Heatmap?._update();
+    this.annotator.plugins.BucketBar?.BUCKET_THRESHOLD_PAD = height
+    this.annotator.plugins.BucketBar?._update();

h/static/scripts/services.coffee

@@ -128,14 +128,6 @@ class Hypothesis extends Annotator
       options.origin = '*'
 
     provider = Channel.build options
-        # Dodge toolbars [DISABLE]
-        #@provider.getMaxBottom (max) =>
-        #  @element.css('margin-top', "#{max}px")
-        #  @element.find('.topbar').css("top", "#{max}px")
-        #  @element.find('#gutter').css("margin-top", "#{max}px")
-        #  @plugins.Heatmap.BUCKET_THRESHOLD_PAD += max
-
-    provider
 
     .bind('publish', (ctx, args...) => this.publish args...)
 

h/static/styles/base.scss

@@ -55,13 +55,13 @@ $negative: #d11c2b;
 $neutral: #0171ba;
 
 //OTHER VARIABLES
+$bucket-bar-width: 22px;
 $highlight-color: rgba(255, 255, 60, 0.3);
 $highlight-color-second: rgba(206, 206, 60, 0.4);
 $highlight-color-third: rgba(192, 192, 49, 0.4);
 $highlight-color-focus: rgba(192, 236, 253, 0.5);
 $score-width: 40px;
 $score-height: $score-width;
-$heatmap-width: 22px;
 $input-border-radius: 2px;
 
 /* Style input placeholders */

h/static/styles/pointers.scss → h/static/styles/bucket-bar.scss

-.heatmap-pointer {
+.annotator-bucket-bar {
+  background: hsla(0, 0, 0, .1);
+  cursor: ew-resize;
+  position: absolute;
+  height: 100%;
+  width: $bucket-bar-width;
+  left: -($bucket-bar-width);
+}
+
+.annotator-bucket-indicator {
   @include box-sizing(border-box);
   background: $white;
   border: solid 1px $gray-lighter;

h/static/styles/inject.scss

@@ -72,32 +72,6 @@ $base-font-size: 14px;
 }
 
 
-//HEATMAP STUFF////////////////////////////////
-.annotator-frame {
-  .annotator-heatmap {
-    cursor: ew-resize;
-    position: absolute;
-    overflow: hidden;
-
-    height: 100%;
-    width: $heatmap-width + 18px;
-    left: -($heatmap-width + 18px);
-  }
-
-  .annotator-heatmap-bar {
-    @include stretch-y;
-    background: hsla(0, 0, 0, .1);
-    border-left: solid 1px $gray-lighter;
-    height: 100%;
-    left: 18px;
-    width: $heatmap-width;
-  }
-}
-
-.annotator-frame {
-  @import 'pointers';
-}
-
 //HIGHLIGHTS////////////////////////////////
 .annotator-hl {
   &::-moz-selection {
@@ -131,6 +105,7 @@ $base-font-size: 14px;
 // Sidebar
 .annotator-frame {
   @import 'reset';
+  @import 'bucket-bar';
   @include nested-reset;
   @include reset-box-model;
   @include user-select(none);
@@ -178,7 +153,7 @@ $base-font-size: 14px;
 //CONTROLBAR STUFF////////////////////////////////
 .annotator-frame .annotator-toolbar {
   position: absolute;
-  left: -($heatmap-width + 18px - 7px);
+  left: -($bucket-bar-width + 18px - 7px);
   width: 37px;
   z-index: 2;
 

karma.config.js

@@ -48,7 +48,7 @@ module.exports = function(config) {
       'h/static/scripts/helpers.js',
       'h/static/scripts/session.js',
       'h/static/scripts/hypothesis.js',
-      'h/static/scripts/plugin/heatmap.js',
+      'h/static/scripts/plugin/bucket-bar.js',
       'h/static/scripts/vendor/sinon.js',
       'h/static/scripts/vendor/chai.js',
       'h/static/scripts/hypothesis.js',

tests/js/plugin/heatmap-test.coffee → tests/js/plugin/bucket-bar-test.coffee

 assert = chai.assert
 sinon.assert.expose(assert, prefix: '')
 
-describe 'Annotator.Heatmap', ->
-  createHeatmap = (options) ->
+describe 'Annotator.BucketBar', ->
+  createBucketBar = (options) ->
     element = document.createElement('div')
-    new Annotator.Plugin.Heatmap(element, options || {})
+    new Annotator.Plugin.BucketBar(element, options || {})
 
   # Yes this is testing a private method. Yes this is bad practice, but I'd
   # rather test this functionality in a private method than not test it at all.
   describe '_buildTabs', ->
     setup = (tabs) ->
-      heatmap = createHeatmap()
-      heatmap.tabs = tabs
-      heatmap.buckets = [['AN ANNOTATION?']]
-      heatmap.index = [
+      bucketBar = createBucketBar()
+      bucketBar.tabs = tabs
+      bucketBar.buckets = [['AN ANNOTATION?']]
+      bucketBar.index = [
         0,
-        heatmap.BUCKET_THRESHOLD_PAD - 12,
-        heatmap.BUCKET_THRESHOLD_PAD + heatmap.BUCKET_SIZE + 6
+        bucketBar.BUCKET_THRESHOLD_PAD - 12,
+        bucketBar.BUCKET_THRESHOLD_PAD + bucketBar.BUCKET_SIZE + 6
       ]
-      heatmap
+      bucketBar
 
     it 'creates a tab with a title', ->
       tab = $('<div />')
-      heatmap = setup(tab)
+      bucketBar = setup(tab)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.attr('title'), 'Show one annotation')
 
     it 'creates a tab with a pluralized title', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      heatmap.buckets[0].push('Another Annotation?')
+      bucketBar = setup(tab)
+      bucketBar.buckets[0].push('Another Annotation?')
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.attr('title'), 'Show 2 annotations')
 
     it 'sets the tab text to the number of annotations', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      heatmap.buckets[0].push('Another Annotation?')
+      bucketBar = setup(tab)
+      bucketBar.buckets[0].push('Another Annotation?')
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.text(), '2')
 
     it 'sets the tab text to the number of annotations', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      heatmap.buckets[0].push('Another Annotation?')
+      bucketBar = setup(tab)
+      bucketBar.buckets[0].push('Another Annotation?')
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.text(), '2')
 
     it 'adds the class "upper" if the annotation is at the top', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      sinon.stub(heatmap, 'isUpper').returns(true)
+      bucketBar = setup(tab)
+      sinon.stub(bucketBar, 'isUpper').returns(true)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.hasClass('upper'), true)
 
     it 'removes the class "upper" if the annotation is not at the top', ->
       tab = $('<div />').addClass('upper')
-      heatmap = setup(tab)
-      sinon.stub(heatmap, 'isUpper').returns(false)
+      bucketBar = setup(tab)
+      sinon.stub(bucketBar, 'isUpper').returns(false)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.hasClass('upper'), false)
 
     it 'adds the class "lower" if the annotation is at the top', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      sinon.stub(heatmap, 'isLower').returns(true)
+      bucketBar = setup(tab)
+      sinon.stub(bucketBar, 'isLower').returns(true)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.hasClass('lower'), true)
 
     it 'removes the class "lower" if the annotation is not at the top', ->
       tab = $('<div />').addClass('lower')
-      heatmap = setup(tab)
-      sinon.stub(heatmap, 'isLower').returns(false)
+      bucketBar = setup(tab)
+      sinon.stub(bucketBar, 'isLower').returns(false)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.hasClass('lower'), false)
 
     it 'reveals the tab if there are annotations in the bucket', ->
       tab = $('<div />')
-      heatmap = setup(tab)
+      bucketBar = setup(tab)
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.css('display'), '')
 
     it 'hides the tab if there are no annotations in the bucket', ->
       tab = $('<div />')
-      heatmap = setup(tab)
-      heatmap.buckets = []
+      bucketBar = setup(tab)
+      bucketBar.buckets = []
 
-      heatmap._buildTabs()
+      bucketBar._buildTabs()
       assert.equal(tab.css('display'), 'none')