https://donors.vitalant.org/dwp/common/js/foundation.responsiveToggle-345b0fb863fe115b979a3439ea15e45a.js

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