Convert equalizer to ES6 class

diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js
index 11559274010ae041300b0a4c2f7a947f1a5c42c1..5f36adbef213156e01af4eced6a6002b04bc50c2 100644 (file)
--- 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);