upgrade readmore.js and improve collapsing a little

library/readmore.js/readmore.js

@@ -37,8 +37,9 @@
         startOpen: false,
 
         // callbacks
-        beforeToggle: function(){},
-        afterToggle: function(){}
+        blockProcessed: function() {},
+        beforeToggle: function() {},
+        afterToggle: function() {}
       },
       cssEmbedded = {},
       uniqueIdCounter = 0;
@@ -187,6 +188,9 @@
 
       if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
         // The block is shorter than the limit, so there's no need to truncate it.
+        if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
+          this.options.blockProcessed(current, false);
+        }
         return true;
       }
       else {
@@ -206,7 +210,7 @@
             };
           })(this))
           .attr({
-            'data-readmore-toggle': '',
+            'data-readmore-toggle': id,
             'aria-controls': id
           }));
 
@@ -215,6 +219,10 @@
             height: collapsedHeight
           });
         }
+
+        if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
+          this.options.blockProcessed(current, true);
+        }
       }
     },
 
@@ -224,11 +232,11 @@
       }
 
       if (! trigger) {
-        trigger = $('[aria-controls="' + _this.element.id + '"]')[0];
+        trigger = $('[aria-controls="' + this.element.id + '"]')[0];
       }
 
       if (! element) {
-        element = _this.element;
+        element = this.element;
       }
 
       var $element = $(element),
@@ -238,7 +246,7 @@
           collapsedHeight = $element.data('collapsedHeight');
 
       if ($element.height() <= collapsedHeight) {
-        newHeight = 100 + '%';
+        newHeight = $element.data('expandedHeight') + 'px';
         newLink = 'lessLink';
         expanded = true;
       }
@@ -250,14 +258,18 @@
       // Fire beforeToggle callback
       // Since we determined the new "expanded" state above we're now out of sync
       // with our true current state, so we need to flip the value of `expanded`
-      this.options.beforeToggle(trigger, $element, ! expanded);
+      if (this.options.beforeToggle && typeof this.options.beforeToggle === 'function') {
+        this.options.beforeToggle(trigger, $element, ! expanded);
+      }
 
       $element.css({'height': newHeight});
 
       // Fire afterToggle callback
       $element.on('transitionend', (function(_this) {
         return function() {
-          _this.options.afterToggle(trigger, $element, expanded);
+          if (_this.options.afterToggle && typeof _this.options.afterToggle === 'function') {
+            _this.options.afterToggle(trigger, $element, expanded);
+          }
 
           $(this).attr({
             'aria-expanded': expanded
@@ -272,7 +284,7 @@
             };
           })(this))
         .attr({
-          'data-readmore-toggle': '',
+          'data-readmore-toggle': $element.attr('id'),
           'aria-controls': $element.attr('id')
         }));
     },