aboutsummaryrefslogtreecommitdiffstats
path: root/library
diff options
context:
space:
mode:
Diffstat (limited to 'library')
-rw-r--r--library/readmore.js/README.md22
-rw-r--r--library/readmore.js/readmore.js30
2 files changed, 38 insertions, 14 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')
}));
},