Open the sidebar if user clicks on a document element which has a sidebar trigger attribute. (#190)

Fixes https://github.com/hypothesis/product-backlog/issues/128

src/annotator/sidebar-trigger.js

+'use strict';
+
+var SIDEBAR_TRIGGER_BTN_ATTR = 'data-hypothesis-trigger';
+
+/**
+ * Show the sidebar when user clicks on an element with the
+ * trigger data attribute.
+ *
+ * @param {Element} rootEl - The DOM element which contains the trigger elements.
+ * @param {Object} showFn - Function which shows the sidebar.
+ */
+
+function trigger(rootEl, showFn) {
+
+  var triggerElems = rootEl.querySelectorAll('['+SIDEBAR_TRIGGER_BTN_ATTR+']');
+
+  Array.from(triggerElems).forEach(function(triggerElem) {
+    triggerElem.addEventListener('click', handleCommand);
+  });
+
+  function handleCommand(event) {
+    showFn();
+    event.stopPropagation();
+  }
+}
+
+module.exports = trigger;

src/annotator/sidebar.coffee

@@ -3,6 +3,7 @@ raf = require('raf')
 Hammer = require('hammerjs')
 
 Host = require('./host')
+sidebarTrigger = require('./sidebar-trigger')
 
 # Minimum width to which the frame can be resized.
 MIN_RESIZE = 280
@@ -36,6 +37,7 @@ module.exports = class Sidebar extends Host
     this._setupSidebarEvents()
 
   _setupDocumentEvents: ->
+    sidebarTrigger(document, @show.bind(this))
     @element.on 'click', (event) =>
       if !@selectedTargets?.length
         this.hide()

src/annotator/test/sidebar-trigger-test.js

+'use strict';
+
+var sidebarTrigger = require('../sidebar-trigger');
+
+describe('sidebarTrigger', function () {
+  var triggerEl1;
+  var triggerEl2;
+
+  beforeEach(function () {
+    triggerEl1 = document.createElement('button');
+    triggerEl1.setAttribute('data-hypothesis-trigger');
+    document.body.appendChild(triggerEl1);
+
+    triggerEl2 = document.createElement('button');
+    triggerEl2.setAttribute('data-hypothesis-trigger');
+    document.body.appendChild(triggerEl2);
+  });
+
+  it('calls the show callback which a trigger button is clicked', function () {
+    var fakeShowFn = sinon.stub();
+    sidebarTrigger(document, fakeShowFn);
+
+    triggerEl1.dispatchEvent(new Event('click'));
+    triggerEl2.dispatchEvent(new Event('click'));
+
+    assert.calledTwice(fakeShowFn);
+  });
+});