diff options
| -rw-r--r-- | readmore.js | 65 |
1 files changed, 41 insertions, 24 deletions
diff --git a/readmore.js b/readmore.js index 5702c1c..ba3bf6d 100644 --- a/readmore.js +++ b/readmore.js @@ -12,7 +12,7 @@ var readmore = 'readmore', defaults = { speed: 100, - maxHeight: 200, + collapsedHeight: 200, heightMargin: 16, moreLink: '<a href="#">Read More</a>', lessLink: '<a href="#">Close</a>', @@ -63,12 +63,10 @@ this.options = $.extend({}, defaults, options); $(this.element).data({ - 'max-height': this.options.maxHeight, - 'height-margin': this.options.heightMargin + 'defaultCollapsedHeight': this.options.collapsedHeight, + 'heightMargin': this.options.heightMargin }); - delete(this.options.maxHeight); - if (! cssEmbedded[this.options.selector]) { var styles = ' '; @@ -113,17 +111,14 @@ var $this = this; $(this.element).each(function() { - var current = $(this), - maxHeight = (parseInt(current.css('max-height').replace(/[^-\d\.]/g, ''), 10) > current.data('max-height')) ? parseInt(current.css('max-height').replace(/[^-\d\.]/g, ''), 10) : current.data('max-height'), - heightMargin = current.data('height-margin'); + var current = $(this); - if (current.css('max-height') != 'none') { - current.css('max-height', 'none'); - } + $this.setBoxHeights(current); - $this.setBoxHeight(current); + var collapsedHeight = current.data('collapsedHeight'), + heightMargin = current.data('heightMargin'); - if (current.outerHeight(true) <= maxHeight + heightMargin) { + if (current.outerHeight(true) <= collapsedHeight + heightMargin) { // The block is shorter than the limit, so there's no need to truncate it. return true; } @@ -131,12 +126,12 @@ var id = current.attr('id') || uniqueId(), useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink; - current.attr({'data-readmore-js-section': '', 'aria-expanded': false, 'id': id}).data('collapsedHeight', maxHeight); + current.attr({'data-readmore-js-section': '', 'aria-expanded': false, 'id': id}); current.after($(useLink).on('click', function(event) { $this.toggle(this, current[0], event); }).attr({'data-readmore-js-toggle': '', 'aria-controls': id})); if (! $this.options.startOpen) { - current.css({height: maxHeight}); + current.css({height: collapsedHeight}); } } }); @@ -192,26 +187,47 @@ $(trigger).replaceWith($($this.options[newLink]).on('click', function(event) { $this.toggle(this, element, event); }).attr({'data-readmore-js-toggle': '', 'aria-controls': $element.attr('id')})); }, - setBoxHeight: function(element) { - var el = element.clone().css({'height': 'auto', 'width': element.width(), 'overflow': 'hidden'}).insertAfter(element), - height = el.outerHeight(true); + setBoxHeights: function(element) { + var el = element.clone().css({ + 'height': 'auto', + 'width': element.width(), + 'max-height': 'none', + 'overflow': 'hidden' + }).insertAfter(element), + expandedHeight = el.outerHeight(true), + cssMaxHeight = parseInt(el.css({'max-height': ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10); el.remove(); - element.data('expandedHeight', height); + var collapsedHeight = element.data('collapsedHeight') || element.data('defaultCollapsedHeight'); + + if (!cssMaxHeight) { + collapsedHeight = element.data('defaultCollapsedHeight'); + } + else if (cssMaxHeight > collapsedHeight) { + collapsedHeight = cssMaxHeight; + } + + // Store our measurements. + element.data({ + 'expandedHeight': expandedHeight, + 'maxHeight': cssMaxHeight, + 'collapsedHeight': collapsedHeight + }) + // and disable any `max-height` property set in CSS + .css('max-height', 'none'); }, resizeBoxes: debounce(function() { var $this = this; $('[data-readmore-js-section]').each(function() { - var current = $(this); + var current = $(this), + isExpanded = (current.attr('aria-expanded') === 'true'); - $this.setBoxHeight(current); + $this.setBoxHeights(current); - if (current.height() > current.data('expandedHeight') || (current.attr('aria-expanded') && current.height() < current.data('expandedHeight')) ) { - current.css('height', current.data('expandedHeight')); - } + current.css('height', current.data( (isExpanded ? 'expandedHeight' : 'collapsedHeight') )); }); }, 100), @@ -228,6 +244,7 @@ } }; + $.fn.readmore = function(options) { var args = arguments, selector = this.selector; |