Visually truncate long bodies and quotes

- Introduce collapsing bodies and quotes which expand when you click more.
- This is done through the new excerpt directive which looks to see if text
is overflowing its container and appends 'More...' and 'Less ^' spans.
- Watch annotation controller to see if an annotation is being edited so
that excerpts can be applied to newly created and updated annotation.
- Add event for threadToggleCollapse in the thread directive, and revaluate
excerpts after thread expansion.

h/static/scripts/app.coffee

@@ -92,6 +92,7 @@ module.exports = angular.module('h', [
 
 .directive('annotation', require('./directive/annotation'))
 .directive('deepCount', require('./directive/deep-count'))
+.directive('excerpt', require('./directive/excerpt'))
 .directive('formInput', require('./directive/form-input'))
 .directive('formValidate', require('./directive/form-validate'))
 .directive('groupList', require('./directive/group-list'))

h/static/scripts/directive/excerpt.coffee

@@ -0,0 +1,35 @@
+###*
+# @ngdoc directive
+# @name excerpt
+# @restrict C
+# @description Checks to see if text is overflowing its container.
+# If so, it prepends/appends expanders/collapsers. Note, to work
+# the element needs a max height.
+###
+module.exports = [ '$timeout', ($timeout) ->
+  link: (scope, elem, attr, ctrl) ->
+    # Check for excerpts if an annotation has been created / edited.
+    scope.$watch (-> scope.vm.editing), (editing) ->
+      if editing
+        elem.find('.more').remove()
+        elem.find('.less').remove()
+      scope.excerpt()
+
+    # Check for excerpts on threadCollapseToggle event.
+    scope.$on 'threadToggleCollapse', (value) ->
+      scope.excerpt()
+
+    do scope.excerpt = ->
+      $timeout ->
+        if elem.find('.more').length == 0
+          if elem[0].scrollHeight > elem[0].clientHeight
+            elem.prepend angular.element '<span class="more"> More...</span>'
+            elem.append angular.element '<span class="less"> Less ^</span>'
+            elem.find('.more').on 'click', ->
+              $(this).hide()
+              elem.addClass('show-full-excerpt')
+            elem.find('.less').on 'click', ->
+              elem.find('.more').show()
+              elem.removeClass('show-full-excerpt')
+  restrict: 'C'
+]

h/static/scripts/directive/thread.coffee

@@ -13,7 +13,8 @@ uuid = require('node-uuid')
 # the collapsing behavior.
 ###
 ThreadController = [
-  ->
+  '$scope',
+  ($scope) ->
     @container = null
     @collapsed = true
     @parent = null
@@ -33,6 +34,7 @@ ThreadController = [
                  !!value
                else
                  not @collapsed
+      $scope.$broadcast('threadToggleCollapse', value)
       @collapsed = newval
 
     ###*

h/static/styles/annotations.scss

@@ -66,6 +66,9 @@
 
 .annotation-quote {
   @include quote;
+  max-height: 2.9em;
+  overflow: hidden;
+
   del {
     background:#ffe6e6;
   }
@@ -74,6 +77,11 @@
   }
 }
 
+.annotation-body {
+  max-height: 13.5em;
+  overflow: hidden;
+}
+
 .annotation-citation-domain {
   color: $gray-light;
   font-size: .923em;

h/static/styles/common.scss

@@ -9,6 +9,7 @@ $headings-color: $text-color;
 @import 'mixins/responsive';
 @import 'grid';
 @import 'annotations';
+@import 'excerpt';
 @import 'forms';
 @import 'markdown-editor';
 @import 'spinner';

h/static/styles/excerpt.scss

@@ -0,0 +1,36 @@
+.excerpt {
+  position: relative;
+
+  &.show-full-excerpt {
+    max-height: 100% !important;
+  }
+
+  .more, .less {
+    color: rgba(189, 28, 43, 0.5);
+    background: #fff;
+    font-style: italic;
+    font-family: Georgia,"Bitstream Charter","Times","Times New Roman",serif;
+
+    &:hover {
+      color: #BD1C2B;
+    }
+  }
+
+  .more {
+    position: absolute;
+    bottom: 0;
+    left: 87%;
+
+    &:before {
+      opacity: .8;
+      content: " ";
+      margin-left: -3em;
+      padding-right: 40px;
+      background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
+      background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+      background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+      background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+    }
+  }
+}

h/templates/client/annotation.html

@@ -60,7 +60,7 @@
   <!-- Excerpts -->
   <section class="annotation-section"
            ng-repeat="target in vm.annotation.target track by $index">
-    <blockquote class="annotation-quote"
+    <blockquote class="annotation-quote excerpt"
                 ng-hide="target.diffHTML && vm.showDiff"
                 ng-bind-html="selector.exact"
                 ng-repeat="selector in target.selector
@@ -81,7 +81,7 @@
 
   <!-- Body -->
   <section name="text"
-           class="annotation-body"
+           class="annotation-body excerpt"
            ng-model="vm.annotation.text"
            ng-readonly="!vm.editing"
            markdown>