|
1
|
/*! UIkit 2.27.5 | 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
|
|
|
95
|
this.switcher = UI.switcher(this.element, {
|
|
96
|
toggle : '>li:not(.uk-tab-responsive)',
|
|
97
|
connect : this.options.connect,
|
|
98
|
active : this.options.active,
|
|
99
|
animation : this.options.animation,
|
|
100
|
duration : this.options.duration,
|
|
101
|
swiping : this.options.swiping
|
|
102
|
});
|
|
103
|
}
|
|
104
|
|
|
105
|
UI.dropdown(this.responsivetab, {mode: 'click', preventflip: 'y'});
|
|
106
|
|
|
107
|
// init
|
|
108
|
$this.trigger('change.uk.tab', [this.element.find(this.options.target).not('.uk-tab-responsive').filter('.uk-active')]);
|
|
109
|
|
|
110
|
this.check();
|
|
111
|
|
|
112
|
UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
|
|
113
|
if ($this.element.is(':visible')) $this.check();
|
|
114
|
}, 100));
|
|
115
|
|
|
116
|
this.on('display.uk.check', function(){
|
|
117
|
if ($this.element.is(':visible')) $this.check();
|
|
118
|
});
|
|
119
|
},
|
|
120
|
|
|
121
|
check: function() {
|
|
122
|
|
|
123
|
var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden');
|
|
124
|
|
|
125
|
if (!children.length) {
|
|
126
|
this.responsivetab.addClass('uk-hidden');
|
|
127
|
return;
|
|
128
|
}
|
|
129
|
|
|
130
|
var top = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)),
|
|
131
|
doresponsive = false,
|
|
132
|
item, link, clone;
|
|
133
|
|
|
134
|
this.responsivetab.lst.empty();
|
|
135
|
|
|
136
|
children.each(function(){
|
|
137
|
|
|
138
|
if (UI.$(this).offset().top > top) {
|
|
139
|
doresponsive = true;
|
|
140
|
}
|
|
141
|
});
|
|
142
|
|
|
143
|
if (doresponsive) {
|
|
144
|
|
|
145
|
for (var i = 0; i < children.length; i++) {
|
|
146
|
|
|
147
|
item = UI.$(children.eq(i));
|
|
148
|
link = item.find('a');
|
|
149
|
|
|
150
|
if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {
|
|
151
|
|
|
152
|
if (!item.hasClass('uk-disabled')) {
|
|
153
|
|
|
154
|
clone = UI.$(item[0].outerHTML);
|
|
155
|
clone.find('a').data('index', i);
|
|
156
|
|
|
157
|
this.responsivetab.lst.append(clone);
|
|
158
|
}
|
|
159
|
|
|
160
|
item.addClass('uk-hidden');
|
|
161
|
}
|
|
162
|
}
|
|
163
|
}
|
|
164
|
|
|
165
|
this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
|
|
166
|
}
|
|
167
|
});
|
|
168
|
|
|
169
|
})(UIkit2);
|