sp-magic.de/bower_components/foundation-sites/dist/plugins/foundation.toggler.js
2016-10-28 19:56:41 +02:00

166 lines
No EOL
5 KiB
JavaScript

'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
!function ($) {
/**
* Toggler module.
* @module foundation.toggler
* @requires foundation.util.motion
* @requires foundation.util.triggers
*/
var Toggler = function () {
/**
* 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) {
_classCallCheck(this, Toggler);
this.$element = element;
this.options = $.extend({}, Toggler.defaults, element.data(), options);
this.className = '';
this._init();
this._events();
Foundation.registerPlugin(this, 'Toggler');
}
/**
* Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
* @function
* @private
*/
_createClass(Toggler, [{
key: '_init',
value: function _init() {
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
*/
}, {
key: '_events',
value: function _events() {
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
*/
}, {
key: 'toggle',
value: function toggle() {
this[this.options.animate ? '_toggleAnimate' : '_toggleClass']();
}
}, {
key: '_toggleClass',
value: function _toggleClass() {
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);
}
}, {
key: '_toggleAnimate',
value: function _toggleAnimate() {
var _this = this;
if (this.$element.is(':hidden')) {
Foundation.Motion.animateIn(this.$element, this.animationIn, function () {
_this._updateARIA(true);
this.trigger('on.zf.toggler');
});
} else {
Foundation.Motion.animateOut(this.$element, this.animationOut, function () {
_this._updateARIA(false);
this.trigger('off.zf.toggler');
});
}
}
}, {
key: '_updateARIA',
value: function _updateARIA(isOn) {
this.$element.attr('aria-expanded', isOn ? true : false);
}
/**
* Destroys the instance of Toggler on the element.
* @function
*/
}, {
key: 'destroy',
value: function destroy() {
this.$element.off('.zf.toggler');
Foundation.unregisterPlugin(this);
}
}]);
return Toggler;
}();
Toggler.defaults = {
/**
* Tells the plugin if the element should animated when toggled.
* @option
* @example false
*/
animate: false
};
// Window exports
Foundation.plugin(Toggler, 'Toggler');
}(jQuery);