From: Colin Marshall Date: Thu, 4 Feb 2016 04:20:18 +0000 (-0700) Subject: Convert equalizer to ES6 class X-Git-Tag: v6.2.0-rc.1~41^2~9 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=375e9ddf33b3a5d5b7c34ccbac4bbef7000d5d3f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Convert equalizer to ES6 class --- diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js index 115592740..5f36adbef 100644 --- a/js/foundation.equalizer.js +++ b/js/foundation.equalizer.js @@ -1,6 +1,6 @@ -!function(Foundation, $) { - 'use strict'; +'use strict'; +export default class Equalizer { /** * Creates a new instance of Equalizer. * @class @@ -8,7 +8,7 @@ * @param {Object} element - jQuery object to add the trigger to. * @param {Object} options - Overrides to the default plugin settings. */ - function Equalizer(element, options){ + constructor(element, options){ this.$element = element; this.options = $.extend({}, Equalizer.defaults, this.$element.data(), options); @@ -17,35 +17,11 @@ Foundation.registerPlugin(this, 'Equalizer'); } - /** - * Default settings for plugin - */ - Equalizer.defaults = { - /** - * Enable height equalization when stacked on smaller screens. - * @option - * @example true - */ - equalizeOnStack: true, - /** - * Enable height equalization row by row. - * @option - * @example false - */ - equalizeByRow: false, - /** - * String representing the minimum breakpoint size the plugin should equalize heights on. - * @option - * @example 'medium' - */ - equalizeOn: '' - }; - /** * Initializes the Equalizer plugin and calls functions to get equalizer functioning on load. * @private */ - Equalizer.prototype._init = function(){ + _init() { var eqId = this.$element.attr('data-equalizer') || ''; var $watched = this.$element.find(`[data-equalizer-watch="${eqId}"]`); @@ -71,21 +47,22 @@ this._reflow(); } } + } - }; /** * Removes event listeners if the breakpoint is too small. * @private */ - Equalizer.prototype._pauseEvents = function(){ + _pauseEvents() { this.isOn = false; this.$element.off('.zf.equalizer resizeme.zf.trigger'); - }; + } + /** * Initializes events for Equalizer. * @private */ - Equalizer.prototype._events = function(){ + _events() { var _this = this; this._pauseEvents(); if(this.hasNested){ @@ -96,12 +73,13 @@ this.$element.on('resizeme.zf.trigger', this._reflow.bind(this)); } this.isOn = true; - }; + } + /** * Checks the current breakpoint to the minimum required size. * @private */ - Equalizer.prototype._checkMQ = function(){ + _checkMQ() { var tooSmall = !Foundation.MediaQuery.atLeast(this.options.equalizeOn); if(tooSmall){ if(this.isOn){ @@ -114,19 +92,21 @@ } } return tooSmall; - }; + } + /** * A noop version for the plugin * @private */ - Equalizer.prototype._killswitch = function(){ + _killswitch() { return; - }; + } + /** * Calls necessary functions to update Equalizer upon DOM change * @private */ - Equalizer.prototype._reflow = function(){ + _reflow() { if(!this.options.equalizeOnStack){ if(this._isStacked()){ this.$watched.css('height', 'auto'); @@ -138,33 +118,36 @@ }else{ this.getHeights(this.applyHeight.bind(this)); } - }; + } + /** * Manually determines if the first 2 elements are *NOT* stacked. * @private */ - Equalizer.prototype._isStacked = function(){ + _isStacked() { return this.$watched[0].offsetTop !== this.$watched[1].offsetTop; - }; + } + /** * Finds the outer heights of children contained within an Equalizer parent and returns them in an array * @param {Function} cb - A non-optional callback to return the heights array to. * @returns {Array} heights - An array of heights of children within Equalizer container */ - Equalizer.prototype.getHeights = function(cb){ + getHeights(cb) { var heights = []; for(var i = 0, len = this.$watched.length; i < len; i++){ this.$watched[i].style.height = 'auto'; heights.push(this.$watched[i].offsetHeight); } cb(heights); - }; + } + /** * Finds the outer heights of children contained within an Equalizer parent and returns them in an array * @param {Function} cb - A non-optional callback to return the heights array to. * @returns {Array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child */ - Equalizer.prototype.getHeightsByRow = function(cb) { + getHeightsByRow(cb) { var lastElTopOffset = this.$watched.first().offset().top, groups = [], group = 0; @@ -188,14 +171,15 @@ groups[j].push(max); } cb(groups); - }; + } + /** * Changes the CSS height property of each child in an Equalizer parent to match the tallest * @param {array} heights - An array of heights of children within Equalizer container * @fires Equalizer#preequalized * @fires Equalizer#postequalized */ - Equalizer.prototype.applyHeight = function(heights){ + applyHeight(heights) { var max = Math.max.apply(null, heights); /** * Fires before the heights are applied @@ -210,7 +194,8 @@ * @event Equalizer#postequalized */ this.$element.trigger('postequalized.zf.equalizer'); - }; + } + /** * Changes the CSS height property of each child in an Equalizer parent to match the tallest by row * @param {array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child @@ -219,7 +204,7 @@ * @fires Equalizer#postequalizedRow * @fires Equalizer#postequalized */ - Equalizer.prototype.applyHeightByRow = function(groups){ + applyHeightByRow(groups) { /** * Fires before the heights are applied */ @@ -249,26 +234,55 @@ * Fires when the heights have been applied */ this.$element.trigger('postequalized.zf.equalizer'); - }; + } + /** * Destroys an instance of Equalizer. * @function */ - Equalizer.prototype.destroy = function(){ + destroy() { this._pauseEvents(); this.$watched.css('height', 'auto'); Foundation.unregisterPlugin(this); - }; + } +} + +/** + * Default settings for plugin + */ +Equalizer.defaults = { + /** + * Enable height equalization when stacked on smaller screens. + * @option + * @example true + */ + equalizeOnStack: true, + /** + * Enable height equalization row by row. + * @option + * @example false + */ + equalizeByRow: false, + /** + * String representing the minimum breakpoint size the plugin should equalize heights on. + * @option + * @example 'medium' + */ + equalizeOn: '' +}; + +// Window exports +if (window.Foundation) { + window.Foundation.plugin(Equalizer, 'Equalizer'); +} - Foundation.plugin(Equalizer, 'Equalizer'); +// Exports for AMD/Browserify +if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') + module.exports = Equalizer; +if (typeof define === 'function') + define(['foundation'], function() { + return Equalizer; + }); - // Exports for AMD/Browserify - if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') - module.exports = Equalizer; - if (typeof define === 'function') - define(['foundation'], function() { - return Equalizer; - }); -}(Foundation, jQuery);