Set the adder to appear above or below the selection depending on the selection direction

Try to avoid showing the adder above the selected text where possible by
showing the adder above or below the selection depending on whether the
selection was made forwards, in which case the focus point is assumed to
be at the bottom of the selection, or backwards, in which case the focus
point is assumed to be at the top of the selection.

h/static/scripts/annotator/adder.js

@@ -72,8 +72,14 @@ function Adder(element) {
    *        `targetRect`.
    */
   this.target = function (targetRect, isSelectionBackwards) {
-    // Set position and arrow direction depending on available space
-    var arrowDirection = ARROW_POINTING_DOWN;
+    // Set the initial arrow direction based on whether the selection was made
+    // upwards or downwards.
+    var arrowDirection;
+    if (isSelectionBackwards) {
+      arrowDirection = ARROW_POINTING_DOWN;
+    } else {
+      arrowDirection = ARROW_POINTING_UP;
+    }
     var top;
     var left;
 
@@ -86,11 +92,16 @@ function Adder(element) {
       left = targetRect.left + targetRect.width - width() / 2 - hMargin;
     }
 
+    // Flip arrow direction if adder would appear above the top or below
+    // the bottom of the page.
+    //
     // Note: `pageYOffset` is used instead of `scrollY` here for
     // IE compatibility
     if (targetRect.top - height() < view.pageYOffset &&
         arrowDirection === ARROW_POINTING_DOWN) {
       arrowDirection = ARROW_POINTING_UP;
+    } else if (targetRect.top + height() > view.pageYOffset + view.innerHeight) {
+      arrowDirection = ARROW_POINTING_DOWN;
     }
 
     if (arrowDirection === ARROW_POINTING_UP) {

h/static/scripts/annotator/test/adder-test.js

@@ -32,9 +32,17 @@ describe('adder', function () {
   }
 
   describe('#target', function () {
-    it('positions the adder above the selection', function () {
+    it('positions the adder below the selection if the selection is forwards', function () {
       var target = adderCtrl.target(rect(100,200,100,20), false);
-      assert.isAbove(target.top, 100);
+      assert.isAbove(target.top, 220);
+      assert.isAbove(target.left, 100);
+      assert.isBelow(target.left, 200);
+      assert.equal(target.arrowDirection, adder.ARROW_POINTING_UP);
+    });
+
+    it('positions the adder above the selection if the selection is backwards', function () {
+      var target = adderCtrl.target(rect(100,200,100,20), true);
+      assert.isBelow(target.top, 200);
       assert.isAbove(target.left, 100);
       assert.isBelow(target.left, 200);
       assert.equal(target.arrowDirection, adder.ARROW_POINTING_DOWN);