aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--library/readmore.js/readmore.js168
1 files changed, 94 insertions, 74 deletions
diff --git a/library/readmore.js/readmore.js b/library/readmore.js/readmore.js
index d4c1cf723..fb5a0e0f9 100644
--- a/library/readmore.js/readmore.js
+++ b/library/readmore.js/readmore.js
@@ -11,7 +11,18 @@
/* global jQuery */
-(function($) {
+(function(factory) {
+ if (typeof define === 'function' && define.amd) {
+ // AMD
+ define(['jquery'], factory);
+ } else if (typeof exports === 'object') {
+ // CommonJS
+ module.exports = factory(require('jquery'));
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
+}(function($) {
'use strict';
var readmore = 'readmore',
@@ -61,20 +72,19 @@
}
function setBoxHeights(element) {
- var el = element,
- expandedHeight = el.outerHeight(true),
+ var el = element.clone().css({
+ height: 'auto',
+ width: element.width(),
+ maxHeight: 'none',
+ overflow: 'hidden'
+ }).insertAfter(element),
+ expandedHeight = el.outerHeight(),
cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
defaultHeight = element.data('defaultHeight');
-console.log("el height: " + expandedHeight);
- var collapsedHeight = element.data('collapsedHeight') || defaultHeight;
+ el.remove();
- if (!cssMaxHeight) {
- collapsedHeight = defaultHeight;
- }
- else if (cssMaxHeight > collapsedHeight) {
- collapsedHeight = cssMaxHeight;
- }
+ var collapsedHeight = cssMaxHeight || element.data('collapsedHeight') || defaultHeight;
// Store our measurements.
element.data({
@@ -137,69 +147,75 @@ console.log("el height: " + expandedHeight);
}
function Readmore(element, options) {
- var $this = this;
-
this.element = element;
this.options = $.extend({}, defaults, options);
- $(this.element).data({
- defaultHeight: this.options.collapsedHeight,
- heightMargin: this.options.heightMargin
- });
embedCSS(this.options);
this._defaults = defaults;
this._name = readmore;
- // Waiting for the page to load doesn't work when there is dynamic content
- // But usually we already have the content, so no need to wait
- //window.addEventListener('load', function() {
- $this.init();
- //});
+ this.init();
+
+ // IE8 chokes on `window.addEventListener`, so need to test for support.
+ if (window.addEventListener) {
+ // Need to resize boxes when the page has fully loaded.
+ window.addEventListener('load', resizeBoxes);
+ window.addEventListener('resize', resizeBoxes);
+ }
+ else {
+ window.attachEvent('load', resizeBoxes);
+ window.attachEvent('resize', resizeBoxes);
+ }
}
Readmore.prototype = {
init: function() {
- var $this = this;
+ var current = $(this.element);
- $(this.element).each(function() {
- var current = $(this);
+ current.data({
+ defaultHeight: this.options.collapsedHeight,
+ heightMargin: this.options.heightMargin
+ });
- setBoxHeights(current);
+ setBoxHeights(current);
- var collapsedHeight = current.data('collapsedHeight'),
- heightMargin = current.data('heightMargin');
+ var collapsedHeight = current.data('collapsedHeight'),
+ heightMargin = current.data('heightMargin');
- if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
- // The block is shorter than the limit, so there's no need to truncate it.
- return true;
- }
- else {
- var id = current.attr('id') || uniqueId(),
- useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink;
+ if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
+ // The block is shorter than the limit, so there's no need to truncate it.
+ return true;
+ }
+ else {
+ var id = current.attr('id') || uniqueId(),
+ useLink = this.options.startOpen ? this.options.lessLink : this.options.moreLink;
- current.attr({
- 'data-readmore': '',
- 'aria-expanded': false,
- 'id': id
- });
+ current.attr({
+ 'data-readmore': '',
+ 'aria-expanded': this.options.startOpen,
+ 'id': id
+ });
+
+ current.after($(useLink)
+ .on('click', (function(_this) {
+ return function(event) {
+ _this.toggle(this, current[0], event);
+ };
+ })(this))
+ .attr({
+ 'data-readmore-toggle': '',
+ 'aria-controls': id
+ }));
- current.after($(useLink)
- .on('click', function(event) { $this.toggle(this, current[0], event); })
- .attr({
- 'data-readmore-toggle': '',
- 'aria-controls': id
- }));
-
- if (! $this.options.startOpen) {
- current.css({
- height: collapsedHeight
- });
- }
+ if (! this.options.startOpen) {
+ current.css({
+ height: collapsedHeight
+ });
}
- });
+ }
},
toggle: function(trigger, element, event) {
@@ -208,22 +224,21 @@ console.log("el height: " + expandedHeight);
}
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 $this = this,
- $element = $(element),
+ var $element = $(element),
newHeight = '',
newLink = '',
expanded = false,
collapsedHeight = $element.data('collapsedHeight');
if ($element.height() <= collapsedHeight) {
- newHeight = $element.data('expandedHeight') + 'px';
+ newHeight = 100 + '%';
newLink = 'lessLink';
expanded = true;
}
@@ -235,25 +250,31 @@ console.log("el height: " + expandedHeight);
// 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);
+ this.options.beforeToggle(trigger, $element, ! expanded);
$element.css({'height': newHeight});
// Fire afterToggle callback
- $element.on('transitionend', function() {
- $this.options.afterToggle(trigger, element, expanded);
+ $element.on('transitionend', (function(_this) {
+ return function() {
+ _this.options.afterToggle(trigger, $element, expanded);
- $(this).attr({
- 'aria-expanded': expanded
- }).off('transitionend');
- });
-
- $(trigger).replaceWith($($this.options[newLink])
- .on('click', function(event) { $this.toggle(this, element, event); })
- .attr({
- 'data-readmore-toggle': '',
- 'aria-controls': $element.attr('id')
- }));
+ $(this).attr({
+ 'aria-expanded': expanded
+ }).off('transitionend');
+ }
+ })(this));
+
+ $(trigger).replaceWith($(this.options[newLink])
+ .on('click', (function(_this) {
+ return function(event) {
+ _this.toggle(this, element, event);
+ };
+ })(this))
+ .attr({
+ 'data-readmore-toggle': '',
+ 'aria-controls': $element.attr('id')
+ }));
},
destroy: function() {
@@ -305,6 +326,5 @@ console.log("el height: " + expandedHeight);
}
};
-})(jQuery);
-
+}));