Remove use of .bind for click handler #137

h/static/scripts/annotator/adder.js

@@ -95,6 +95,7 @@ function createAdderDOM(container) {
  */
 function Adder(container, options) {
 
+  var self = this;
   var element = createAdderDOM(container);
 
   Object.assign(container.style, {
@@ -119,21 +120,23 @@ function Adder(container, options) {
   var enterTimeout;
 
   element.querySelector('.js-annotate-btn')
-    .addEventListener('click', handleCommand.bind(this, 'annotate'));
+    .addEventListener('click', handleCommand);
   element.querySelector('.js-highlight-btn')
-    .addEventListener('click', handleCommand.bind(this, 'highlight'));
+    .addEventListener('click', handleCommand);
 
-  function handleCommand(command, event) {
+  function handleCommand(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    if (command === 'annotate') {
+    var isAnnotateCommand = this.classList.contains('js-annotate-btn');
+
+    if (isAnnotateCommand) {
       options.onAnnotate();
     } else {
       options.onHighlight();
     }
 
-    this.hide();
+    self.hide();
   }
 
   function width() {
@@ -221,6 +224,14 @@ function Adder(container, options) {
       'annotator-adder--arrow-up': arrowDirection === ARROW_POINTING_UP,
     });
 
+    // Some sites make big assumptions about interactive
+    // elements on the page. Some want to hide interactive elements
+    // after use. So we need to make sure the button stays displayed
+    // the way it was originally displayed - withouth the inline styles
+    // See: https://github.com/hypothesis/client/issues/137
+    this.element.querySelector(ANNOTATE_BTN_SELECTOR).style.display = '';
+    this.element.querySelector(HIGHLIGHT_BTN_SELECTOR).style.display = '';
+
     Object.assign(container.style, {
       top: toPx(top),
       left: toPx(left),