Componentize the annotation adder toolbar

Extract the adder styles and logic into separate files for easier
testing and extension.

Also extract the styling for positioning the arrow out into a a helper
class so we can more easily reposition the arrow depending on the
available space.

h/static/scripts/annotator/adder.html

+<div class="annotator-adder">
+  <div class="annotator-adder-actions">
+    <button class="annotator-adder-actions__button h-icon-annotate" data-action="comment">
+      <span class="annotator-adder-actions__label" data-action="comment">Annotate</span>
+    </button>
+    <button class="annotator-adder-actions__button h-icon-highlight" data-action="highlight">
+      <span class="annotator-adder-actions__label" data-action="highlight">Highlight</span>
+    </button>
+  </div>
+</div>

h/static/scripts/annotator/adder.js

+'use strict';
+
+var classnames = require('classnames');
+
+/**
+ * Show the adder above the selection with an arrow pointing down at the
+ * selected text.
+ */
+var ARROW_POINTING_DOWN = 1;
+
+/**
+ * Returns the HTML template for the adder.
+ */
+function template() {
+  return require('./adder.html');
+}
+
+/**
+ * Controller for the 'adder' toolbar which appears next to the selection
+ * and provides controls for the user to create new annotations.
+ *
+ * @param {JQuery} element - jQuery element for the adder.
+ */
+function Adder(element) {
+  this.hide = function () {
+    element.hide();
+  };
+
+  this.showAt = function (position, arrowDirection) {
+    element[0].className = classnames({
+      'annotator-adder': true,
+      'annotator-adder--arrow-down': arrowDirection === ARROW_POINTING_DOWN,
+    });
+    element[0].style.top = position.top;
+    element[0].style.left = position.left;
+    element.show();
+  };
+}
+
+module.exports = {
+  ARROW_POINTING_DOWN: ARROW_POINTING_DOWN,
+  template: template,
+  Adder: Adder,
+};

h/static/scripts/annotator/guest.coffee

 baseURI = require('document-base-uri')
+classnames = require('classnames')
 extend = require('extend')
 raf = require('raf')
 scrollIntoView = require('scroll-into-view')
@@ -6,6 +7,7 @@ scrollIntoView = require('scroll-into-view')
 Annotator = require('annotator')
 $ = Annotator.$
 
+adder = require('./adder')
 highlighter = require('./highlighter')
 rangeUtil = require('./range-util')
 
@@ -41,22 +43,12 @@ module.exports = class Guest extends Annotator
   visibleHighlights: false
 
   html: extend {}, Annotator::html,
-    adder: '''
-      <div class="annotator-adder">
-        <div class="annotator-adder-actions">
-          <button class="annotator-adder-actions__button h-icon-annotate" data-action="comment">
-            <span class="annotator-adder-actions__label" data-action="comment">Annotate</span>
-          </button>
-          <button class="annotator-adder-actions__button h-icon-highlight" data-action="highlight">
-            <span class="annotator-adder-actions__label" data-action="highlight">Highlight</span>
-          </button>
-        </div>
-      </div>
-    '''
+    adder: adder.template()
 
   constructor: (element, options) ->
     super
 
+    this.adderCtrl = new adder.Adder(@adder)
     this.anchors = []
 
     cfOptions =
@@ -341,11 +333,6 @@ module.exports = class Guest extends Annotator
     tags = (a.$$tag for a in annotations)
     @crossframe?.call('focusAnnotations', tags)
 
-  showAdder: (position) ->
-    @adder
-      .css(position)
-      .show()
-
   onSuccessfulSelection: (event, immediate) ->
     unless event?
       throw "Called onSuccessfulSelection without an event!"
@@ -366,11 +353,12 @@ module.exports = class Guest extends Annotator
     else
       # Show the adder button
       selection = Annotator.Util.getGlobal().getSelection()
-      this.showAdder(rangeUtil.selectionEndPosition(selection))
+      this.adderCtrl.showAt(rangeUtil.selectionEndPosition(selection),
+                            adder.ARROW_POINTING_DOWN)
     true
 
   onFailedSelection: (event) ->
-    @adder.hide()
+    this.adderCtrl.hide()
     @selectedRanges = []
 
     Annotator.$('.annotator-toolbar .h-icon-annotate')
