diff options
author | Jed Foster <jed@jedfoster.com> | 2014-02-09 12:59:54 -0800 |
---|---|---|
committer | Jed Foster <jed@jedfoster.com> | 2014-02-09 12:59:54 -0800 |
commit | ce591e2f0b849dcb48a5c165a96d935a08ae94e1 (patch) | |
tree | 4e1c9e9961ff8e39f9c7ef0fc7bdbf730b9b48af | |
parent | db4c5f4b613e6e9a0a1b25d14263c41223073492 (diff) | |
parent | f3df04f90007d2018d5c9546140bf4324a83a053 (diff) | |
download | Readmore.js-ce591e2f0b849dcb48a5c165a96d935a08ae94e1.zip Readmore.js-ce591e2f0b849dcb48a5c165a96d935a08ae94e1.tar.gz Readmore.js-ce591e2f0b849dcb48a5c165a96d935a08ae94e1.tar.bz2 |
Merge branch 'jackshakes-master'
-rw-r--r-- | README.md | 1 | ||||
-rw-r--r-- | demo.html | 3 | ||||
-rw-r--r-- | readmore.js | 7 | ||||
-rw-r--r-- | readmore.min.js | 10 |
4 files changed, 13 insertions, 8 deletions
@@ -22,6 +22,7 @@ Yes, it's that simple. You can change the speed of the animation, the height of * `speed: 100` (in milliseconds) * `maxHeight: 200` (in pixels) +* `heightMargin: 16` (in pixels, avoids collapsing blocks that are only slightly larger than `maxHeight`) * `moreLink: '<a href="#">Read more</a>'` * `lessLink: '<a href="#">Close</a>'` * `embedCSS: true` (insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet) @@ -54,7 +54,8 @@ <ul> <li><code>speed: 100</code> (in milliseconds)</li> - <li><code>maxHeight: 200</code> (in pixels)</li> + <li><code>maxHeight: 200</code> (in pixels)</li> + <li><code>heightMargin: 16</code> (in pixels, avoids collapsing blocks that are only slightly larger than <code>maxHeight</code>)</li> <li><code>moreLink: '<a href="#">Read more</a>'</code></li> <li><code>lessLink: '<a href="#">Close</a>'</code></li> <li><code>embedCSS: true</code> (insert required CSS dynamically, set this to <code>false</code> if you include the necessary CSS in a stylesheet)</li> diff --git a/readmore.js b/readmore.js index 0bf2119..1702369 100644 --- a/readmore.js +++ b/readmore.js @@ -11,6 +11,7 @@ defaults = { speed: 100, maxHeight: 200, + heightMargin: 16, moreLink: '<a href="#">Read More</a>', lessLink: '<a href="#">Close</a>', embedCSS: true, @@ -29,6 +30,7 @@ this.options = $.extend( {}, defaults, options); $(this.element).data('max-height', this.options.maxHeight); + $(this.element).data('height-margin', this.options.heightMargin); delete(this.options.maxHeight); @@ -63,7 +65,8 @@ $(this.element).each(function() { var current = $(this), - maxHeight = (current.css('max-height').replace(/[^-\d\.]/g, '') > current.data('max-height')) ? current.css('max-height').replace(/[^-\d\.]/g, '') : current.data('max-height'); + maxHeight = (current.css('max-height').replace(/[^-\d\.]/g, '') > current.data('max-height')) ? current.css('max-height').replace(/[^-\d\.]/g, '') : current.data('max-height'), + hightMargin = current.data('height-margin'); current.addClass('readmore-js-section'); @@ -73,7 +76,7 @@ current.data("boxHeight", current.outerHeight(true)); - if(current.outerHeight(true) < maxHeight) { + if(current.outerHeight(true) <= maxHeight + hightMargin) { // The block is shorter than the limit, so there's no need to truncate it. return true; } diff --git a/readmore.min.js b/readmore.min.js index f5157b2..1f485f9 100644 --- a/readmore.min.js +++ b/readmore.min.js @@ -1,5 +1,5 @@ -(function(d){function g(c,a){this.element=c;this.options=d.extend({},h,a);d(this.element).data("max-height",this.options.maxHeight);delete this.options.maxHeight;if(this.options.embedCSS&&!k){var b=".readmore-js-toggle, .readmore-js-section { "+this.options.sectionCSS+" } .readmore-js-section { overflow: hidden; }",e=document.createElement("style");e.type="text/css";e.styleSheet?e.styleSheet.cssText=b:e.appendChild(document.createTextNode(b));document.getElementsByTagName("head")[0].appendChild(e); -k=!0}this._defaults=h;this._name=f;this.init()}var f="readmore",h={speed:100,maxHeight:200,moreLink:'<a href="#">Read More</a>',lessLink:'<a href="#">Close</a>',embedCSS:!0,sectionCSS:"display: block; width: 100%;",beforeToggle:function(){},afterToggle:function(){}},k=!1;g.prototype={init:function(){var c=this;d(this.element).each(function(){var a=d(this),b=a.css("max-height").replace(/[^-\d\.]/g,"")>a.data("max-height")?a.css("max-height").replace(/[^-\d\.]/g,""):a.data("max-height");a.addClass("readmore-js-section"); -"none"!=a.css("max-height")&&a.css("max-height","none");a.data("boxHeight",a.outerHeight(!0));if(a.outerHeight(!0)<b)return!0;a.after(d(c.options.moreLink).on("click",function(b){c.toggleSlider(this,a,b)}).addClass("readmore-js-toggle"));a.data("sliderHeight",b);a.css({height:b})})},toggleSlider:function(c,a,b){b.preventDefault();var e=this,f=newLink="";b=!1;f=d(a).data("sliderHeight");d(a).height()==f?(f=d(a).data().boxHeight+"px",newLink="lessLink",b=!0):newLink="moreLink";e.options.beforeToggle(c, -a,b);d(a).animate({height:f},{duration:e.options.speed});d(c).replaceWith(d(e.options[newLink]).on("click",function(b){e.toggleSlider(this,a,b)}).addClass("readmore-js-toggle"));e.options.afterToggle(c,a,b)}};d.fn[f]=function(c){var a=arguments;if(void 0===c||"object"===typeof c)return this.each(function(){d.data(this,"plugin_"+f)||d.data(this,"plugin_"+f,new g(this,c))});if("string"===typeof c&&"_"!==c[0]&&"init"!==c)return this.each(function(){var b=d.data(this,"plugin_"+f);b instanceof g&&"function"=== -typeof b[c]&&b[c].apply(b,Array.prototype.slice.call(a,1))})}})(jQuery); +(function(d){function g(b,a){this.element=b;this.options=d.extend({},h,a);d(this.element).data("max-height",this.options.maxHeight);d(this.element).data("height-margin",this.options.heightMargin);delete this.options.maxHeight;if(this.options.embedCSS&&!k){var c=".readmore-js-toggle, .readmore-js-section { "+this.options.sectionCSS+" } .readmore-js-section { overflow: hidden; }",e=document.createElement("style");e.type="text/css";e.styleSheet?e.styleSheet.cssText=c:e.appendChild(document.createTextNode(c)); +document.getElementsByTagName("head")[0].appendChild(e);k=!0}this._defaults=h;this._name=f;this.init()}var f="readmore",h={speed:100,maxHeight:200,heightMargin:16,moreLink:'<a href="#">Read More</a>',lessLink:'<a href="#">Close</a>',embedCSS:!0,sectionCSS:"display: block; width: 100%;",startOpen:!1,beforeToggle:function(){},afterToggle:function(){}},k=!1;g.prototype={init:function(){var b=this;d(this.element).each(function(){var a=d(this),c=a.css("max-height").replace(/[^-\d\.]/g,"")>a.data("max-height")? +a.css("max-height").replace(/[^-\d\.]/g,""):a.data("max-height"),e=a.data("height-margin");a.addClass("readmore-js-section");"none"!=a.css("max-height")&&a.css("max-height","none");a.data("boxHeight",a.outerHeight(!0));if(a.outerHeight(!0)<=c+e)return!0;a.data("sliderHeight",c);a.after(d(b.options.startOpen?b.options.lessLink:b.options.moreLink).on("click",function(c){b.toggleSlider(this,a,c)}).addClass("readmore-js-toggle"));b.options.startOpen||a.css({height:c})})},toggleSlider:function(b,a,c){c.preventDefault(); +var e=this,f=newLink="";c=!1;f=d(a).data("sliderHeight");d(a).height()==f?(f=d(a).data().boxHeight+"px",newLink="lessLink",c=!0):newLink="moreLink";e.options.beforeToggle(b,a,c);d(a).animate({height:f},{duration:e.options.speed});d(b).replaceWith(d(e.options[newLink]).on("click",function(b){e.toggleSlider(this,a,b)}).addClass("readmore-js-toggle"));e.options.afterToggle(b,a,c)}};d.fn[f]=function(b){var a=arguments;if(void 0===b||"object"===typeof b)return this.each(function(){d.data(this,"plugin_"+ +f)||d.data(this,"plugin_"+f,new g(this,b))});if("string"===typeof b&&"_"!==b[0]&&"init"!==b)return this.each(function(){var c=d.data(this,"plugin_"+f);c instanceof g&&"function"===typeof c[b]&&c[b].apply(c,Array.prototype.slice.call(a,1))})}})(jQuery); |