From 878ff96b2c2a0ecaf195af79210d4ac34ec06cd8 Mon Sep 17 00:00:00 2001 From: liabru Date: Fri, 25 Dec 2015 13:46:30 +0000 Subject: [PATCH] fix issue maintaining inline styles, closes #95 --- jquery.matchHeight-min.js | 14 +++++++------- jquery.matchHeight.js | 9 +++++++-- test/page/test.html | 20 ++++++++++++++++++++ test/specs/matchHeight.spec.js | 19 +++++++++++++++++-- 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js index cc1eb44..9b18871 100644 --- a/jquery.matchHeight-min.js +++ b/jquery.matchHeight-min.js @@ -3,10 +3,10 @@ * http://brm.io/jquery-match-height/ * License MIT */ -!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){var e=-1,o=-1,i=function(t){return parseFloat(t)||0},n=function(e){var o=1,n=t(e),a=null,r=[];return n.each(function(){var e=t(this),n=e.offset().top-i(e.css("margin-top")),s=r.length>0?r[r.length-1]:null;null===s?r.push(e):Math.floor(Math.abs(a-n))<=o?r[r.length-1]=s.add(e):r.push(e),a=n}),r},a=function(e){var o={ -byRow:!0,property:"height",target:null,remove:!1};return"object"==typeof e?t.extend(o,e):("boolean"==typeof e?o.byRow=e:"remove"===e&&(o.remove=!0),o)},r=t.fn.matchHeight=function(e){var o=a(e);if(o.remove){var i=this;return this.css(o.property,""),t.each(r._groups,function(t,e){e.elements=e.elements.not(i)}),this}return this.length<=1&&!o.target?this:(r._groups.push({elements:this,options:o}),r._apply(this,o),this)};r.version="master",r._groups=[],r._throttle=80,r._maintainScroll=!1,r._beforeUpdate=null, -r._afterUpdate=null,r._rows=n,r._parse=i,r._parseOptions=a,r._apply=function(e,o){var s=a(o),h=t(e),c=[h],l=t(window).scrollTop(),p=t("html").outerHeight(!0),d=h.parents().filter(":hidden");return d.each(function(){var e=t(this);e.data("style-cache",e.attr("style"))}),d.css("display","block"),s.byRow&&!s.target&&(h.each(function(){var e=t(this),o=e.css("display");"inline-block"!==o&&"flex"!==o&&"inline-flex"!==o&&(o="block"),e.data("style-cache",e.attr("style")),e.css({display:o,"padding-top":"0", -"padding-bottom":"0","margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px",overflow:"hidden"})}),c=n(h),h.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||"")})),t.each(c,function(e,o){var n=t(o),a=0;if(s.target)a=s.target.outerHeight(!1);else{if(s.byRow&&n.length<=1)return void n.css(s.property,"");n.each(function(){var e=t(this),o=e.css("display");"inline-block"!==o&&"flex"!==o&&"inline-flex"!==o&&(o="block");var i={display:o};i[s.property]="", -e.css(i),e.outerHeight(!1)>a&&(a=e.outerHeight(!1)),e.css("display","")})}n.each(function(){var e=t(this),o=0;s.target&&e.is(s.target)||("border-box"!==e.css("box-sizing")&&(o+=i(e.css("border-top-width"))+i(e.css("border-bottom-width")),o+=i(e.css("padding-top"))+i(e.css("padding-bottom"))),e.css(s.property,a-o+"px"))})}),d.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||null)}),r._maintainScroll&&t(window).scrollTop(l/p*t("html").outerHeight(!0)),this},r._applyDataApi=function(){ -var e={};t("[data-match-height], [data-mh]").each(function(){var o=t(this),i=o.attr("data-mh")||o.attr("data-match-height");i in e?e[i]=e[i].add(o):e[i]=o}),t.each(e,function(){this.matchHeight(!0)})};var s=function(e){r._beforeUpdate&&r._beforeUpdate(e,r._groups),t.each(r._groups,function(){r._apply(this.elements,this.options)}),r._afterUpdate&&r._afterUpdate(e,r._groups)};r._update=function(i,n){if(n&&"resize"===n.type){var a=t(window).width();if(a===e)return;e=a}i?-1===o&&(o=setTimeout(function(){ -s(n),o=-1},r._throttle)):s(n)},t(r._applyDataApi),t(window).bind("load",function(t){r._update(!1,t)}),t(window).bind("resize orientationchange",function(t){r._update(!0,t)})}); \ No newline at end of file +!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){var e=-1,o=-1,a=function(t){return parseFloat(t)||0},i=function(e){var o=1,i=t(e),n=null,r=[];return i.each(function(){var e=t(this),i=e.offset().top-a(e.css("margin-top")),s=r.length>0?r[r.length-1]:null;null===s?r.push(e):Math.floor(Math.abs(n-i))<=o?r[r.length-1]=s.add(e):r.push(e),n=i}),r},n=function(e){var o={ +byRow:!0,property:"height",target:null,remove:!1};return"object"==typeof e?t.extend(o,e):("boolean"==typeof e?o.byRow=e:"remove"===e&&(o.remove=!0),o)},r=t.fn.matchHeight=function(e){var o=n(e);if(o.remove){var a=this;return this.css(o.property,""),t.each(r._groups,function(t,e){e.elements=e.elements.not(a)}),this}return this.length<=1&&!o.target?this:(r._groups.push({elements:this,options:o}),r._apply(this,o),this)};r.version="master",r._groups=[],r._throttle=80,r._maintainScroll=!1,r._beforeUpdate=null, +r._afterUpdate=null,r._rows=i,r._parse=a,r._parseOptions=n,r._apply=function(e,o){var s=n(o),h=t(e),l=[h],c=t(window).scrollTop(),p=t("html").outerHeight(!0),d=h.parents().filter(":hidden");return d.each(function(){var e=t(this);e.data("style-cache",e.attr("style"))}),d.css("display","block"),s.byRow&&!s.target&&(h.each(function(){var e=t(this),o=e.css("display");"inline-block"!==o&&"flex"!==o&&"inline-flex"!==o&&(o="block"),e.data("style-cache",e.attr("style")),e.css({display:o,"padding-top":"0", +"padding-bottom":"0","margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px",overflow:"hidden"})}),l=i(h),h.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||"")})),t.each(l,function(e,o){var i=t(o),n=0;if(s.target)n=s.target.outerHeight(!1);else{if(s.byRow&&i.length<=1)return void i.css(s.property,"");i.each(function(){var e=t(this),o=e.attr("style"),a=e.css("display");"inline-block"!==a&&"flex"!==a&&"inline-flex"!==a&&(a="block");var i={ +display:a};i[s.property]="",e.css(i),e.outerHeight(!1)>n&&(n=e.outerHeight(!1)),o?e.attr("style",o):e.css("display","")})}i.each(function(){var e=t(this),o=0;s.target&&e.is(s.target)||("border-box"!==e.css("box-sizing")&&(o+=a(e.css("border-top-width"))+a(e.css("border-bottom-width")),o+=a(e.css("padding-top"))+a(e.css("padding-bottom"))),e.css(s.property,n-o+"px"))})}),d.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||null)}),r._maintainScroll&&t(window).scrollTop(c/p*t("html").outerHeight(!0)), +this},r._applyDataApi=function(){var e={};t("[data-match-height], [data-mh]").each(function(){var o=t(this),a=o.attr("data-mh")||o.attr("data-match-height");a in e?e[a]=e[a].add(o):e[a]=o}),t.each(e,function(){this.matchHeight(!0)})};var s=function(e){r._beforeUpdate&&r._beforeUpdate(e,r._groups),t.each(r._groups,function(){r._apply(this.elements,this.options)}),r._afterUpdate&&r._afterUpdate(e,r._groups)};r._update=function(a,i){if(i&&"resize"===i.type){var n=t(window).width();if(n===e)return;e=n; +}a?-1===o&&(o=setTimeout(function(){s(i),o=-1},r._throttle)):s(i)},t(r._applyDataApi),t(window).bind("load",function(t){r._update(!1,t)}),t(window).bind("resize orientationchange",function(t){r._update(!0,t)})}); \ No newline at end of file diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js index e714cf9..b976f2d 100644 --- a/jquery.matchHeight.js +++ b/jquery.matchHeight.js @@ -232,6 +232,7 @@ // iterate the row and find the max height $row.each(function(){ var $that = $(this), + style = $that.attr('style'), display = $that.css('display'); // temporarily force a usable display value @@ -249,8 +250,12 @@ targetHeight = $that.outerHeight(false); } - // revert display block - $that.css('display', ''); + // revert styles + if (style) { + $that.attr('style', style); + } else { + $that.css('display', ''); + } }); } else { // if target set, use the height of the target element diff --git a/test/page/test.html b/test/page/test.html index 151a2e9..29c936d 100644 --- a/test/page/test.html +++ b/test/page/test.html @@ -394,6 +394,26 @@

