Wire update notifications into the new toolbar

Closes #779

h/css/inject.scss

@@ -357,6 +357,16 @@ $baseFontSize: 14px;
 }
 
 
+// Toolbar notification counter
+.annotator-notification-counter {
+  font-family: $sansFontFamily;
+  pointer-events: none;
+  position: absolute;
+  margin-left: .7em;
+  margin-top: .25em;
+  z-index: 2;
+  font-size: $baseFontSize * .86;
+}
 
 
 /*

h/css/sidebar.scss

@@ -72,23 +72,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   .inner {
     margin: 0 .5em 0 .5em;
   }
-
-  .notification-counter {
-    font-family: $sansFontFamily;
-    position: absolute;
-    margin-left: .75em;
-    float: left;
-    margin-top: 0.37em;
-    z-index: 2;
-    font-size: 12px;
-    cursor: w-resize;
-  }
-
-  &.shown {
-    .notification-counter {
-      cursor: ew-resize;
-    }
-  }
 }
 
 .bottombar {

h/js/controllers.coffee

@@ -436,11 +436,10 @@ class App
           else text = 'changes.'
           notif.text = 'Click to load ' + updates + ' ' + text
 
-      return unless updates
-      $element.find('.tri').toggle('fg_highlight',{color:'lightblue'})
-      $timeout ->
-        $element.find('.tri').toggle('fg_highlight',{color:'lightblue'})
-      , 500
+      for p in annotator.providers
+        p.channel.notify
+          method: 'updateNotificationCounter'
+          params: updates
 
     $scope.$watch 'show_search', (value, old) ->
       if value and not old

h/js/host.coffee

@@ -93,6 +93,10 @@ class Annotator.Host extends Annotator.Guest
       Math.max.apply(Math, all)
     )
 
+    .bind('updateNotificationCounter', (ctx, count) =>
+      this.publish 'updateNotificationCounter', count
+    )
+
   _setupDragEvents: ->
     el = document.createElementNS 'http://www.w3.org/1999/xhtml', 'canvas'
     el.width = el.height = 1

h/js/plugin/toolbar.coffee

 $ = Annotator.$
 
 class Annotator.Plugin.Toolbar extends Annotator.Plugin
+  events:
+    'updateNotificationCounter': 'onUpdateNotificationCounter'
 
-  html: '<div class="annotator-toolbar"></div>'
+  html:
+    element: '<div class="annotator-toolbar"></div>'
+    notification: '<div class="annotator-notification-counter"></div>"'
 
   options:
     items: [
@@ -51,12 +55,15 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
     ]
 
   pluginInit: ->
-    @annotator.toolbar = @toolbar = $(@html)
+    @annotator.toolbar = @toolbar = $(@html.element)
     if @options.container?
       $(@options.container).append @toolbar
     else
       $(@element).append @toolbar
 
+    @notificationCounter = $(@html.notification)
+    @toolbar.append(@notificationCounter)
+
     @buttons = @options.items.reduce  (buttons, item) =>
       button = $('<a></a>')
       .attr('href', '')
@@ -66,5 +73,23 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
       .data('state', false)
       buttons.add button
     , $()
-    @toolbar.append(@buttons).wrapInner('<ul></ul>')
+
+    list = $('<ul></ul>')
+    @buttons.appendTo(list)
     @buttons.wrap('<li></li>')
+    @toolbar.append(list)
+
+  onUpdateNotificationCounter: (count) ->
+    element = $(@buttons[0])
+    element.toggle('fg_highlight', {color: 'lightblue'})
+    setTimeout ->
+      element.toggle('fg_highlight', {color: 'lightblue'})
+    , 500
+
+    switch
+      when count > 9
+        @notificationCounter.text('>9')
+      when 0 < count < 9
+        @notificationCounter.text("+#{count}")
+      else
+        @notificationCounter.text('')