harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade readmore.js and improve collapsing a little

Browse Source
This commit is contained in:
Mario Vavti
2016-07-22 14:03:14 +02:00
parent 7d897a3f03
commit 38e46fff54
3 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
library/readmore.js/README.md
View File

@@ -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
```