/** * Toggler module. * @module foundation.toggler * @requires foundation.util.motion */ !function(Foundation, $) { 'use strict'; /** * Creates a new instance of Toggler. * @class * @fires Toggler#init * @param {Object} element - jQuery object to add the trigger to. * @param {Object} options - Overrides to the default plugin settings. */ function Toggler(element, options) { this.$element = element; this.options = $.extend({}, Toggler.defaults, element.data(), options); this.className = ''; this._init(); this._events(); Foundation.registerPlugin(this, 'Toggler'); } Toggler.defaults = { /** * Tells the plugin if the element should animated when toggled. * @option * @example false */ animate: false }; /** * Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate. * @function * @private */ Toggler.prototype._init = function() { var input; // Parse animation classes if they were set if (this.options.animate) { input = this.options.animate.split(' '); this.animationIn = input[0]; this.animationOut = input[1] || null; } // Otherwise, parse toggle class else { input = this.$element.data('toggler'); // Allow for a . at the beginning of the string this.className = input[0] === '.' ? input.slice(1) : input; } // Add ARIA attributes to triggers var id = this.$element[0].id; $('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]') .attr('aria-controls', id); // If the target is hidden, add aria-hidden this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true); }; /** * Initializes events for the toggle trigger. * @function * @private */ Toggler.prototype._events = function() { this.$element.off('toggle.zf.trigger').on('toggle.zf.trigger', this.toggle.bind(this)); }; /** * Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off". * @function * @fires Toggler#on * @fires Toggler#off */ Toggler.prototype.toggle = function() { this[ this.options.animate ? '_toggleAnimate' : '_toggleClass'](); }; Toggler.prototype._toggleClass = function() { this.$element.toggleClass(this.className); var isOn = this.$element.hasClass(this.className); if (isOn) { /** * Fires if the target element has the class after a toggle. * @event Toggler#on */ this.$element.trigger('on.zf.toggler'); } else { /** * Fires if the target element does not have the class after a toggle. * @event Toggler#off */ this.$element.trigger('off.zf.toggler'); } this._updateARIA(isOn); }; Toggler.prototype._toggleAnimate = function() { var _this = this; if (this.$element.is(':hidden')) { Foundation.Motion.animateIn(this.$element, this.animationIn, function() { this.trigger('on.zf.toggler'); _this._updateARIA(true); }); } else { Foundation.Motion.animateOut(this.$element, this.animationOut, function() { this.trigger('off.zf.toggler'); _this._updateARIA(false); }); } }; Toggler.prototype._updateARIA = function(isOn) { this.$element.attr('aria-expanded', isOn ? true : false); }; /** * Destroys the instance of Toggler on the element. * @function */ Toggler.prototype.destroy= function() { this.$element.off('.zf.toggler'); Foundation.unregisterPlugin(this); }; Foundation.plugin(Toggler, 'Toggler'); // Exports for AMD/Browserify if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') module.exports = Toggler; if (typeof define === 'function') define(['foundation'], function() { return Toggler; }); }(Foundation, jQuery);