118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
|
/*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
||
|
|
(function(UI){
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var toggles = [];
|
||
|
|
|
||
|
|
UI.component('toggle', {
|
||
|
|
|
||
|
|
defaults: {
|
||
|
|
target : false,
|
||
|
|
cls : 'uk-hidden',
|
||
|
|
animation : false,
|
||
|
|
duration : 200
|
||
|
|
},
|
||
|
|
|
||
|
|
boot: function(){
|
||
|
|
|
||
|
|
// init code
|
||
|
|
UI.ready(function(context) {
|
||
|
|
|
||
|
|
UI.$("[data-uk-toggle]", context).each(function() {
|
||
|
|
var ele = UI.$(this);
|
||
|
|
|
||
|
|
if (!ele.data("toggle")) {
|
||
|
|
var obj = UI.toggle(ele, UI.Utils.options(ele.attr("data-uk-toggle")));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(function(){
|
||
|
|
|
||
|
|
toggles.forEach(function(toggle){
|
||
|
|
toggle.getToggles();
|
||
|
|
});
|
||
|
|
|
||
|
|
}, 0);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
init: function() {
|
||
|
|
|
||
|
|
var $this = this;
|
||
|
|
|
||
|
|
this.aria = (this.options.cls.indexOf('uk-hidden') !== -1);
|
||
|
|
|
||
|
|
this.getToggles();
|
||
|
|
|
||
|
|
this.on("click", function(e) {
|
||
|
|
if ($this.element.is('a[href="#"]')) e.preventDefault();
|
||
|
|
$this.toggle();
|
||
|
|
});
|
||
|
|
|
||
|
|
toggles.push(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
toggle: function() {
|
||
|
|
|
||
|
|
if(!this.totoggle.length) return;
|
||
|
|
|
||
|
|
if (this.options.animation && UI.support.animation) {
|
||
|
|
|
||
|
|
var $this = this, animations = this.options.animation.split(',');
|
||
|
|
|
||
|
|
if (animations.length == 1) {
|
||
|
|
animations[1] = animations[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
animations[0] = animations[0].trim();
|
||
|
|
animations[1] = animations[1].trim();
|
||
|
|
|
||
|
|
this.totoggle.css('animation-duration', this.options.duration+'ms');
|
||
|
|
|
||
|
|
if (this.totoggle.hasClass(this.options.cls)) {
|
||
|
|
|
||
|
|
this.totoggle.toggleClass(this.options.cls);
|
||
|
|
|
||
|
|
this.totoggle.each(function(){
|
||
|
|
UI.Utils.animate(this, animations[0]).then(function(){
|
||
|
|
UI.$(this).css('animation-duration', '');
|
||
|
|
UI.Utils.checkDisplay(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
this.totoggle.each(function(){
|
||
|
|
UI.Utils.animate(this, animations[1]+' uk-animation-reverse').then(function(){
|
||
|
|
UI.$(this).toggleClass($this.options.cls).css('animation-duration', '');
|
||
|
|
UI.Utils.checkDisplay(this);
|
||
|
|
}.bind(this));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.totoggle.toggleClass(this.options.cls);
|
||
|
|
UI.Utils.checkDisplay(this.totoggle);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.updateAria();
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
getToggles: function() {
|
||
|
|
this.totoggle = this.options.target ? UI.$(this.options.target):[];
|
||
|
|
this.updateAria();
|
||
|
|
},
|
||
|
|
|
||
|
|
updateAria: function() {
|
||
|
|
if (this.aria && this.totoggle.length) {
|
||
|
|
this.totoggle.each(function(){
|
||
|
|
UI.$(this).attr('aria-hidden', UI.$(this).hasClass('uk-hidden'));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})(UIkit);
|