Skip to content

Instantly share code, notes, and snippets.

@charliemitchell
Last active August 29, 2015 14:14
Show Gist options
  • Save charliemitchell/abf81c9bf1c6ad0c6e89 to your computer and use it in GitHub Desktop.
Save charliemitchell/abf81c9bf1c6ad0c6e89 to your computer and use it in GitHub Desktop.
Update To Foundation's Equalizer Class. (is stacked check fix, made faster)
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.equalizer = {
name : 'equalizer',
version : '5.3.3',
settings : {
use_tallest: true,
before_height_change: $.noop,
after_height_change: $.noop,
equalize_on_stack: false,
},
init : function (scope, method, options) {
Foundation.inherit(this, 'image_loaded');
this.bindings(method, options);
this.reflow();
},
events : function () {
this.S(window).off('.equalizer').on('resize.fndtn.equalizer', function(e){
this.reflow();
}.bind(this));
},
equalize: function(equalizer) {
var isStacked = false,
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible'),
settings = equalizer.data(this.attr_name(true)+'-init'),
i=0,
len;
if (vals.length === 0) return;
// Modification A
// Original firstTopOffset
// var firstTopOffset = vals.first().offset().top;
// Added By Charlie,
var firstTopOffset = vals[0].getBoundingClientRect().top;
// End Modification A
settings.before_height_change();
equalizer.trigger('before-height-change').trigger('before-height-change.fndth.equalizer');
vals.height('inherit');
// Original isStacked Check, Revert By Replacing Modification B, with this
// vals.each(function(){
// var el = $(this);
// if (el.offset().top !== firstTopOffset) {
// isStacked = true;
// }
// });
// Added By Charlie, The Foundation isStacked check needs to be refactored. Only need to check the first two to determine if they are stacked, more accurate and performant too.
// Modification B
if (vals[1]) {
if (vals[1].getBoundingClientRect().top !== firstTopOffset) {
isStacked = true;
}
}
// End Modification B
if (settings.equalize_on_stack === false) {
if (isStacked) return;
};
var heights = vals.map(function(){ return $(this).outerHeight(false) }).get();
if (settings.use_tallest) {
var max = Math.max.apply(null, heights);
vals.css('height', max);
} else {
var min = Math.min.apply(null, heights);
vals.css('height', min);
}
settings.after_height_change();
equalizer.trigger('after-height-change').trigger('after-height-change.fndtn.equalizer');
},
reflow : function () {
var self = this;
/* Maybe To Do, Using each right here is slow,
speed this up with a real for loop, they don't need a closure, so why put pay the performance cost?
Please note the scoping going on here if you refactor this before i get to it.
*/
this.S('[' + this.attr_name() + ']', this.scope).each(function () {
var $eq_target = $(this);
self.image_loaded(self.S('img', this), function () {
self.equalize($eq_target)
});
});
}
};
})(jQuery, window, window.document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment