summaryrefslogtreecommitdiff
path: root/js/core/tab.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/core/tab.js')
-rwxr-xr-xjs/core/tab.js167
1 files changed, 167 insertions, 0 deletions
diff --git a/js/core/tab.js b/js/core/tab.js
new file mode 100755
index 0000000..4784a6f
--- /dev/null
+++ b/js/core/tab.js
@@ -0,0 +1,167 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(UI) {
3
4 "use strict";
5
6 UI.component('tab', {
7
8 defaults: {
9 'target' : '>li:not(.uk-tab-responsive, .uk-disabled)',
10 'connect' : false,
11 'active' : 0,
12 'animation' : false,
13 'duration' : 200,
14 'swiping' : true
15 },
16
17 boot: function() {
18
19 // init code
20 UI.ready(function(context) {
21
22 UI.$("[data-uk-tab]", context).each(function() {
23
24 var tab = UI.$(this);
25
26 if (!tab.data("tab")) {
27 var obj = UI.tab(tab, UI.Utils.options(tab.attr("data-uk-tab")));
28 }
29 });
30 });
31 },
32
33 init: function() {
34
35 var $this = this;
36
37 this.current = false;
38
39 this.on("click.uk.tab", this.options.target, function(e) {
40
41 e.preventDefault();
42
43 if ($this.switcher && $this.switcher.animating) {
44 return;
45 }
46
47 var current = $this.find($this.options.target).not(this);
48
49 current.removeClass("uk-active").blur();
50
51 $this.trigger("change.uk.tab", [UI.$(this).addClass("uk-active"), $this.current]);
52
53 $this.current = UI.$(this);
54
55 // Update ARIA
56 if (!$this.options.connect) {
57 current.attr('aria-expanded', 'false');
58 UI.$(this).attr('aria-expanded', 'true');
59 }
60 });
61
62 if (this.options.connect) {
63 this.connect = UI.$(this.options.connect);
64 }
65
66 // init responsive tab
67 this.responsivetab = UI.$('<li class="uk-tab-responsive uk-active"><a></a></li>').append('<div class="uk-dropdown uk-dropdown-small"><ul class="uk-nav uk-nav-dropdown"></ul><div>');
68
69 this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown');
70 this.responsivetab.lst = this.responsivetab.dropdown.find('ul');
71 this.responsivetab.caption = this.responsivetab.find('a:first');
72
73 if (this.element.hasClass("uk-tab-bottom")) this.responsivetab.dropdown.addClass("uk-dropdown-up");
74
75 // handle click
76 this.responsivetab.lst.on('click.uk.tab', 'a', function(e) {
77
78 e.preventDefault();
79 e.stopPropagation();
80
81 var link = UI.$(this);
82
83 $this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click');
84 });
85
86 this.on('show.uk.switcher change.uk.tab', function(e, tab) {
87 $this.responsivetab.caption.html(tab.text());
88 });
89
90 this.element.append(this.responsivetab);
91
92 // init UIkit components
93 if (this.options.connect) {
94 this.switcher = UI.switcher(this.element, {
95 'toggle' : '>li:not(.uk-tab-responsive)',
96 'connect' : this.options.connect,
97 'active' : this.options.active,
98 'animation' : this.options.animation,
99 'duration' : this.options.duration,
100 'swiping' : this.options.swiping
101 });
102 }
103
104 UI.dropdown(this.responsivetab, {"mode": "click", "preventflip": "y"});
105
106 // init
107 $this.trigger("change.uk.tab", [this.element.find(this.options.target).not('.uk-tab-responsive').filter('.uk-active')]);
108
109 this.check();
110
111 UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
112 if ($this.element.is(":visible")) $this.check();
113 }, 100));
114
115 this.on('display.uk.check', function(){
116 if ($this.element.is(":visible")) $this.check();
117 });
118 },
119
120 check: function() {
121
122 var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden');
123
124 if (!children.length) {
125 this.responsivetab.addClass('uk-hidden');
126 return;
127 }
128
129 var top = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)),
130 doresponsive = false,
131 item, link, clone;
132
133 this.responsivetab.lst.empty();
134
135 children.each(function(){
136
137 if (UI.$(this).offset().top > top) {
138 doresponsive = true;
139 }
140 });
141
142 if (doresponsive) {
143
144 for (var i = 0; i < children.length; i++) {
145
146 item = UI.$(children.eq(i));
147 link = item.find('a');
148
149 if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {
150
151 if (!item.hasClass('uk-disabled')) {
152
153 clone = item[0].outerHTML.replace('<a ', '<a data-index="'+i+'" ');
154
155 this.responsivetab.lst.append(clone);
156 }
157
158 item.addClass('uk-hidden');
159 }
160 }
161 }
162
163 this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
164 }
165 });
166
167})(UIkit);