https://wadezine.com/assets/javascripts/foundation.equalizer.js

1!function(Foundation, $) {
2  'use strict';
3
4  /**
5   * Creates a new instance of Equalizer.
6   * @class
7   * @fires Equalizer#init
8   * @param {Object} element - jQuery object to add the trigger to.
9   * @param {Object} options - Overrides to the default plugin settings.
10   */
11  function Equalizer(element, options) {
12    this.$element = element;
13    this.options  = $.extend({}, Equalizer.defaults, this.$element.data(), options);
14    this.$window  = $(window);
15    this.name     = 'equalizer';
16    this.attr     = 'data-equalizer';
17
18    this._init();
19    this._events();
20
21    Foundation.registerPlugin(this);
22  }
23
24  /**
25   * Default settings for plugin
26   */
27  Equalizer.defaults = {
28    /**
29     * Enable height equalization when stacked on smaller screens.
30     * @option
31     * @example true
32     */
33    equalizeOnStack: true,
34    /**
35     * Amount of time, in ms, to debounce the size checking/equalization. Lower times mean smoother transitions/less performance on mobile.
36     * @option
37     * @example 50
38     */
39    throttleInterval: 50
40  };
41
42  /**
43   * Initializes the Equalizer plugin and calls functions to get equalizer functioning on load.
44   * @private
45   */
46  Equalizer.prototype._init = function() {
47    this._reflow();
48  };
49
50  /**
51   * Initializes events for Equalizer.
52   * @private
53   */
54  Equalizer.prototype._events = function() {
55    var self = this;
56
57    this.$window
58      .off('.equalizer')
59      .on('resize.fndtn.equalizer', Foundation.util.throttle(function () {
60        self._reflow();
61      }, self.options.throttleInterval));
62  };
63
64  /**
65   * A noop version for the plugin
66   * @private
67   */
68  Equalizer.prototype._killswitch = function() {
69    return;
70  };
71  /**
72   * Calls necessary functions to update Equalizer upon DOM change
73   * @private
74   */
75  Equalizer.prototype._reflow = function() {
76    var self = this;
77
78    $('[' + this.attr + ']').each(function() {
79      var $eqParent       = $(this),
80          adjustedHeights = [],
81          $images = $eqParent.find('img');
82
83      if ($images.length) {
84        Foundation.onImagesLoaded($images, function() {
85          adjustedHeights = self.getHeights($eqParent);
86          self.applyHeight($eqParent, adjustedHeights);
87        });
88      }
89      else {
90        adjustedHeights = self.getHeights($eqParent);
91        self.applyHeight($eqParent, adjustedHeights);
92      }
93    });
94  };
95  /**
96   * Finds the outer heights of children contained within an Equalizer parent and returns them in an array
97   * @param {Object} $eqParent A jQuery instance of an Equalizer container
98   * @returns {Array} heights An array of heights of children within Equalizer container
99   */
100  Equalizer.prototype.getHeights = function($eqParent) {
101    var eqGroupName = $eqParent.data('equalizer'),
102        eqGroup     = eqGroupName ? $eqParent.find('[' + this.attr + '-watch="' + eqGroupName + '"]:visible') : $eqParent.find('[' + this.attr + '-watch]:visible'),
103        heights;
104
105    eqGroup.height('inherit');
106    heights = eqGroup.map(function () { return $(this).outerHeight(false);}).get();
107    console.log(heights);
108    return heights;
109  };
110  /**
111   * Changes the CSS height property of each child in an Equalizer parent to match the tallest
112   * @param {Object} $eqParent - A jQuery instance of an Equalizer container
113   * @param {array} heights - An array of heights of children within Equalizer container
114   * @fires Equalizer#preEqualized
115   * @fires Equalizer#postEqualized
116   */
117  Equalizer.prototype.applyHeight = function($eqParent, heights) {
118    var eqGroupName = $eqParent.data('equalizer'),
119        eqGroup     = eqGroupName ? $eqParent.find('['+this.attr+'-watch="'+eqGroupName+'"]:visible') : $eqParent.find('['+this.attr+'-watch]:visible'),
120        max         = Math.max.apply(null, heights);
121
122    /**
123     * Fires before the heights are applied
124     * @event Equalizer#preEqualized
125     */
126    $eqParent.trigger('preEqualized.zf.Equalizer');
127
128    // for now, apply the max height found in the array
129    for (var i = 0; i < eqGroup.length; i++) {
130      $(eqGroup[i]).css('height', max);
131    }
132    // console.log(max);
133    /**
134     * Fires when the heights have been applied
135     * @event Equalizer#postEqualized
136     */
137    $eqParent.trigger('postEqualized.zf.Equalizer');
138  };
139  /**
140   * Destroys an instance of Equalizer.
141   * @function
142   */
143  Equalizer.prototype.destroy = function(){
144    //TODO this.
145  };
146
147  Foundation.plugin(Equalizer);
148
149  // Exports for AMD/Browserify
150  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
151    module.exports = Equalizer;
152  if (typeof define === 'function')
153    define(['foundation'], function() {
154      return Equalizer;
155    });
156
157}(Foundation, jQuery);