Merge pull request #1622 from hypothesis/simplify-highlights

Simplify highlight visibility toggling.

h/static/scripts/guest.coffee

@@ -3,13 +3,15 @@ $ = Annotator.$
 
 
 class Annotator.Guest extends Annotator
+  SHOW_HIGHLIGHTS_CLASS = 'annotator-highlights-always-on'
+
   # Events to be bound on Annotator#element.
   events:
     ".annotator-adder button click":     "onAdderClick"
     ".annotator-adder button mousedown": "onAdderMousedown"
     ".annotator-adder button mouseup":   "onAdderMouseup"
     "setTool": "onSetTool"
-    "setVisibleHighlights": "onSetVisibleHighlights"
+    "setVisibleHighlights": "setVisibleHighlights"
 
   # Plugin configuration
   options:
@@ -188,7 +190,6 @@ class Annotator.Guest extends Annotator
     )
 
     .bind('setVisibleHighlights', (ctx, state) =>
-      this.setVisibleHighlights state, false
       this.publish 'setVisibleHighlights', state
     )
 
@@ -315,17 +316,23 @@ class Annotator.Guest extends Annotator
       method: 'setTool'
       params: name
 
-  setVisibleHighlights: (state=true, notify=true) ->
-    if notify
-      @panel?.notify
-        method: 'setVisibleHighlights'
-        params: state
+  # Pass true to show the highlights in the frame or false to disable.
+  setVisibleHighlights: (shouldShowHighlights) ->
+    return if @visibleHighlights == shouldShowHighlights
+
+    @panel?.notify
+      method: 'setVisibleHighlights'
+      params: shouldShowHighlights
+
+    this.toggleHighlightClass(shouldShowHighlights or @tool == 'highlight')
+
+  toggleHighlightClass: (shouldShowHighlights) ->
+    if shouldShowHighlights
+      @element.addClass(SHOW_HIGHLIGHTS_CLASS)
     else
-      markerClass = 'annotator-highlights-always-on'
-      if state or this.tool is 'highlight'
-        @element.addClass markerClass
-      else
-        @element.removeClass markerClass
+      @element.removeClass(SHOW_HIGHLIGHTS_CLASS)
+
+    @visibleHighlights = shouldShowHighlights
 
   addComment: ->
     this.showEditor(this.createAnnotation())
@@ -360,10 +367,6 @@ class Annotator.Guest extends Annotator
   onSetTool: (name) ->
     switch name
       when 'comment'
-        this.setVisibleHighlights this.visibleHighlights, false
+        this.setVisibleHighlights this.visibleHighlights
       when 'highlight'
-        this.setVisibleHighlights true, false
-
-  onSetVisibleHighlights: (state) =>
-    this.visibleHighlights = state
-    this.setVisibleHighlights state, false
+        this.setVisibleHighlights true

h/static/scripts/plugin/toolbar.coffee

 $ = Annotator.$
 
+makeButton = (item) ->
+  anchor = $('<a></a>')
+  .attr('href', '')
+  .attr('title', item.title)
+  .on(item.on)
+  .addClass(item.class)
+  button = $('<li></li>').append(anchor)
+  return button[0]
+
 class Annotator.Plugin.Toolbar extends Annotator.Plugin
   PUSHED_CLASS = 'annotator-pushed'
 
@@ -11,19 +20,25 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
 
   html: '<div class="annotator-toolbar annotator-hide"></div>'
 
-  options:
-    items: [
+  pluginInit: ->
+    @annotator.toolbar = @toolbar = $(@html)
+    if @options.container?
+      $(@options.container).append @toolbar
+    else
+      $(@element).append @toolbar
+
+    items = [
       "title": "Toggle Sidebar"
       "class": "annotator-toolbar-toggle h-icon-comment"
       "on":
-        "click": (event) ->
+        "click": (event) =>
           event.preventDefault()
           event.stopPropagation()
-          collapsed = window.annotator.frame.hasClass('annotator-collapsed')
+          collapsed = @annotator.frame.hasClass('annotator-collapsed')
           if collapsed
-            window.annotator.showFrame()
+            @annotator.showFrame()
           else
-            window.annotator.hideFrame()
+            @annotator.hideFrame()
         # Remove focus from the anchor when clicked, this removes the focus
         # styles intended only for keyboard navigation. IE/FF apply the focus
         # psuedo-class to a clicked element.
@@ -32,47 +47,31 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
       "title": "Show Annotations"
       "class": "h-icon-visible"
       "on":
-        "click": (event) ->
+        "click": (event) =>
           event.preventDefault()
           event.stopPropagation()
-          state = not window.annotator.visibleHighlights
-          window.annotator.setVisibleHighlights state
+          state = not @annotator.visibleHighlights
+          @annotator.setVisibleHighlights state
     ,
       "title": "Highlighting Mode"
       "class": "h-icon-highlighter"
       "on":
-        "click": (event) ->
+        "click": (event) =>
           event.preventDefault()
           event.stopPropagation()
-          state = not (window.annotator.tool is 'highlight')
+          state = not (@annotator.tool is 'highlight')
           tool = if state then 'highlight' else 'comment'
-          window.annotator.setTool tool
+          @annotator.setTool tool
     ,
       "title": "New Comment"
       "class": "h-icon-plus"
       "on":
-        "click": (event) ->
+        "click": (event) =>
           event.preventDefault()
           event.stopPropagation()
-          window.annotator.addComment()
+          @annotator.addComment()
     ]
-
-  pluginInit: ->
-    @annotator.toolbar = @toolbar = $(@html)
-    if @options.container?
-      $(@options.container).append @toolbar
-    else
-      $(@element).append @toolbar
-
-    @buttons = @options.items.reduce  (buttons, item) =>
-      anchor = $('<a></a>')
-      .attr('href', '')
-      .attr('title', item.title)
-      .on(item.on)
-      .addClass(item.class)
-      button = $('<li></li>').append(anchor)
-      buttons.add button
-    , $()
+    @buttons = $(makeButton(item) for item in items)
 
     list = $('<ul></ul>')
     @buttons.appendTo(list)