xooie 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/vendor/assets/javascripts/xooie/addons/base.js +61 -74
- data/vendor/assets/javascripts/xooie/addons/carousel_lentils.js +79 -78
- data/vendor/assets/javascripts/xooie/addons/carousel_pagination.js +140 -137
- data/vendor/assets/javascripts/xooie/addons/dropdown_accordion.js +38 -0
- data/vendor/assets/javascripts/xooie/addons/tab_animation.js +228 -227
- data/vendor/assets/javascripts/xooie/addons/tab_automation.js +150 -0
- data/vendor/assets/javascripts/xooie/base.js +214 -0
- data/vendor/assets/javascripts/xooie/carousel.js +400 -0
- data/vendor/assets/javascripts/xooie/dialog.js +132 -0
- data/vendor/assets/javascripts/xooie/dropdown.js +273 -0
- data/vendor/assets/javascripts/xooie/event_handler.js +14 -16
- data/vendor/assets/javascripts/xooie/helpers.js +45 -35
- data/vendor/assets/javascripts/xooie/shared.js +65 -37
- data/vendor/assets/javascripts/xooie/stylesheet.js +95 -90
- data/vendor/assets/javascripts/xooie/tab.js +125 -0
- data/vendor/assets/javascripts/xooie/widgets/accordion.js +7 -7
- data/vendor/assets/javascripts/xooie/widgets/base.js +73 -97
- data/vendor/assets/javascripts/xooie/widgets/carousel.js +95 -101
- data/vendor/assets/javascripts/xooie/widgets/dialog.js +84 -85
- data/vendor/assets/javascripts/xooie/widgets/dropdown.js +223 -188
- data/vendor/assets/javascripts/xooie/widgets/tab.js +36 -36
- data/vendor/assets/javascripts/xooie/xooie.js +151 -148
- data/vendor/assets/javascripts/xooie.js +169 -0
- metadata +53 -58
@@ -21,263 +21,298 @@
|
|
21
21
|
* As of v1.0 this widget has been deprecated. Use the more semantically appropriate
|
22
22
|
* [[Xooie.Tooltip]], [[Xooie.Menu]], [[Xooie.Tab]], or [[Xooie.Accordion]] classes instead.
|
23
23
|
**/
|
24
|
-
define('xooie/widgets/dropdown', ['jquery', 'xooie/widgets/base'], function($, Base) {
|
24
|
+
define('xooie/widgets/dropdown', ['jquery', 'xooie/widgets/base', 'xooie/helpers'], function ($, Base, helpers) {
|
25
|
+
'use strict';
|
25
26
|
|
27
|
+
function parseWhich(which) {
|
28
|
+
if (typeof which === 'string') {
|
29
|
+
which = which.split(',');
|
30
|
+
return which.map(function (string) { return parseInt(string, 10); });
|
31
|
+
}
|
26
32
|
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
return which.map(function(string){ return parseInt(string, 10); });
|
31
|
-
} else if (typeof which === 'number') {
|
32
|
-
return [which];
|
33
|
-
}
|
33
|
+
if (typeof which === 'number') {
|
34
|
+
return [which];
|
35
|
+
}
|
34
36
|
|
35
|
-
|
36
|
-
|
37
|
+
return which;
|
38
|
+
}
|
37
39
|
|
38
40
|
/**
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
41
|
+
* Xooie.Dropdown(element[, addons])
|
42
|
+
* - element (Element | String): A jQuery-selected element or string selector for the root element of this widget
|
43
|
+
* - addons (Array): An optional collection of [[Xooie.Addon]] classes to be instantiated with this widget
|
44
|
+
*
|
45
|
+
* Instantiates a new Dropdown widget. Creates event handlers to manage activating and deactivating the expanders.
|
46
|
+
* Also adds methods to manipulate aria roles.
|
47
|
+
**/
|
48
|
+
var Dropdown = Base.extend(function () {
|
49
|
+
var self, handles, expanders;
|
50
|
+
|
51
|
+
self = this;
|
52
|
+
handles = self.getHandle();
|
53
|
+
expanders = self.getExpander();
|
54
|
+
|
55
|
+
this.handlers = {
|
56
|
+
off: function (event) {
|
57
|
+
var check = false;
|
58
|
+
|
59
|
+
if (!helpers.isUndefined(event.data.not)) {
|
60
|
+
check = $(event.data.not).is($(this)) || $(event.target).parents(event.data.not).length > 0;
|
61
|
+
}
|
50
62
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
return true;
|
55
|
-
}
|
63
|
+
if (!helpers.isUndefined(event.data.which)) {
|
64
|
+
check = check || event.data.which.indexOf(event.which) === -1;
|
65
|
+
}
|
56
66
|
|
57
|
-
|
67
|
+
check = check || ($(event.target).is(self.getExpander(event.data.index)) || $(event.target).parents(self.dropdownExpanderSelector()).length > 0);
|
68
|
+
check = check && !$(event.target).is($(this));
|
58
69
|
|
59
|
-
|
60
|
-
|
70
|
+
if (check) {
|
71
|
+
return true;
|
72
|
+
}
|
61
73
|
|
62
|
-
|
63
|
-
var index = event.data.index || parseInt($(this).attr('data-dropdown-index'), 10),
|
64
|
-
delay = event.data.delay,
|
65
|
-
handle = $(this);
|
74
|
+
event.preventDefault();
|
66
75
|
|
67
|
-
|
68
|
-
|
69
|
-
}
|
76
|
+
self.collapse(event.data.index, event.data);
|
77
|
+
},
|
70
78
|
|
71
|
-
|
79
|
+
on: function (event) {
|
80
|
+
var index, check;
|
72
81
|
|
73
|
-
|
74
|
-
}
|
75
|
-
};
|
82
|
+
index = event.data.index || parseInt($(this).attr('data-dropdown-index'), 10);
|
76
83
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
};
|
84
|
+
if (!helpers.isUndefined(event.data.not)) {
|
85
|
+
check = $(event.data.not).is($(this));
|
86
|
+
check = check || $(event.target).parents(event.data.not).length > 0;
|
87
|
+
}
|
82
88
|
|
83
|
-
|
89
|
+
check = check || (!helpers.isUndefined(event.data.which) && event.data.which.indexOf(event.which) === -1);
|
84
90
|
|
85
|
-
|
86
|
-
|
87
|
-
|
91
|
+
if (check) {
|
92
|
+
return true;
|
93
|
+
}
|
88
94
|
|
89
|
-
|
95
|
+
event.preventDefault();
|
90
96
|
|
91
|
-
|
92
|
-
|
93
|
-
|
97
|
+
self.expand(index, event.data);
|
98
|
+
}
|
99
|
+
};
|
94
100
|
|
95
|
-
|
96
|
-
|
101
|
+
this.timers = {
|
102
|
+
expand: [],
|
103
|
+
collapse: [],
|
104
|
+
throttle: []
|
105
|
+
};
|
97
106
|
|
98
|
-
|
107
|
+
this.addHandlers('on');
|
99
108
|
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
}, this.dropdownHandleSelector());
|
109
|
+
this.root().on({
|
110
|
+
dropdownExpand: function (event, index) {
|
111
|
+
self.removeHandlers('on', index);
|
104
112
|
|
105
|
-
|
106
|
-
handles.each(function(index){
|
107
|
-
var handle = $(this),
|
108
|
-
expander = expanders.eq(index);
|
113
|
+
self.addHandlers('off', index);
|
109
114
|
|
115
|
+
$(this).attr('aria-selected', true);
|
116
|
+
self.getExpander(index).attr('aria-hidden', false);
|
110
117
|
|
111
|
-
|
112
|
-
|
113
|
-
'aria-selected': false
|
114
|
-
});
|
115
|
-
expander.attr({
|
116
|
-
'data-dropdown-index': index,
|
117
|
-
'aria-hidden': true
|
118
|
-
});
|
119
|
-
});
|
120
|
-
});
|
118
|
+
event.preventDefault();
|
119
|
+
},
|
121
120
|
|
122
|
-
|
123
|
-
|
121
|
+
dropdownCollapse: function (event, index) {
|
122
|
+
self.removeHandlers('off', index);
|
124
123
|
|
125
|
-
|
126
|
-
self.timers.collapse[index] = clearTimeout(self.timers.collapse[index]);
|
124
|
+
self.addHandlers('on', index);
|
127
125
|
|
128
|
-
|
129
|
-
|
130
|
-
$(this).unbind(event);
|
131
|
-
});
|
132
|
-
}
|
133
|
-
});
|
126
|
+
$(this).attr('aria-selected', false);
|
127
|
+
self.getExpander(index).attr('aria-hidden', true);
|
134
128
|
|
135
|
-
|
129
|
+
event.preventDefault();
|
130
|
+
}
|
131
|
+
}, this.dropdownHandleSelector());
|
136
132
|
|
137
|
-
|
133
|
+
this.root().on('xooie-init.dropdown xooie-refresh.dropdown', function () {
|
134
|
+
handles.each(function (index) {
|
135
|
+
var handle, expander;
|
138
136
|
|
139
|
-
|
137
|
+
handle = $(this);
|
138
|
+
expander = expanders.eq(index);
|
140
139
|
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
}
|
151
|
-
}
|
140
|
+
handle.attr({
|
141
|
+
'data-dropdown-index': index,
|
142
|
+
'aria-selected': false
|
143
|
+
});
|
144
|
+
expander.attr({
|
145
|
+
'data-dropdown-index': index,
|
146
|
+
'aria-hidden': true
|
147
|
+
});
|
148
|
+
});
|
152
149
|
});
|
153
150
|
|
154
|
-
|
151
|
+
expanders.on('mouseover focus', function () {
|
152
|
+
var index = parseInt($(this).attr('data-dropdown-index'), 10);
|
155
153
|
|
156
|
-
|
154
|
+
if (self.timers.collapse[index]) {
|
155
|
+
self.timers.collapse[index] = clearTimeout(self.timers.collapse[index]);
|
157
156
|
|
158
|
-
|
157
|
+
$(this).on('mouseleave blur', {index: index}, function (event) {
|
158
|
+
self.collapse(event.data.index, 0);
|
159
|
+
$(this).unbind(event);
|
160
|
+
});
|
161
|
+
}
|
162
|
+
});
|
163
|
+
});
|
159
164
|
|
160
|
-
|
161
|
-
var handles = this.getHandle(index);
|
165
|
+
Dropdown.define('namespace', 'dropdown');
|
162
166
|
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
167
|
+
Dropdown.define('throttleDelay', 300);
|
168
|
+
|
169
|
+
Dropdown.define('triggers', {
|
170
|
+
on: {
|
171
|
+
focus: {
|
172
|
+
delay: 0
|
173
|
+
}
|
174
|
+
},
|
175
|
+
off: {
|
176
|
+
blur: {
|
177
|
+
delay: 0
|
178
|
+
}
|
179
|
+
}
|
180
|
+
});
|
181
|
+
|
182
|
+
Dropdown.defineReadOnly('dropdownHandleSelector', '[data-role="dropdown-handle"]');
|
169
183
|
|
170
|
-
|
171
|
-
var trigger, handle, triggerData, countName;
|
184
|
+
Dropdown.defineReadOnly('dropdownExpanderSelector', '[data-role="dropdown-content"]');
|
172
185
|
|
173
|
-
|
186
|
+
Dropdown.defineReadOnly('activeDropdownClass', 'is-dropdown-active');
|
174
187
|
|
175
|
-
|
176
|
-
|
177
|
-
triggerData[trigger].which = parseWhich(triggerData[trigger].which);
|
178
|
-
}
|
188
|
+
Dropdown.prototype.getTriggerHandle = function (triggerData, index) {
|
189
|
+
var handles = this.getHandle(index);
|
179
190
|
|
180
|
-
|
191
|
+
if (triggerData.selector) {
|
192
|
+
return triggerData.selector === 'document' ? $(document) : $(triggerData.selector);
|
193
|
+
}
|
194
|
+
return handles;
|
195
|
+
};
|
181
196
|
|
182
|
-
|
197
|
+
Dropdown.prototype.addHandlers = function (state, index) {
|
198
|
+
var trigger, handle, triggerData, countName;
|
183
199
|
|
184
|
-
|
200
|
+
triggerData = this.triggers()[state];
|
185
201
|
|
186
|
-
|
202
|
+
for (trigger in triggerData) {
|
203
|
+
if (triggerData.hasOwnProperty(trigger)) {
|
204
|
+
if (!helpers.isUndefined(triggerData[trigger].which)) {
|
205
|
+
triggerData[trigger].which = parseWhich(triggerData[trigger].which);
|
187
206
|
}
|
188
|
-
};
|
189
207
|
|
190
|
-
|
191
|
-
var trigger, handle, triggerData, countName, eventCount;
|
208
|
+
countName = [trigger, state, 'count'].join('-');
|
192
209
|
|
193
|
-
|
210
|
+
handle = this.getTriggerHandle(triggerData[trigger], index);
|
194
211
|
|
195
|
-
|
196
|
-
handle = this.getTriggerHandle(triggerData[trigger], index);
|
212
|
+
handle.data(countName, handle.data(countName) + 1 || 1);
|
197
213
|
|
198
|
-
|
214
|
+
handle.on(trigger, $.extend({delay: 0, index: index}, triggerData[trigger]), this.handlers[state]);
|
215
|
+
}
|
216
|
+
}
|
217
|
+
};
|
199
218
|
|
200
|
-
|
219
|
+
Dropdown.prototype.removeHandlers = function (state, index) {
|
220
|
+
var trigger, handle, triggerData, countName, eventCount;
|
201
221
|
|
202
|
-
|
203
|
-
handle.unbind(trigger, this.handlers[state]);
|
222
|
+
triggerData = this.triggers()[state];
|
204
223
|
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
}
|
209
|
-
}
|
210
|
-
};
|
224
|
+
for (trigger in triggerData) {
|
225
|
+
if (triggerData.hasOwnProperty(trigger)) {
|
226
|
+
handle = this.getTriggerHandle(triggerData[trigger], index);
|
211
227
|
|
212
|
-
|
213
|
-
var handles = this.root().find(this.dropdownHandleSelector());
|
228
|
+
countName = [trigger, state, 'count'].join('-');
|
214
229
|
|
215
|
-
|
216
|
-
};
|
230
|
+
eventCount = handle.data(countName) - 1;
|
217
231
|
|
218
|
-
|
219
|
-
|
232
|
+
if (eventCount <= 0) {
|
233
|
+
handle.unbind(trigger, this.handlers[state]);
|
220
234
|
|
221
|
-
|
222
|
-
selectorString = this.dropdownExpanderSelector();
|
235
|
+
handle.data(countName, 0);
|
223
236
|
} else {
|
224
|
-
|
237
|
+
handle.data(countName, eventCount);
|
225
238
|
}
|
239
|
+
}
|
240
|
+
}
|
241
|
+
};
|
226
242
|
|
227
|
-
|
228
|
-
|
243
|
+
Dropdown.prototype.getHandle = function (index) {
|
244
|
+
var handles = this.root().find(this.dropdownHandleSelector());
|
229
245
|
|
230
|
-
|
231
|
-
|
232
|
-
return;
|
233
|
-
}
|
246
|
+
return (!helpers.isUndefined(index) && index >= 0) ? handles.eq(index) : handles;
|
247
|
+
};
|
234
248
|
|
235
|
-
|
236
|
-
|
237
|
-
delay = data.delay;
|
249
|
+
Dropdown.prototype.getExpander = function (index) {
|
250
|
+
var selectorString;
|
238
251
|
|
239
|
-
|
252
|
+
if (helpers.isUndefined(index) || isNaN(index)) {
|
253
|
+
selectorString = this.dropdownExpanderSelector();
|
254
|
+
} else {
|
255
|
+
selectorString = this.dropdownExpanderSelector() + '[data-dropdown-index="' + index + '"]';
|
256
|
+
}
|
240
257
|
|
241
|
-
|
242
|
-
|
243
|
-
}
|
258
|
+
return this.root().find(selectorString);
|
259
|
+
};
|
244
260
|
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
261
|
+
Dropdown.prototype.setState = function (index, data, active) {
|
262
|
+
if (helpers.isUndefined(index) || isNaN(index)) {
|
263
|
+
return;
|
264
|
+
}
|
249
265
|
|
250
|
-
|
266
|
+
var state, counterState, delay;
|
251
267
|
|
252
|
-
|
253
|
-
|
268
|
+
state = active ? 'expand' : 'collapse';
|
269
|
+
counterState = active ? 'collapse' : 'expand';
|
270
|
+
delay = data.delay;
|
254
271
|
|
255
|
-
|
256
|
-
handle.trigger('dropdownExpand', [i, _data]);
|
257
|
-
} else {
|
258
|
-
handle.trigger('dropdownCollapse', [i, _data]);
|
259
|
-
}
|
272
|
+
this.timers[counterState][index] = clearTimeout(this.timers[counterState][index]);
|
260
273
|
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
}, this.throttleDelay());
|
265
|
-
}
|
274
|
+
if (this.timers.throttle[index] || this.timers[state][index]) {
|
275
|
+
return;
|
276
|
+
}
|
266
277
|
|
267
|
-
|
268
|
-
|
278
|
+
this.timers[state][index] = setTimeout(function (i, _state, _active, _data) {
|
279
|
+
var expander, handle, self;
|
269
280
|
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
}
|
274
|
-
};
|
281
|
+
expander = this.getExpander(i);
|
282
|
+
handle = this.getHandle(i);
|
283
|
+
self = this;
|
275
284
|
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
285
|
+
this.timers[_state][i] = clearTimeout(this.timers[_state][i]);
|
286
|
+
|
287
|
+
expander.toggleClass(this.activeDropdownClass(), _active);
|
288
|
+
this.getHandle(i).toggleClass(this.activeDropdownClass(), _active);
|
289
|
+
|
290
|
+
if (_active) {
|
291
|
+
handle.trigger('dropdownExpand', [i, _data]);
|
292
|
+
} else {
|
293
|
+
handle.trigger('dropdownCollapse', [i, _data]);
|
294
|
+
}
|
295
|
+
|
296
|
+
if (this.throttleDelay() > 0) {
|
297
|
+
this.timers.throttle[i] = setTimeout(function () {
|
298
|
+
self.timers.throttle[i] = clearTimeout(self.timers.throttle[i]);
|
299
|
+
}, this.throttleDelay());
|
300
|
+
}
|
301
|
+
|
302
|
+
}.bind(this, index, state, active, data), delay);
|
303
|
+
};
|
304
|
+
|
305
|
+
Dropdown.prototype.expand = function (index, data) {
|
306
|
+
if (!this.getHandle(index).hasClass(this.activeDropdownClass())) {
|
307
|
+
this.setState(index, data, true);
|
308
|
+
}
|
309
|
+
};
|
310
|
+
|
311
|
+
Dropdown.prototype.collapse = function (index, data) {
|
312
|
+
if (this.getHandle(index).hasClass(this.activeDropdownClass())) {
|
313
|
+
this.setState(index, data, false);
|
314
|
+
}
|
315
|
+
};
|
281
316
|
|
282
|
-
|
317
|
+
return Dropdown;
|
283
318
|
});
|