Adds stickybuttons to the toolbar.

h/css/inject.scss

@@ -258,7 +258,10 @@ $baseFontSize: 14px;
 
 //CONTROLBAR STUFF////////////////////////////////
 .annotator-toolbar {
-  @include single-transition(height, .25s, ease, .25s);
+  @include transition(
+    height .25s,
+    min-height .25s
+  );
   position: absolute;
   overflow: hidden;
   height: 200px;
@@ -267,46 +270,49 @@ $baseFontSize: 14px;
   width: 2.5em;
   z-index: 2;
 
-  a, a:hover, a:active, a:visited, a:link, a:link:hover {
-    color: $grayLighter;
-    text-decoration: none;
-
-    &:before {
-      color: inherit;
-    }
-
-    &.tri-icon {
-      color: rgba(200, 200, 200, .3);
-      text-shadow:
-      1px .8px 1.5px $white,
-      0 0 0 #000;
-
-      &:hover {
-        color: rgba(235, 235, 230, .1);
-      }
-    }
-  }
-
   ul, li {
     @include box-sizing(border-box);
     @include reset-box-model;
     @include reset-list-style;
   }
+
+  li {
+    border-width: 1px;
+    max-height: 35px;
+    margin-bottom: 5px;
+  }
 }
 
 .annotator-toolbar.annotator-hide {
+  @include transition-delay(.25s);
   height: 2.2em;
 
-  &:hover {
-    height: 200px;
+  li {
+    @include transition-delay(.2s, 0, 0);
+    //@include transition-duration(0 .25s);
+    border-width: 0;
+    max-height: 0;
+    margin-bottom: 0;
+
+    &:first-child, &.pushed {
+      margin-bottom: 5px;
+      border-width: 1px;
+      max-height: 35px;
+    }
   }
 }
 
 .annotator-toolbar li {
   @include border-radius(4px);
   @include smallshadow(0);
+  @include transition(
+    border-width .05s,
+    margin-bottom .25s,
+    max-height .25s
+  );
   background: $white;
   border: solid 1px $grayLighter;
+  overflow: hidden;
   position: relative;
   left: 2px;
   height: 2em;
@@ -319,11 +325,7 @@ $baseFontSize: 14px;
     width: 2.3em;
   }
 
-  & + li {
-    margin-top: 5px;
-  }
-
-  a {
+  a, a:hover, a:active, a:visited, a:link, a:link:hover {
     font-size: $baseFontSize * 1.3;
     line-height: $baseLineHeight * 1.3;
 
@@ -332,14 +334,34 @@ $baseFontSize: 14px;
 
     position: absolute;
     left: .2em;
+    color: $grayLighter;
+
+    text-decoration: none;
+
+    &:before {
+      color: inherit;
+    }
+
+    &.tri-icon {
+      color: rgba(200, 200, 200, .3);
+      text-shadow:
+      1px .8px 1.5px $white,
+      0 0 0 #000;
+
+      &:hover {
+        color: rgba(235, 235, 230, .1);
+      }
+    }
   }
 
-  a.pushed, a:hover.pushed {
-    color: $hypothered;
+  &.pushed, &:hover.pushed {
+    max-height: 35px;
+    a {
+      color: $hypothered;
+    }
   }
 }
 
-
 // Toolbar Icons
 .alwaysonhighlights-icon {
   @include fonticon("\e01b", left);
@@ -426,4 +448,4 @@ $baseFontSize: 14px;
 */
 
 @media screen and (min-width: 118em) {
-}
+}
\ No newline at end of file

h/js/host.coffee

@@ -26,12 +26,6 @@ class Annotator.Host extends Annotator.Guest
 
     app.appendTo(@frame)
 
-    if @toolbar?
-      @toolbar.addClass 'annotator-hide'
-      @toolbar
-      .on('mouseenter', => @toolbar.removeClass 'annotator-hide')
-      .on('mouseleave', => @toolbar.addClass 'annotator-hide')
-
     if @plugins.Heatmap?
       this._setupDragEvents()
       @plugins.Heatmap.element.on 'click', (event) =>
@@ -147,4 +141,4 @@ class Annotator.Host extends Annotator.Guest
     @frame.addClass 'annotator-no-transition'
     @frame.css
       'margin-left': "#{m}px"
-      width: "#{w}px"
+      width: "#{w}px"
\ No newline at end of file

h/js/plugin/toolbar.coffee

@@ -2,13 +2,15 @@ $ = Annotator.$
 
 class Annotator.Plugin.Toolbar extends Annotator.Plugin
   events:
+    '.annotator-toolbar li:first-child mouseenter': 'show'
+    '.annotator-toolbar mouseleave': 'hide'
     'updateNotificationCounter': 'onUpdateNotificationCounter'
     'setTool': 'onSetTool'
     'setVisibleHighlights': 'onSetVisibleHighlights'
 
   html:
-    element: '<div class="annotator-toolbar"></div>'
-    notification: '<div class="annotator-notification-counter"></div>"'
+    element: '<div class="annotator-toolbar annotator-hide"></div>'
+    notification: '<div class="annotator-notification-counter"></div>'
 
   options:
     items: [
@@ -59,20 +61,23 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
     @toolbar.append(@notificationCounter)
 
     @buttons = @options.items.reduce  (buttons, item) =>
-      button = $('<a></a>')
+      anchor = $('<a></a>')
       .attr('href', '')
       .attr('title', item.title)
       .on('click', item.click)
       .addClass(item.class)
-      .data('state', false)
+      button = $('<li></li>').append(anchor)
       buttons.add button
     , $()
 
     list = $('<ul></ul>')
     @buttons.appendTo(list)
-    @buttons.wrap('<li></li>')
     @toolbar.append(list)
 
+  show: -> this.toolbar.removeClass('annotator-hide')
+
+  hide: -> this.toolbar.addClass('annotator-hide')
+
   onUpdateNotificationCounter: (count) ->
     element = $(@buttons[0])
     element.toggle('fg_highlight', {color: 'lightblue'})
@@ -93,9 +98,22 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
       $(@buttons[2]).addClass('pushed')
     else
       $(@buttons[2]).removeClass('pushed')
+    this._updateStickyButtons()
 
   onSetVisibleHighlights: (state) ->
     if state
       $(@buttons[1]).addClass('pushed')
     else
       $(@buttons[1]).removeClass('pushed')
+    this._updateStickyButtons()
+
+  _updateStickyButtons: ->
+    count = $(@buttons).filter(-> $(this).hasClass('pushed')).length
+    if count
+      height = (count + 1) * 32  # +1 -- top button is always visible
+      this.toolbar.css("min-height", "#{height}px")
+    else
+      height = 32
+      this.toolbar.css("min-height", "")
+    this.annotator.plugins.Heatmap?.BUCKET_THRESHOLD_PAD = height - 5
+    this.annotator.plugins.Heatmap?._update();
\ No newline at end of file