diff options
| -rw-r--r-- | library/readmore.js/README.md | 22 | ||||
| -rw-r--r-- | library/readmore.js/readmore.js | 30 | ||||
| -rw-r--r-- | view/js/main.js | 4 |
3 files changed, 40 insertions, 16 deletions
diff --git a/library/readmore.js/README.md b/library/readmore.js/README.md index 0116fbe8b..24649f32d 100644 --- a/library/readmore.js/README.md +++ b/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 ``` diff --git a/library/readmore.js/readmore.js b/library/readmore.js/readmore.js index fb5a0e0f9..34a624eb9 100644 --- a/library/readmore.js/readmore.js +++ b/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') })); }, diff --git a/view/js/main.js b/view/js/main.js index a288f98f5..a3fade0ea 100644 --- a/view/js/main.js +++ b/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)); } } } |