code style

 - less instance-wide state
 - shorter lines (< 80 columns)
 - consistentCamelCase

h/js/src/annotator.host.coffee

@@ -69,9 +69,14 @@ class Annotator.Host extends Annotator
           @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)) then old = innerWidth else old = parseInt(@frame[0].style.width)
-          @frame.css({ "width": (old + width), "margin-left" : (-1)*(old + 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)
         getHighlights: =>
           highlights: $(@wrapper).find('.annotator-hl').map ->
             offset: $(this).offset()

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::dragstartposX =0# * Frame's draggin start position
   this::lastWidth = 0   # * Frame's width before close
 
   # Plugin configuration
@@ -170,6 +169,7 @@ class Hypothesis extends Annotator
     this
 
   _setupDocumentEvents: ->
+    dragStart = 0
     @element.find('#toolbar .tri').click =>
       if @visible
         this.hide()
@@ -177,14 +177,13 @@ class Hypothesis extends Annotator
         if @viewer.isShown() and @bucket == -1
           this._fillDynamicBucket()
         this.show()
-    document.getElementsByClassName('tri')[0].addEventListener 'dragstart', (event) =>
-      @dragstartposX = event.screenX
-    document.getElementById('toolbar').addEventListener 'dragend', (event) =>
-      @provider.addtoFrameWidth(@dragstartposX - event.screenX, window.innerWidth)
-    document.getElementById('toolbar').addEventListener 'drag', (event) =>
+    .on 'dragstart', (event) =>
+      dragStart = event.screenX
+    .on 'dragend', (event) =>
+      @provider.addToFrameWidth (dragStart - event.screenX), window.innerWidth
+    .on 'drag', (event) =>
       if event.screenX > 0
-        @provider.addtoFrameWidth((@dragstartposX - event.screenX), window.innerWidth)
-        @dragstartposX = event.screenX
+        @provider.addToFrameWidth (dragStart - event.screenX), window.innerWidth
     this
 
   _setupDynamicStyle: ->