min-height

Aenean semper.

+ +
+
+

min-height

+

Phasellus ut nibh fermentum, vulputate urna vel, semper diam.

+

Aenean semper felis ipsum, vulputate consequat dui elementum vel.

+
+
+

min-height

+

Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.

+
+
+

min-height

+

Aenean semper felis ipsum, vulputate consequat dui elementum vel. Nullam odio eros, sagittis vitae lectus id, pretium viverra lectus. Etiam auctor dolor non dui ultricies pulvinar.

+
+
+

min-height

+

Aenean semper.

+
+
diff --git a/test/specs/matchHeight.spec.js b/test/specs/matchHeight.spec.js index 4f34d00..0d0e4cb 100644 --- a/test/specs/matchHeight.spec.js +++ b/test/specs/matchHeight.spec.js @@ -107,7 +107,7 @@ describe('matchHeight', function() { expect(1.0001).not.toBeWithinTolerance(0); $('.simple-items, .image-items, .nested-items-parent, .nested-items,' + - '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float') + '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float, .inline-style-items') .each(function() { var $items = $(this).children('.item'), rows = $.fn.matchHeight._rows($items); @@ -148,7 +148,7 @@ describe('matchHeight', function() { $.fn.matchHeight._update(); $('.simple-items, .image-items,' + - '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float') + '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float, .inline-style-items') .each(function() { var $items = $(this).children('.item'), targetHeight = $items.first().outerHeight(), @@ -392,6 +392,21 @@ describe('matchHeight', function() { done(); }); + + it('maintains inline styles', function(done) { + var $items = $('.inline-style-items'), + item0Value = $items.find('.item-0')[0].style.display, + item1Value = $items.find('.item-1')[0].style.position, + item2Value = $items.find('.item-2')[0].style.minHeight, + item3Value = $items.find('.item-3')[0].style.padding; + + expect(item0Value).toBe('inline-block'); + expect(item1Value).toBe('relative'); + expect(item2Value).toBe('10px'); + expect(item3Value).toBe('15px'); + + done(); + }); });