diff options
Diffstat (limited to 'js/core/toggle.js')
-rwxr-xr-x | js/core/toggle.js | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/js/core/toggle.js b/js/core/toggle.js new file mode 100755 index 0000000..05fc2b3 --- /dev/null +++ b/js/core/toggle.js | |||
@@ -0,0 +1,120 @@ | |||
1 | /*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ | ||
2 | (function(UI){ | ||
3 | |||
4 | "use strict"; | ||
5 | |||
6 | var toggles = []; | ||
7 | |||
8 | UI.component('toggle', { | ||
9 | |||
10 | defaults: { | ||
11 | target : false, | ||
12 | cls : 'uk-hidden', | ||
13 | animation : false, | ||
14 | duration : 200 | ||
15 | }, | ||
16 | |||
17 | boot: function(){ | ||
18 | |||
19 | // init code | ||
20 | UI.ready(function(context) { | ||
21 | |||
22 | UI.$("[data-uk-toggle]", context).each(function() { | ||
23 | var ele = UI.$(this); | ||
24 | |||
25 | if (!ele.data("toggle")) { | ||
26 | var obj = UI.toggle(ele, UI.Utils.options(ele.attr("data-uk-toggle"))); | ||
27 | } | ||
28 | }); | ||
29 | |||
30 | setTimeout(function(){ | ||
31 | |||
32 | toggles.forEach(function(toggle){ | ||
33 | toggle.getToggles(); | ||
34 | }); | ||
35 | |||
36 | }, 0); | ||
37 | }); | ||
38 | }, | ||
39 | |||
40 | init: function() { | ||
41 | |||
42 | var $this = this; | ||
43 | |||
44 | this.aria = (this.options.cls.indexOf('uk-hidden') !== -1); | ||
45 | |||
46 | this.getToggles(); | ||
47 | |||
48 | this.on("click", function(e) { | ||
49 | if ($this.element.is('a[href="#"]')) e.preventDefault(); | ||
50 | $this.toggle(); | ||
51 | }); | ||
52 | |||
53 | toggles.push(this); | ||
54 | }, | ||
55 | |||
56 | toggle: function() { | ||
57 | |||
58 | if(!this.totoggle.length) return; | ||
59 | |||
60 | if (this.options.animation && UI.support.animation) { | ||
61 | |||
62 | var $this = this, animations = this.options.animation.split(','); | ||
63 | |||
64 | if (animations.length == 1) { | ||
65 | animations[1] = animations[0]; | ||
66 | } | ||
67 | |||
68 | animations[0] = animations[0].trim(); | ||
69 | animations[1] = animations[1].trim(); | ||
70 | |||
71 | this.totoggle.css('animation-duration', this.options.duration+'ms'); | ||
72 | |||
73 | this.totoggle.each(function(){ | ||
74 | |||
75 | var ele = UI.$(this); | ||
76 | |||
77 | if (ele.hasClass($this.options.cls)) { | ||
78 | |||
79 | ele.toggleClass($this.options.cls); | ||
80 | |||
81 | UI.Utils.animate(ele, animations[0]).then(function(){ | ||
82 | ele.css('animation-duration', ''); | ||
83 | UI.Utils.checkDisplay(ele); | ||
84 | }); | ||
85 | |||
86 | } else { | ||
87 | |||
88 | UI.Utils.animate(this, animations[1]+' uk-animation-reverse').then(function(){ | ||
89 | ele.toggleClass($this.options.cls).css('animation-duration', ''); | ||
90 | UI.Utils.checkDisplay(ele); | ||
91 | }); | ||
92 | |||
93 | } | ||
94 | |||
95 | }); | ||
96 | |||
97 | } else { | ||
98 | this.totoggle.toggleClass(this.options.cls); | ||
99 | UI.Utils.checkDisplay(this.totoggle); | ||
100 | } | ||
101 | |||
102 | this.updateAria(); | ||
103 | |||
104 | }, | ||
105 | |||
106 | getToggles: function() { | ||
107 | this.totoggle = this.options.target ? UI.$(this.options.target):[]; | ||
108 | this.updateAria(); | ||
109 | }, | ||
110 | |||
111 | updateAria: function() { | ||
112 | if (this.aria && this.totoggle.length) { | ||
113 | this.totoggle.each(function(){ | ||
114 | UI.$(this).attr('aria-hidden', UI.$(this).hasClass('uk-hidden')); | ||
115 | }); | ||
116 | } | ||
117 | } | ||
118 | }); | ||
119 | |||
120 | })(UIkit); | ||