You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
/**
|
|
* Even Heights plugin
|
|
* Author: Glen Cheney
|
|
* Modified: 2016-03-08
|
|
* Sets a collection to all be the same height.
|
|
*
|
|
* Usage:
|
|
*
|
|
* evenHeights([
|
|
* document.querySelectorAll('.foo'),
|
|
* ]);
|
|
*
|
|
*/
|
|
window.evenHeights = (function () {
|
|
'use strict';
|
|
|
|
function getTallest(elements) {
|
|
var tallest = 0;
|
|
|
|
for (var i = elements.length - 1; i >= 0; i--) {
|
|
if (elements[i].offsetHeight > tallest) {
|
|
tallest = elements[i].offsetHeight;
|
|
}
|
|
}
|
|
|
|
return tallest;
|
|
}
|
|
|
|
function setAllHeights(elements, height) {
|
|
for (var i = elements.length - 1; i >= 0; i--) {
|
|
elements[i].style.height = height;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* For groups of elements which should be the same height. Using this method
|
|
* will create far less style recalculations and layouts.
|
|
* @param {ArrayLike.<ArrayLike.<Element>>} groups An array-like collection of
|
|
* an array-like collection of elements.
|
|
* @return {Array.<number>} An array containing the pixel value of the
|
|
* tallest element for each group.
|
|
*/
|
|
function evenHeights(groups) {
|
|
groups = Array.prototype.slice.call(groups);
|
|
|
|
// First, reset the height for every element.
|
|
// This is done first, otherwise we dirty the DOM on each loop!
|
|
groups.forEach(function (elements) {
|
|
setAllHeights(elements, '');
|
|
});
|
|
|
|
// Now, measure heights in each group and save the tallest value. Instead of
|
|
// setting the height value for the entire group, save it. If it were set,
|
|
// the next iteration in the loop would have to recalculate styles in the DOM
|
|
var tallests = groups.map(function (elements) {
|
|
return getTallest(elements);
|
|
});
|
|
|
|
// Lastly, set them all.
|
|
groups.forEach(function (elements, i) {
|
|
setAllHeights(elements, tallests[i] + 'px');
|
|
});
|
|
|
|
return tallests;
|
|
}
|
|
|
|
return evenHeights;
|
|
})();
|
|
|