Skip to content
Permalink
Browse files

equalheight: Fix issues with multiple equalheight groups. By @duprasf

  • Loading branch information...
Andre D
Andre D committed Nov 25, 2015
1 parent 764c4b6 commit 555de0d0d72ccc3ed9674c71c62f4b7eb5e1551d
Showing with 42 additions and 44 deletions.
  1. +38 −32 src/plugins/equalheight/equalheight.js
  2. +4 −12 src/plugins/equalheight/test.js
@@ -56,7 +56,7 @@ var componentName = "wb-eqht",
* @method onResize
*/
onResize = function() {
var $elm, $children, $anchor, currentChild, childCSS, minHeight, i, j,
var $elm, $children, $anchor, currentChild, childCSS, i, j,
$elms = $( selector ),
row = [],
rowTop = -1,
@@ -68,6 +68,9 @@ var componentName = "wb-eqht",
$elm = $elms.eq( i );
$children = $elm.children();

// Reinitialize the row at the beginning of each section of equal height
row = [];

$anchor = detachElement( $elm );
for ( j = $children.length - 1; j !== -1; j -= 1 ) {
currentChild = $children[ j ];
@@ -97,40 +100,60 @@ var componentName = "wb-eqht",
}
$elm = reattachElement( $anchor );

for ( j = $children.length - 1; j !== -1; j -= 1 ) {
// set the top and tallest to the first element
rowTop = $children[ 0 ].offsetTop;
tallestHeight = $children[ 0 ].offsetHeight;

// first, the loop MUST be from start to end to work.
for ( j = 0; j < $children.length; j++ ) {
currentChild = $children[ j ];

currentChildTop = currentChild.offsetTop;
currentChildHeight = currentChild.offsetHeight;

if ( currentChildTop !== rowTop ) {
recordRowHeight( row, tallestHeight );

// as soon as we find an element not on this row (not the same offsetTop)
// we need to equalize each items in that row to align the next row.
equalize( row, tallestHeight );

// since the elements of the previous row was equalized
// we need to get the new offsetTop of the current element
currentChildTop = currentChild.offsetTop;

// reset the row, rowTop and tallestHeight
row.length = 0;
rowTop = currentChildTop;
tallestHeight = currentChildHeight;
} else {
tallestHeight = ( currentChildHeight > tallestHeight ) ? currentChildHeight : tallestHeight;
}

tallestHeight = Math.max( currentChildHeight, tallestHeight );
row.push( $children.eq( j ) );
}
recordRowHeight( row, tallestHeight );

$anchor = detachElement( $elm );
for ( j = $children.length - 1; j !== -1; j -= 1 ) {
minHeight = $children.eq( j ).data( minHeightCSS );

if ( minHeight ) {
$children[ j ].style.minHeight = minHeight + "px";
}
}
$elm = reattachElement( $anchor );
// equalize the last row
equalize( row, tallestHeight );

// Identify that the height equalization was updated
$document.trigger( "wb-updated" + selector );
}
},

/**
* @method equalize
* @param {array} row the array of items to be equalized
* @param {int} tallestHeight the talest height to use to equalize
*/
equalize = function( row, tallestHeight ) {
for ( var i = 0; i < row.length; i++ ) {

// added a +1 because some floated element got stuck if the
// shortest element was the last element in the row
var minHeight = tallestHeight + 1;
row[ i ][ 0 ].style.minHeight = minHeight + "px";
}
},

/**
* @method detachElement
* @param {jQuery object} $elm The element to detach
@@ -174,23 +197,6 @@ var componentName = "wb-eqht",
}

return $elm;
},

/**
* @method recordRowHeight
* @param {array} row The elements for which to record the height
* @param {integer} height The height to record
*/
recordRowHeight = function( row, height ) {
var i = row.length - 1;

// only set a height if more than one element exists in the row
if ( i ) {
for ( ; i !== -1; i -= 1 ) {
row[ i ].data( minHeightCSS, height );
}
}
row.length = 0;
};

// Bind the init event of the plugin
@@ -26,20 +26,12 @@ describe( "equalheights test suite", function() {

// Re-initialize the variables every 2 elements. This works because the test
// data only ever has 2 elements on a given baseline.
isInit = idx % 2 === 0,

// Is this a case where only one element exists on a baseline?
isSingleElm = isInit && $elm.is( ":last-child" );
isInit = idx % 2 === 0;

height = isInit ? $elm.height() : height;
minHeight = isInit ? parseInt( $elm.css( "min-height" ), 10 ) : minHeight;

// When only a single element on a baseline, its min-height should be set to 0
if ( isSingleElm ) {
expect( minHeight ).to.equal( 0 );
} else {
expect( minHeight ).to.be.greaterThan( 0 );
}
expect( minHeight ).to.be.greaterThan( 0 );
expect( parseInt( $elm.css( "min-height" ), 10 ) ).to.equal( minHeight );
expect( $elm.height() ).to.equal( height );
},
@@ -275,8 +267,8 @@ describe( "equalheights test suite", function() {

before( function( done ) {
test = function( done ) {
expect( $first.height() ).to.be( 75 );
expect( $second.height() ).to.be( 175 );
expect( $first.height() ).to.be.within( 75, 76 );
expect( $second.height() ).to.be.within( 175, 176 );

done();
callback = undef;

0 comments on commit 555de0d

Please sign in to comment.
You can’t perform that action at this time.