Skip to content

Commit

Permalink
Change more argument to before/after callbacks to expanded
Browse files Browse the repository at this point in the history
  • Loading branch information
jedfoster committed Feb 9, 2014
1 parent 3811e43 commit 6d6994f
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 14 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,20 @@ If the element has a `max-height` CSS property, Readmore.js will use that value

### The callbacks:

The callback functions, `beforeToggle()` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `more`.
The callback functions, `beforeToggle()` and `afterToggle`, 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
* `more`: Boolean; `true` means the block is expanded
* `expanded`: Boolean; `true` means the block is expanded

#### 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.

```javascript
$('article').readmore({
afterToggle: function(trigger, element, more) {
if(! more) { // The "Close" link was clicked
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
}
}
Expand Down
12 changes: 6 additions & 6 deletions demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,21 +69,21 @@ <h2 id="theoptions">The options:</h2>

<h3 id="thecallbacks">The callbacks:</h3>

<p>The callback functions, <code>beforeToggle()</code> and <code>afterToggle</code>, both receive the same arguments: <code>trigger</code>, <code>element</code>, and <code>more</code>.</p>
<p>The callback functions, <code>beforeToggle()</code> and <code>afterToggle</code>, both receive the same arguments: <code>trigger</code>, <code>element</code>, and <code>expanded</code>.</p>

<ul>
<li><code>trigger</code>: the "Read more" or "Close" element that was clicked</li>
<li><code>element</code>: the block that is being collapsed or expanded</li>
<li><code>more</code>: Boolean; <code>true</code> means the block is expanded</li>
<li><code>expanded</code>: Boolean; <code>true</code> means the block is expanded</li>
</ul>

<h4 id="callbackexample">Callback example:</h4>

<p>Here's an example of how you could use the <code>afterToggle</code> callback to scroll back to the top of a block when the "Close" link is clicked.</p>

<pre><code class="javascript">$('article').readmore({
afterToggle: function(trigger, element, more) {
if(! more) { // The "Close" link was clicked
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
}
}
Expand Down Expand Up @@ -167,8 +167,8 @@ <h2>This section is shorter than the Readmore minimum</h2>
$('#info').readmore({
moreLink: '<a href="#">More examples and options</a>',
maxHeight: 390,
afterToggle: function(trigger, element, more) {
if(! more) { // The "Close" link was clicked
afterToggle: function(trigger, element, expanded) {
if(! expanded) { // The "Close" link was clicked
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
}
}
Expand Down
10 changes: 6 additions & 4 deletions readmore.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
embedCSS: true,
sectionCSS: 'display: block; width: 100%;',
startOpen: false,
expandedClass: 'readmore-js-expanded',
collapsedClass: 'readmore-js-collapsed',

// callbacks
beforeToggle: function(){},
Expand Down Expand Up @@ -99,13 +101,13 @@

var $this = this,
newHeight = newLink = '',
more = false,
expanded = false,
sliderHeight = $(element).data('sliderHeight');

if ($(element).height() == sliderHeight) {
newHeight = $(element).data().boxHeight + 'px';
newLink = 'lessLink';
more = true;
expanded = true;
}

else {
Expand All @@ -114,11 +116,11 @@
}

// Fire beforeToggle callback
$this.options.beforeToggle(trigger, element, more);
$this.options.beforeToggle(trigger, element, expanded);

$(element).animate({'height': newHeight}, {duration: $this.options.speed, complete: function() {
// Fire afterToggle callback
$this.options.afterToggle(trigger, element, more);
$this.options.afterToggle(trigger, element, expanded);

$(trigger).replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggleSlider(this, element, event) }).addClass('readmore-js-toggle'));
}
Expand Down

0 comments on commit 6d6994f

Please sign in to comment.