@@ -435,7 +423,7 @@ module.exports = class Guest extends Annotator
   onAdderClick: (event) ->
     event.preventDefault?()
     event.stopPropagation?()
-    @adder.hide()
+    this.adderCtrl.hide()
     switch $(event.target).data('action')
       when 'highlight'
         this.setVisibleHighlights true

h/static/styles/annotator/adder.scss

+.annotator-adder {
+  box-sizing: border-box;
+  direction: ltr;
+  margin-top: -60px;
+  margin-left: -65px;
+  position: absolute;
+  background: $white;
+  border: 1px solid rgba(0,0,0,0.20);
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 999;
+}
+
+@mixin adder-arrow($rotation) {
+  transform: rotate($rotation);
+  background: $white;
+  border-bottom: 1px solid rgba(0,0,0,0.20);
+  border-right: 1px solid rgba(0,0,0,0.20);
+  content: "";
+  display: block;
+  height: 6px;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  right: 0;
+  width: 6px;
+}
+
+.annotator-adder--arrow-down:before {
+  @include adder-arrow(45deg);
+  bottom: -5px;
+}
+
+.annotator-adder-actions {
+  display: flex;
+  flex-direction: row;
+}
+
+.annotator-adder-actions:hover .annotator-adder-actions__button {
+  color: $gray-light !important;
+}
+
+.annotator-adder-actions__button {
+  @include box-shadow(none);
+  font-family: h;
+  font-size: 18px;
+  background: transparent !important;
+  color: $gray-dark !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+
+  padding-top: 7px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.annotator-adder-actions .annotator-adder-actions__button:hover {
+  color: $gray-dark !important;
+
+  .annotator-adder-actions__label {
+    color: $gray-dark !important;
+  }
+}
+
+.annotator-adder-actions__label {
+  font-size: 11px;
+  margin: 2px 0px;
+  font-family: sans-serif;
+  color: $gray-light !important;
+}

h/static/styles/annotator/inject.scss

 @import '../base';
 @import '../mixins/icons';
 
-$base-font-size: 14px;
-
-//ADDER////////////////////////////////
-.annotator-adder {
-  box-sizing: border-box;
-  direction: ltr;
-  margin-top: -60px;
-  margin-left: -65px;
-  position: absolute;
-  background: $white;
-  border: 1px solid rgba(0,0,0,0.20);
-  border-radius: 4px;
-  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
-  z-index: 999;
-}
-
-.annotator-adder:before {
-  @include rotate(45deg);
-  background: $white;
-  bottom: -5px;
-  border-bottom: 1px solid rgba(0,0,0,0.20);
-  border-right: 1px solid rgba(0,0,0,0.20);
-  content: "";
-  display: block;
-  height: 6px;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  position: absolute;
-  right: 0;
-  width: 6px;
-}
-
-.annotator-adder-actions {
-  display: flex;
-  flex-direction: row;
-}
-
-.annotator-adder-actions:hover .annotator-adder-actions__button {
-  color: $gray-light !important;
-}
-
-.annotator-adder-actions__button {
-  @include box-shadow(none);
-  font-family: h;
-  font-size: 18px;
-  background: transparent !important;
-  color: $gray-dark !important;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-
-  padding-top: 7px;
-  padding-bottom: 6px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.annotator-adder-actions .annotator-adder-actions__button:hover {
-  color: $gray-dark !important;
-
-  .annotator-adder-actions__label {
-    color: $gray-dark !important;
-  }
-}
-
-.annotator-adder-actions__label {
-  font-size: 11px;
-  margin: 2px 0px;
-  font-family: sans-serif;
-  color: $gray-light !important;
-}
+@import './adder';
 
+$base-font-size: 14px;
 
 //HIGHLIGHTS////////////////////////////////
 .annotator-highlights-always-on {

package.json

@@ -19,6 +19,7 @@
     "browserify": "^13.0.0",
     "browserify-ngannotate": "^1.0.1",
     "browserify-shim": "^3.8.12",
+    "classnames": "^2.2.4",
     "coffeeify": "^1.0.0",
     "commander": "^2.9.0",
     "compass-mixins": "^0.12.7",