https://marengocave.com/themes/foundation6-example/foundation-sites/js/foundation.responsiveToggle.js

1'use strict';
2
3!function($) {
4
5/**
6 * ResponsiveToggle module.
7 * @module foundation.responsiveToggle
8 * @requires foundation.util.mediaQuery
9 */
10
11class ResponsiveToggle {
12  /**
13   * Creates a new instance of Tab Bar.
14   * @class
15   * @fires ResponsiveToggle#init
16   * @param {jQuery} element - jQuery object to attach tab bar functionality to.
17   * @param {Object} options - Overrides to the default plugin settings.
18   */
19  constructor(element, options) {
20    this.$element = $(element);
21    this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
22
23    this._init();
24    this._events();
25
26    Foundation.registerPlugin(this, 'ResponsiveToggle');
27  }
28
29  /**
30   * Initializes the tab bar by finding the target element, toggling element, and running update().
31   * @function
32   * @private
33   */
34  _init() {
35    var targetID = this.$element.data('responsive-toggle');
36    if (!targetID) {
37      console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
38    }
39
40    this.$targetMenu = $(`#${targetID}`);
41    this.$toggler = this.$element.find('[data-toggle]').filter(function() {
42      var target = $(this).data('toggle');
43      return (target === targetID || target === "");
44    });
45    this.options = $.extend({}, this.options, this.$targetMenu.data());
46
47    // If they were set, parse the animation classes
48    if(this.options.animate) {
49      let input = this.options.animate.split(' ');
50
51      this.animationIn = input[0];
52      this.animationOut = input[1] || null;
53    }
54
55    this._update();
56  }
57
58  /**
59   * Adds necessary event handlers for the tab bar to work.
60   * @function
61   * @private
62   */
63  _events() {
64    var _this = this;
65
66    this._updateMqHandler = this._update.bind(this);
67
68    $(window).on('changed.zf.mediaquery', this._updateMqHandler);
69
70    this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
71  }
72
73  /**
74   * Checks the current media query to determine if the tab bar should be visible or hidden.
75   * @function
76   * @private
77   */
78  _update() {
79    // Mobile
80    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
81      this.$element.show();
82      this.$targetMenu.hide();
83    }
84
85    // Desktop
86    else {
87      this.$element.hide();
88      this.$targetMenu.show();
89    }
90  }
91
92  /**
93   * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
94   * @function
95   * @fires ResponsiveToggle#toggled
96   */
97  toggleMenu() {
98    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
99      /**
100       * Fires when the element attached to the tab bar toggles.
101       * @event ResponsiveToggle#toggled
102       */
103      if(this.options.animate) {
104        if (this.$targetMenu.is(':hidden')) {
105          Foundation.Motion.animateIn(this.$targetMenu, this.animationIn, () => {
106            this.$element.trigger('toggled.zf.responsiveToggle');
107            this.$targetMenu.find('[data-mutate]').triggerHandler('mutateme.zf.trigger');
108          });
109        }
110        else {
111          Foundation.Motion.animateOut(this.$targetMenu, this.animationOut, () => {
112            this.$element.trigger('toggled.zf.responsiveToggle');
113          });
114        }
115      }
116      else {
117        this.$targetMenu.toggle(0);
118        this.$targetMenu.find('[data-mutate]').trigger('mutateme.zf.trigger');
119        this.$element.trigger('toggled.zf.responsiveToggle');
120      }
121    }
122  };
123
124  destroy() {
125    this.$element.off('.zf.responsiveToggle');
126    this.$toggler.off('.zf.responsiveToggle');
127
128    $(window).off('changed.zf.mediaquery', this._updateMqHandler);
129
130    Foundation.unregisterPlugin(this);
131  }
132}
133
134ResponsiveToggle.defaults = {
135  /**
136   * The breakpoint after which the menu is always shown, and the tab bar is hidden.
137   * @option
138   * @type {string}
139   * @default 'medium'
140   */
141  hideFor: 'medium',
142
143  /**
144   * To decide if the toggle should be animated or not.
145   * @option
146   * @type {boolean}
147   * @default false
148   */
149  animate: false
150};
151
152// Window exports
153Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
154
155}(jQuery);