rework dragging to use rAF

h/js/src/annotator.host.coffee

@@ -22,6 +22,11 @@ class Annotator.Host extends Annotator
   # timer used to throttle event frequency
   updateTimer: null
 
+  # Drag state variables
+  drag:
+    delta: 0
+    tick: false
+
   constructor: (element, options) ->
     super
 
@@ -63,20 +68,19 @@ class Annotator.Host extends Annotator
         setupAnnotation: => this.setupAnnotation arguments...
         onEditorHide: this.onEditorHide
         onEditorSubmit: this.onEditorSubmit
-        showFrame: => @frame.removeClass('annotator-collapsed')
-        hideFrame: => @frame.addClass('annotator-collapsed')
-        resetFrameWidth: =>
-          @frame.css({ "width": "", "margin-left" : "" })        
-        setFrameWidth: (width) =>
-          @frame.css({ "width": width, "margin-left" : (-1)*width })
-        addToFrameWidth: (width, innerWidth) =>
-          if isNaN(parseInt(@frame[0].style.width))
-            old = innerWidth
-          else
-            old = parseInt(@frame[0].style.width)
-          @frame.css
-            width: old + width
-            'margin-left': -(old + width)
+        showFrame: =>
+          @frame.css 'margin-left': "#{-1 * @frame.width()}px"
+          @frame.removeClass 'annotator-no-transition'
+          @frame.removeClass 'annotator-collapsed'
+        hideFrame: =>
+          @frame.css 'margin-left': ''
+          @frame.removeClass 'annotator-no-transition'
+          @frame.addClass 'annotator-collapsed'
+        dragFrame: (d) =>
+          @drag.delta += d
+          unless @drag.tick
+            @drag.tick = true
+            requestAnimationFrame @dragRefresh
         getHighlights: =>
           highlights: $(@wrapper).find('.annotator-hl').map ->
             offset: $(this).offset()
@@ -173,6 +177,21 @@ class Annotator.Host extends Annotator
   _setupEditor: ->
     true
 
+  dragRefresh: =>
+    d = @drag.delta
+    @drag.delta = 0
+    @drag.tick = false
+
+    m = parseInt (getComputedStyle @frame[0]).marginLeft
+    w = -1 * m
+    m += d
+    w -= d
+
+    @frame.addClass 'annotator-no-transition'
+    @frame.css
+      'margin-left': "#{m}px"
+      width: "#{w}px"
+
   showEditor: (annotation) =>
     stub =
       ranges: annotation.ranges

h/js/src/controllers.coffee

@@ -5,7 +5,6 @@ class Hypothesis extends Annotator
   this::hash = -1       # * cheap UUID :cake:
   this::cache = {}      # * object cache
   this::visible = false # * Whether the sidebar is visible
-  this::lastWidth = 0   # * Frame's width before close
 
   # Plugin configuration
   options:
@@ -75,9 +74,7 @@ class Hypothesis extends Annotator
         onEditorSubmit: {}
         showFrame: {}
         hideFrame: {}
-        resetFrameWidth: {}
-        setFrameWidth: {}
-        addToFrameWidth: {}
+        dragFrame: {}
         getHighlights: {}
         setActiveHighlights: {}
         getMaxBottom: {}
@@ -169,7 +166,6 @@ class Hypothesis extends Annotator
     this
 
   _setupDocumentEvents: ->
-    dragStart = 0
     @element.find('#toolbar .tri').click =>
       if @visible
         this.hide()
@@ -178,15 +174,16 @@ class Hypothesis extends Annotator
           this._fillDynamicBucket()
         this.show()
 
+    dragLast = 0
     handle = @element.find('#toolbar .tri')[0]
     handle.addEventListener 'dragstart', (event) =>
-      dragStart = event.screenX
+      dragLast = event.screenX
     handle.addEventListener 'dragend', (event) =>
-      @provider.addToFrameWidth (dragStart - event.screenX), window.innerWidth
+      @provider.dragFrame (event.screenX - dragLast)
     handle.addEventListener 'drag', (event) =>
       if event.screenX > 0
-        @provider.addToFrameWidth (dragStart - event.screenX), window.innerWidth
-        dragStart = event.screenX
+        @provider.dragFrame (event.screenX - dragLast)
+        dragLast = event.screenX
     this
 
   _setupDynamicStyle: ->
@@ -609,7 +606,6 @@ class Hypothesis extends Annotator
       annotations = @heatmap.buckets[@bucket]?.map (a) => a.hash.valueOf()
 
     @visible = true
-    if @lastWidth > 0 then @provider.setFrameWidth(@lastWidth)
     @provider.setActiveHighlights annotations
     @provider.showFrame()
     @element.find("#toolbar").addClass "shown"
@@ -619,7 +615,6 @@ class Hypothesis extends Annotator
     @lastWidth = window.innerWidth
     @visible = false
     @provider.setActiveHighlights []
-    @provider.resetFrameWidth()
     @provider.hideFrame()
     @element.find("#toolbar").removeClass "shown"
     document.getElementsByClassName('tri')[0].draggable = false

h/sass/inject.scss

@@ -108,10 +108,13 @@
 
   &.annotator-collapsed {
     margin-left: -$heatmap-width - 17px;
-
   }
 }
 
+.annotator-no-transition {
+  @include transition(none !important);
+}
+
 
 /*
   Mobile layout