Merge pull request #3180 from hypothesis/296-scroll-when-expanding-quote

Scroll to annotation when clicking at bottom of collapsed quote

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

@@ -111,6 +111,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>