upgrade readmore.js and improve collapsing a little

library/readmore.js/README.md

@@ -9,16 +9,22 @@ Readmore.js is tested with—and supported on—all versions of jQuery greater t
 
 ## Install
 
-Install Readmore.js with Bower:
+Install Readmore.js with npm:
 
 ```
-$ bower install readmore
+$ npm install readmore-js
 ```
 
 Then include it in your HTML:
 
 ```html
-<script src="/bower_components/readmore/readmore.min.js"></script>
+<script src="/node_modules/readmore-js/readmore.min.js"></script>
+```
+
+Or, using Webpack or Browserify:
+
+```javascript
+require('readmore-js');
 ```
 
 
@@ -49,17 +55,23 @@ $('article').readmore({
 * `startOpen: false` do not immediately truncate, start in the fully opened position
 * `beforeToggle: function() {}` called after a more or less link is clicked, but *before* the block is collapsed or expanded
 * `afterToggle: function() {}` called *after* the block is collapsed or expanded
+* `blockProcessed: function() {}` called once per block during initilization after Readmore.js has processed the block.
 
 If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `collapsedHeight` option.
 
 ### The callbacks:
 
-The callback functions, `beforeToggle` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`.
+The `beforeToggle` and `afterToggle` callbacks both receive the same arguments: `trigger`, `element`, and `expanded`.
 
 * `trigger`: the "Read more" or "Close" element that was clicked
 * `element`: the block that is being collapsed or expanded
 * `expanded`: Boolean; `true` means the block is expanded
 
+The `blockProcessed` callback receives `element` and `collapsable`.
+
+* `element`: the block that has just been processed
+* `collapsable`: Boolean; `false` means the block was shorter than the specified minimum `collapsedHeight`--the block will not have a "Read more" link
+
 #### Callback example:
 
 Here's an example of how you could use the `afterToggle` callback to scroll back to the top of a block when the "Close" link is clicked.
@@ -166,6 +178,6 @@ $ npm install
 Which will install the necessary development dependencies. Then, to build the minified script:
 
 ```
-$ gulp compress
+$ npm run build
 ```
 

library/readmore.js/readmore.js

@@ -37,6 +37,7 @@
         startOpen: false,
 
         // callbacks
+        blockProcessed: function() {},
         beforeToggle: function() {},
         afterToggle: function() {}
       },
@@ -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`
+      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() {
+          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')
         }));
     },

view/js/main.js

@@ -659,7 +659,7 @@ function collapseHeight() {
 	var position = $(window).scrollTop();
 
 	$(".wall-item-content, .directory-collapse").each(function() {
-		var orgHeight = parseInt($(this).css('height'));
+		var orgHeight = $(this).outerHeight(true);
 		if(orgHeight > divmore_height) {
 			if(! $(this).hasClass('divmore')) {
 
@@ -679,7 +679,7 @@ function collapseHeight() {
 					beforeToggle: function(trigger, element, expanded) {
 						if(expanded) {
 							if((($(element).offset().top + divmore_height) - $(window).scrollTop()) < 65 ) {
-								$(window).scrollTop($(window).scrollTop() - (orgHeight - divmore_height));
+								$(window).scrollTop($(window).scrollTop() - ($(element).outerHeight(true) - divmore_height));
 							}
 						}
 					}