Merge pull request #214 from gergely-ujvari/26-add-handle-to-left-edge-of-the-sidebar-to-resize-it

26 add handle to left edge of the sidebar to resize it

h/js/src/annotator.host.coffee

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

h/js/src/hypothesis.coffee

@@ -5,6 +5,8 @@ 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
   options:
@@ -61,6 +63,9 @@ class Hypothesis extends Annotator
         onEditorSubmit: {}
         showFrame: {}
         hideFrame: {}
+        resetFrameWidth: {}
+        setFrameWidth: {}
+        addtoFrameWidth: {}
         getHighlights: {}
         setActiveHighlights: {}
         getMaxBottom: {}
@@ -123,6 +128,14 @@ 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) =>
+      if event.screenX > 0
+        @provider.addtoFrameWidth((@dragstartposX - event.screenX), window.innerWidth)
+        @dragstartposX = event.screenX
     this
 
   _setupDynamicStyle: ->
@@ -545,16 +558,20 @@ 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()
     $("#toolbar").addClass "shown"
+    document.getElementsByClassName('tri')[0].draggable = true
 
   hide: =>
+    @lastWidth = window.innerWidth
     @visible = false
     @provider.setActiveHighlights []
+    @provider.resetFrameWidth()
     @provider.hideFrame()
     $("#toolbar").removeClass "shown"
-
+    document.getElementsByClassName('tri')[0].draggable = false
 
   threadId: (annotation) ->
     if annotation?.thread?