Scroll to annotation when clicking at bottom of collapsed quote

Collapsed quotes can be expanded either explicitly by clicking the
'More' link on the quote or 'implicitly' by clicking anywhere at the
bottom of the quote. In that case, the clicked annotation should
be scrolled into view.

This commit separates the behavior when clicking on the toggle link vs
clicking at the bottom of the card.

In the template, the bottom area has been moved before the inline
controls so that the inline controls are above the bottom area and
receive click events first.

h/static/scripts/directive/excerpt.js

@@ -22,13 +22,23 @@ function ExcerptController() {
   };
 
   this.toggle = function (event) {
+    // When the user clicks a link explicitly to toggle the collapsed state,
+    // the event is not propagated.
     event.stopPropagation();
     this.collapse = !this.collapse;
   };
 
+  this.expand = function () {
+    // When the user expands the excerpt 'implicitly' by clicking at the bottom
+    // of the collapsed excerpt, the event is allowed to propagate. For
+    // annotation cards, this causes clicking on a quote to scroll the view to
+    // the selected annotation.
+    this.collapse = false;
+  };
+
   this.showInlineControls = function () {
     return this.overflowing() && this.inlineControls;
-  }
+  };
 
   this.bottomShadowStyles = function () {
     return {
@@ -36,7 +46,7 @@ function ExcerptController() {
       'excerpt__shadow--transparent': this.inlineControls,
       'is-hidden': !this.isExpandable(),
     };
-  }
+  };
 }
 
 function toPx(val) {
@@ -80,7 +90,7 @@ function excerpt() {
         return {
           'max-height': maxHeight,
         };
-      }
+      };
 
       ctrl.overflowing = function overflowing() {
         if (!contentElem) {

h/static/scripts/directive/test/excerpt-test.js

 'use strict';
 
+var angular = require('angular');
+
 var assign = require('core-js/modules/$.object-assign');
 var util = require('./util');
 var excerpt = require('../excerpt');
@@ -110,6 +112,18 @@ describe('excerpt directive', function () {
     });
   });
 
+  describe('bottom area', function () {
+    it('expands the excerpt when clicking at the bottom if collapsed', function () {
+      var element = excerptDirective({inlineControls: true},
+        TALL_DIV);
+      element.scope.$digest();
+      assert.isTrue(element.ctrl.collapse);
+      var bottomArea = element[0].querySelector('.excerpt__shadow');
+      angular.element(bottomArea).click();
+      assert.isFalse(element.ctrl.collapse);
+    });
+  });
+
   describe('.collapse', function () {
     it('collapses the body if collapse is true', function () {
       var element = excerptDirective({collapse: true}, TALL_DIV);

h/templates/client/excerpt.html

@@ -2,6 +2,9 @@
 <div class="excerpt__container" ng-if="vm.enabled()">
   <div class="excerpt" ng-style="vm.contentStyle()">
     <div ng-transclude></div>
+    <div ng-click="vm.expand()"
+         ng-class="vm.bottomShadowStyles()"
+         title="Show the full excerpt"></div>
     <div class="excerpt__inline-controls"
          ng-show="vm.showInlineControls()">
       <span class="excerpt__toggle-link" ng-show="vm.isExpandable()">
@@ -14,7 +17,4 @@
       </span>
     </div>
   </div>
-  <div ng-click="vm.toggle($event)"
-       ng-class="vm.bottomShadowStyles()"
-       title="Show the full excerpt"></div>
 </div>