Merge pull request #2859 from hypothesis/excerpt-hysteresis

Implement a hysteresis threshold in excerpts

h/static/scripts/directive/excerpt.js

@@ -65,16 +65,16 @@ function excerpt() {
           return {};
         }
 
-        var maxHeight;
-        if (ctrl.collapse) {
-          maxHeight = toPx(ctrl.collapsedHeight);
-        } else if (ctrl.animate) {
-          // animating the height change requires that the final
-          // height be specified exactly, rather than relying on
-          // auto height
-          maxHeight = toPx(contentElem.scrollHeight);
-        } else {
-          maxHeight = '';
+        var maxHeight = '';
+        if (ctrl.overflowing()) {
+          if (ctrl.collapse) {
+            maxHeight = toPx(ctrl.collapsedHeight);
+          } else if (ctrl.animate) {
+            // animating the height change requires that the final
+            // height be specified exactly, rather than relying on
+            // auto height
+            maxHeight = toPx(contentElem.scrollHeight);
+          }
         }
 
         return {
@@ -86,7 +86,10 @@ function excerpt() {
         if (!contentElem) {
           return false;
         }
-        return contentElem.scrollHeight > ctrl.collapsedHeight;
+
+        var hysteresisPx = ctrl.overflowHysteresis | 0;
+        return contentElem.scrollHeight >
+               (ctrl.collapsedHeight + hysteresisPx);
       };
 
       scope.$watch('vm.enabled()', function (isEnabled) {
@@ -131,6 +134,14 @@ function excerpt() {
       /** The height of this container in pixels when collapsed.
        */
       collapsedHeight: '=',
+      /**
+       * The number of pixels by which the height of the excerpt's content
+       * must extend beyond the collapsed height in order for truncation to
+       * be activated. This prevents the 'More' link from being shown to expand
+       * the excerpt if it has only been truncated by a very small amount, such
+       * that expanding the excerpt would reveal no extra lines of text.
+       */
+      overflowHysteresis: '=?',
     },
     restrict: 'E',
     transclude: true,

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

@@ -145,4 +145,26 @@ describe('excerpt directive', function () {
       assert.calledWith(callback, false);
     });
   });
+
+  describe('overflowHysteresis', function () {
+    it('does not collapse if overflow is less than hysteresis', function () {
+      var slightlyOverflowingDiv = '<div class="foo" style="height:45px;"></div>';
+      var element = excerptDirective({
+        collapsedHeight: 40,
+        overflowHysteresis: 10,
+      }, slightlyOverflowingDiv);
+      element.scope.$digest();
+      assert.isAbove(height(element[0]), 44);
+    });
+
+    it('does collapse if overflow exceeds hysteresis', function () {
+      var overflowingDiv = '<div style="height:60px;"></div>';
+      var element = excerptDirective({
+        collapsedHeight: 40,
+        overflowHysteresis: 10,
+      }, overflowingDiv);
+      element.scope.$digest();
+      assert.isBelow(height(element[0]), 50);
+    });
+  });
 });

h/templates/client/annotation.html

@@ -76,7 +76,8 @@
              inline-controls="false"
              on-collapsible-changed="vm.setBodyCollapsible(collapsible)"
              collapse="vm.collapseBody"
-             collapsed-height="200">
+             collapsed-height="200"
+             overflow-hysteresis="20">
       <markdown ng-model="vm.form.text"
                 read-only="!vm.editing()"
                 embeds-enabled="vm.feature('embed_media')">