summaryrefslogtreecommitdiff
path: root/js/components/accordion.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/accordion.js')
-rwxr-xr-xjs/components/accordion.js174
1 files changed, 174 insertions, 0 deletions
diff --git a/js/components/accordion.js b/js/components/accordion.js
new file mode 100755
index 0000000..2401780
--- /dev/null
+++ b/js/components/accordion.js
@@ -0,0 +1,174 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3 var component;
4
5 if (window.UIkit) {
6 component = addon(UIkit);
7 }
8
9 if (typeof define == "function" && define.amd) {
10 define("uikit-accordion", ["uikit"], function(){
11 return component || addon(UIkit);
12 });
13 }
14})(function(UI){
15
16 "use strict";
17
18 UI.component('accordion', {
19
20 defaults: {
21 showfirst : true,
22 collapse : true,
23 animate : true,
24 easing : 'swing',
25 duration : 300,
26 toggle : '.uk-accordion-title',
27 containers : '.uk-accordion-content',
28 clsactive : 'uk-active'
29 },
30
31 boot: function() {
32
33 // init code
34 UI.ready(function(context) {
35
36 setTimeout(function(){
37
38 UI.$("[data-uk-accordion]", context).each(function(){
39
40 var ele = UI.$(this);
41
42 if(!ele.data("accordion")) {
43 UI.accordion(ele, UI.Utils.options(ele.attr('data-uk-accordion')));
44 }
45 });
46
47 }, 0);
48 });
49 },
50
51 init: function() {
52
53 var $this = this;
54
55 this.element.on('click.uk.accordion', this.options.toggle, function(e) {
56
57 e.preventDefault();
58
59 $this.toggleItem(UI.$(this).data('wrapper'), $this.options.animate, $this.options.collapse);
60 });
61
62 this.update();
63
64 if (this.options.showfirst) {
65 this.toggleItem(this.toggle.eq(0).data('wrapper'), false, false);
66 }
67 },
68
69 toggleItem: function(wrapper, animated, collapse) {
70
71 var $this = this;
72
73 wrapper.data('toggle').toggleClass(this.options.clsactive);
74 wrapper.data('content').toggleClass(this.options.clsactive);
75
76 var active = wrapper.data('toggle').hasClass(this.options.clsactive);
77
78 if (collapse) {
79 this.toggle.not(wrapper.data('toggle')).removeClass(this.options.clsactive);
80 this.content.not(wrapper.data('content')).removeClass(this.options.clsactive)
81 .parent().stop().css('overflow', 'hidden').animate({ height: 0 }, {easing: this.options.easing, duration: animated ? this.options.duration : 0}).attr('aria-expanded', 'false');
82 }
83
84 wrapper.stop().css('overflow', 'hidden');
85
86 if (animated) {
87
88 wrapper.animate({ height: active ? getHeight(wrapper.data('content')) : 0 }, {easing: this.options.easing, duration: this.options.duration, complete: function() {
89
90 if (active) {
91 wrapper.css({'overflow': '', 'height': 'auto'});
92 UI.Utils.checkDisplay(wrapper.data('content'));
93 }
94
95 $this.trigger('display.uk.check');
96 }});
97
98 } else {
99
100 wrapper.height(active ? 'auto' : 0);
101
102 if (active) {
103 wrapper.css({'overflow': ''});
104 UI.Utils.checkDisplay(wrapper.data('content'));
105 }
106
107 this.trigger('display.uk.check');
108 }
109
110 // Update ARIA
111 wrapper.attr('aria-expanded', active);
112
113 this.element.trigger('toggle.uk.accordion', [active, wrapper.data('toggle'), wrapper.data('content')]);
114 },
115
116 update: function() {
117
118 var $this = this, $content, $wrapper, $toggle;
119
120 this.toggle = this.find(this.options.toggle);
121 this.content = this.find(this.options.containers);
122
123 this.content.each(function(index) {
124
125 $content = UI.$(this);
126
127 if ($content.parent().data('wrapper')) {
128 $wrapper = $content.parent();
129 } else {
130 $wrapper = UI.$(this).wrap('<div data-wrapper="true" style="overflow:hidden;height:0;position:relative;"></div>').parent();
131
132 // Init ARIA
133 $wrapper.attr('aria-expanded', 'false');
134 }
135
136 $toggle = $this.toggle.eq(index);
137
138 $wrapper.data('toggle', $toggle);
139 $wrapper.data('content', $content);
140 $toggle.data('wrapper', $wrapper);
141 $content.data('wrapper', $wrapper);
142 });
143
144 this.element.trigger('update.uk.accordion', [this]);
145 }
146
147 });
148
149 // helper
150
151 function getHeight(ele) {
152
153 var $ele = UI.$(ele), height = "auto";
154
155 if ($ele.is(":visible")) {
156 height = $ele.outerHeight();
157 } else {
158
159 var tmp = {
160 position : $ele.css("position"),
161 visibility : $ele.css("visibility"),
162 display : $ele.css("display")
163 };
164
165 height = $ele.css({position: 'absolute', visibility: 'hidden', display: 'block'}).outerHeight();
166
167 $ele.css(tmp); // reset element
168 }
169
170 return height;
171 }
172
173 return UI.accordion;
174});