xooie 0.1.7 → 1.0.0
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 +4 -4
- data/README.md +0 -6
- data/lib/xooie.rb +1 -3
- data/vendor/assets/javascripts/xooie/addons/base.js +211 -46
- data/vendor/assets/javascripts/xooie/addons/carousel_lentils.js +0 -0
- data/vendor/assets/javascripts/xooie/addons/carousel_pagination.js +0 -0
- data/vendor/assets/javascripts/xooie/addons/dropdown_accordion.js +0 -0
- data/vendor/assets/javascripts/xooie/addons/tab_animation.js +0 -0
- data/vendor/assets/javascripts/xooie/addons/tab_automation.js +0 -0
- data/vendor/assets/javascripts/xooie/base.js +1 -4
- data/vendor/assets/javascripts/xooie/carousel.js +5 -5
- data/vendor/assets/javascripts/xooie/dialog.js +2 -31
- data/vendor/assets/javascripts/xooie/dropdown.js +5 -17
- data/vendor/assets/javascripts/xooie/event_handler.js +83 -0
- data/vendor/assets/javascripts/xooie/helpers.js +61 -0
- data/vendor/assets/javascripts/xooie/keyboard_navigation.js +216 -0
- data/vendor/assets/javascripts/xooie/shared.js +175 -0
- data/vendor/assets/javascripts/xooie/stylesheet.js +77 -78
- data/vendor/assets/javascripts/xooie/tab.js +0 -0
- data/vendor/assets/javascripts/xooie/widgets/accordion.js +52 -0
- data/vendor/assets/javascripts/xooie/widgets/base.js +644 -0
- data/vendor/assets/javascripts/xooie/widgets/carousel.js +769 -0
- data/vendor/assets/javascripts/xooie/widgets/dialog.js +132 -0
- data/vendor/assets/javascripts/xooie/widgets/dropdown.js +283 -0
- data/vendor/assets/javascripts/xooie/widgets/tab.js +332 -0
- data/vendor/assets/javascripts/xooie/xooie.js +282 -0
- data/vendor/assets/javascripts/xooie.js +0 -0
- metadata +17 -7
@@ -0,0 +1,132 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright 2012 Comcast
|
3
|
+
*
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
* you may not use this file except in compliance with the License.
|
6
|
+
* You may obtain a copy of the License at
|
7
|
+
*
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
*
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
* See the License for the specific language governing permissions and
|
14
|
+
* limitations under the License.
|
15
|
+
*/
|
16
|
+
|
17
|
+
define('xooie/dialog', ['jquery', 'xooie/base'], function($, Base) {
|
18
|
+
|
19
|
+
var Dialog = Base('dialog', function(){
|
20
|
+
var self = this;
|
21
|
+
|
22
|
+
this.id = Dialog._counter++;
|
23
|
+
|
24
|
+
Dialog._instances[this.id] = this;
|
25
|
+
|
26
|
+
this.root.attr('data-dialog-id', this.id);
|
27
|
+
|
28
|
+
//add accessibility attributes
|
29
|
+
this.root.find(this.options.containerSelector).attr('role', 'dialog');
|
30
|
+
|
31
|
+
this.root.addClass('xooie-dialog');
|
32
|
+
|
33
|
+
this.handlers = {
|
34
|
+
mouseup: function(event){
|
35
|
+
Dialog.close(self.id);
|
36
|
+
},
|
37
|
+
|
38
|
+
keyup: function(event){
|
39
|
+
if([13,32].indexOf(event.which) !== -1){
|
40
|
+
Dialog.close(self.id);
|
41
|
+
}
|
42
|
+
}
|
43
|
+
};
|
44
|
+
});
|
45
|
+
|
46
|
+
Dialog.setDefaultOptions({
|
47
|
+
closeButtonSelector: '[data-role="closeButton"]',
|
48
|
+
containerSelector: '[data-role="container"]',
|
49
|
+
|
50
|
+
dialogActiveClass: 'is-dialog-active'
|
51
|
+
});
|
52
|
+
|
53
|
+
Dialog.setCSSRules({
|
54
|
+
'.xooie-dialog': {
|
55
|
+
position: 'fixed',
|
56
|
+
top: 0,
|
57
|
+
bottom: 0,
|
58
|
+
left: 0,
|
59
|
+
right: 0
|
60
|
+
}
|
61
|
+
});
|
62
|
+
|
63
|
+
Dialog.prototype.activate = function(){
|
64
|
+
this.root.addClass(this.options.dialogActiveClass);
|
65
|
+
|
66
|
+
if(Dialog._active === this) {
|
67
|
+
return;
|
68
|
+
}
|
69
|
+
|
70
|
+
if(Dialog._active){
|
71
|
+
Dialog._active.deactivate();
|
72
|
+
}
|
73
|
+
|
74
|
+
this.root.find(this.options.closeButtonSelector)
|
75
|
+
.on(this.handlers);
|
76
|
+
|
77
|
+
Dialog._active = this;
|
78
|
+
|
79
|
+
this.root.trigger('dialogActive');
|
80
|
+
};
|
81
|
+
|
82
|
+
Dialog.prototype.deactivate = function(){
|
83
|
+
this.root.removeClass(this.options.dialogActiveClass);
|
84
|
+
|
85
|
+
if (Dialog._active !== this) {
|
86
|
+
return;
|
87
|
+
}
|
88
|
+
|
89
|
+
this.root.find(this.options.closeButtonSelector)
|
90
|
+
.off(this.handlers);
|
91
|
+
|
92
|
+
Dialog._active = null;
|
93
|
+
|
94
|
+
this.root.trigger('dialogInactive');
|
95
|
+
};
|
96
|
+
|
97
|
+
Dialog._instances = [];
|
98
|
+
Dialog._counter = 0;
|
99
|
+
Dialog._active = null;
|
100
|
+
Dialog._queue = [];
|
101
|
+
|
102
|
+
Dialog.open = function(id){
|
103
|
+
//get dialog instance
|
104
|
+
var dialog = this._instances[id];
|
105
|
+
|
106
|
+
if (typeof dialog === 'undefined' || this._active === dialog){
|
107
|
+
return;
|
108
|
+
}
|
109
|
+
|
110
|
+
if (this._active) {
|
111
|
+
this._queue.push(dialog);
|
112
|
+
} else {
|
113
|
+
dialog.activate();
|
114
|
+
}
|
115
|
+
|
116
|
+
};
|
117
|
+
|
118
|
+
Dialog.close = function(){
|
119
|
+
//get dialog instance
|
120
|
+
if(!this._active) {
|
121
|
+
return;
|
122
|
+
}
|
123
|
+
|
124
|
+
this._active.deactivate();
|
125
|
+
|
126
|
+
if (this._queue.length > 0) {
|
127
|
+
this._queue.pop().activate();
|
128
|
+
}
|
129
|
+
};
|
130
|
+
|
131
|
+
return Dialog;
|
132
|
+
});
|
@@ -0,0 +1,283 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright 2012 Comcast
|
3
|
+
*
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
5
|
+
* you may not use this file except in compliance with the License.
|
6
|
+
* You may obtain a copy of the License at
|
7
|
+
*
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
9
|
+
*
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13
|
+
* See the License for the specific language governing permissions and
|
14
|
+
* limitations under the License.
|
15
|
+
*/
|
16
|
+
|
17
|
+
/** deprecated: 1.0
|
18
|
+
* class Xooie.Dropdown < Xooie.Widget
|
19
|
+
*
|
20
|
+
* A widget used to hide and show content.
|
21
|
+
* As of v1.0 this widget has been deprecated. Use the more semantically appropriate
|
22
|
+
* [[Xooie.Tooltip]], [[Xooie.Menu]], [[Xooie.Tab]], or [[Xooie.Accordion]] classes instead.
|
23
|
+
**/
|
24
|
+
define('xooie/widgets/dropdown', ['jquery', 'xooie/widgets/base'], function($, Base) {
|
25
|
+
|
26
|
+
|
27
|
+
var parseWhich = function(which) {
|
28
|
+
if (typeof which === 'string') {
|
29
|
+
which = which.split(',');
|
30
|
+
return which.map(function(string){ return parseInt(string, 10); });
|
31
|
+
} else if (typeof which === 'number') {
|
32
|
+
return [which];
|
33
|
+
}
|
34
|
+
|
35
|
+
return which;
|
36
|
+
};
|
37
|
+
|
38
|
+
/**
|
39
|
+
* Xooie.Dropdown(element[, addons])
|
40
|
+
* - element (Element | String): A jQuery-selected element or string selector for the root element of this widget
|
41
|
+
* - addons (Array): An optional collection of [[Xooie.Addon]] classes to be instantiated with this widget
|
42
|
+
*
|
43
|
+
* Instantiates a new Dropdown widget. Creates event handlers to manage activating and deactivating the expanders.
|
44
|
+
* Also adds methods to manipulate aria roles.
|
45
|
+
**/
|
46
|
+
var Dropdown = Base.extend(function() {
|
47
|
+
var self = this,
|
48
|
+
handles = self.getHandle(),
|
49
|
+
expanders = self.getExpander();
|
50
|
+
|
51
|
+
this.handlers = {
|
52
|
+
off: function(event){
|
53
|
+
if ((typeof event.data.not !== 'undefined' && ($(event.data.not).is($(this)) || $(event.target).parents(event.data.not).length > 0)) || (typeof event.data.which !== 'undefined' && event.data.which.indexOf(event.which) === -1) || ($(event.target).is(self.getExpander(event.data.index)) || $(event.target).parents(self.dropdownExpanderSelector()).length > 0) && !$(event.target).is($(this))) {
|
54
|
+
return true;
|
55
|
+
}
|
56
|
+
|
57
|
+
event.preventDefault();
|
58
|
+
|
59
|
+
self.collapse(event.data.index, event.data);
|
60
|
+
},
|
61
|
+
|
62
|
+
on: function(event){
|
63
|
+
var index = event.data.index || parseInt($(this).attr('data-dropdown-index'), 10),
|
64
|
+
delay = event.data.delay,
|
65
|
+
handle = $(this);
|
66
|
+
|
67
|
+
if ((typeof event.data.not !== 'undefined' && ($(event.data.not).is($(this)) || $(event.target).parents(event.data.not).length > 0)) || typeof event.data.which !== 'undefined' && event.data.which.indexOf(event.which) === -1) {
|
68
|
+
return true;
|
69
|
+
}
|
70
|
+
|
71
|
+
event.preventDefault();
|
72
|
+
|
73
|
+
self.expand(index, event.data);
|
74
|
+
}
|
75
|
+
};
|
76
|
+
|
77
|
+
this.timers = {
|
78
|
+
expand: [],
|
79
|
+
collapse: [],
|
80
|
+
throttle: []
|
81
|
+
};
|
82
|
+
|
83
|
+
this.addHandlers('on');
|
84
|
+
|
85
|
+
this.root().on({
|
86
|
+
dropdownExpand: function(event, index){
|
87
|
+
self.removeHandlers('on', index);
|
88
|
+
|
89
|
+
self.addHandlers('off', index);
|
90
|
+
|
91
|
+
$(this).attr('aria-selected', true);
|
92
|
+
self.getExpander(index).attr('aria-hidden', false);
|
93
|
+
},
|
94
|
+
|
95
|
+
dropdownCollapse: function(event, index){
|
96
|
+
self.removeHandlers('off', index);
|
97
|
+
|
98
|
+
self.addHandlers('on', index);
|
99
|
+
|
100
|
+
$(this).attr('aria-selected', false);
|
101
|
+
self.getExpander(index).attr('aria-hidden', true);
|
102
|
+
}
|
103
|
+
}, this.dropdownHandleSelector());
|
104
|
+
|
105
|
+
this.root().on('xooie-init.dropdown xooie-refresh.dropdown', function(){
|
106
|
+
handles.each(function(index){
|
107
|
+
var handle = $(this),
|
108
|
+
expander = expanders.eq(index);
|
109
|
+
|
110
|
+
|
111
|
+
handle.attr({
|
112
|
+
'data-dropdown-index': index,
|
113
|
+
'aria-selected': false
|
114
|
+
});
|
115
|
+
expander.attr({
|
116
|
+
'data-dropdown-index': index,
|
117
|
+
'aria-hidden': true
|
118
|
+
});
|
119
|
+
});
|
120
|
+
});
|
121
|
+
|
122
|
+
expanders.on('mouseover focus', function(){
|
123
|
+
var index = parseInt($(this).attr('data-dropdown-index'), 10);
|
124
|
+
|
125
|
+
if (self.timers.collapse[index]){
|
126
|
+
self.timers.collapse[index] = clearTimeout(self.timers.collapse[index]);
|
127
|
+
|
128
|
+
$(this).on('mouseleave blur', {index: index}, function(event){
|
129
|
+
self.collapse(event.data.index, 0);
|
130
|
+
$(this).unbind(event);
|
131
|
+
});
|
132
|
+
}
|
133
|
+
});
|
134
|
+
|
135
|
+
});
|
136
|
+
|
137
|
+
Dropdown.define('namespace', 'dropdown');
|
138
|
+
|
139
|
+
Dropdown.define('throttleDelay', 300);
|
140
|
+
|
141
|
+
Dropdown.define('triggers', {
|
142
|
+
on: {
|
143
|
+
focus: {
|
144
|
+
delay: 0
|
145
|
+
}
|
146
|
+
},
|
147
|
+
off: {
|
148
|
+
blur: {
|
149
|
+
delay: 0
|
150
|
+
}
|
151
|
+
}
|
152
|
+
});
|
153
|
+
|
154
|
+
Dropdown.defineReadOnly('dropdownHandleSelector', '[data-role="dropdown-handle"]');
|
155
|
+
|
156
|
+
Dropdown.defineReadOnly('dropdownExpanderSelector', '[data-role="dropdown-content"]');
|
157
|
+
|
158
|
+
Dropdown.defineReadOnly('activeDropdownClass', 'is-dropdown-active');
|
159
|
+
|
160
|
+
Dropdown.prototype.getTriggerHandle = function(triggerData, index){
|
161
|
+
var handles = this.getHandle(index);
|
162
|
+
|
163
|
+
if (triggerData.selector) {
|
164
|
+
return triggerData.selector === 'document' ? $(document) : $(triggerData.selector);
|
165
|
+
} else {
|
166
|
+
return handles;
|
167
|
+
}
|
168
|
+
};
|
169
|
+
|
170
|
+
Dropdown.prototype.addHandlers = function(state, index){
|
171
|
+
var trigger, handle, triggerData, countName;
|
172
|
+
|
173
|
+
triggerData = this.triggers()[state];
|
174
|
+
|
175
|
+
for (trigger in triggerData) {
|
176
|
+
if (typeof triggerData[trigger].which !== 'undefined') {
|
177
|
+
triggerData[trigger].which = parseWhich(triggerData[trigger].which);
|
178
|
+
}
|
179
|
+
|
180
|
+
countName = [trigger,state,'count'].join('-');
|
181
|
+
|
182
|
+
handle = this.getTriggerHandle(triggerData[trigger], index);
|
183
|
+
|
184
|
+
handle.data(countName, handle.data(countName) + 1 || 1);
|
185
|
+
|
186
|
+
handle.on(trigger, $.extend({delay: 0, index: index}, triggerData[trigger]), this.handlers[state]);
|
187
|
+
}
|
188
|
+
};
|
189
|
+
|
190
|
+
Dropdown.prototype.removeHandlers = function(state, index){
|
191
|
+
var trigger, handle, triggerData, countName, eventCount;
|
192
|
+
|
193
|
+
triggerData = this.triggers()[state];
|
194
|
+
|
195
|
+
for (trigger in triggerData) {
|
196
|
+
handle = this.getTriggerHandle(triggerData[trigger], index);
|
197
|
+
|
198
|
+
countName = [trigger,state,'count'].join('-');
|
199
|
+
|
200
|
+
eventCount = handle.data(countName) - 1;
|
201
|
+
|
202
|
+
if (eventCount <= 0) {
|
203
|
+
handle.unbind(trigger, this.handlers[state]);
|
204
|
+
|
205
|
+
handle.data(countName, 0);
|
206
|
+
} else {
|
207
|
+
handle.data(countName, eventCount);
|
208
|
+
}
|
209
|
+
}
|
210
|
+
};
|
211
|
+
|
212
|
+
Dropdown.prototype.getHandle = function(index){
|
213
|
+
var handles = this.root().find(this.dropdownHandleSelector());
|
214
|
+
|
215
|
+
return (typeof index !== 'undefined' && index >= 0) ? handles.eq(index) : handles;
|
216
|
+
};
|
217
|
+
|
218
|
+
Dropdown.prototype.getExpander = function(index){
|
219
|
+
var selectorString;
|
220
|
+
|
221
|
+
if (typeof index === 'undefined' || isNaN(index)) {
|
222
|
+
selectorString = this.dropdownExpanderSelector();
|
223
|
+
} else {
|
224
|
+
selectorString = this.dropdownExpanderSelector() + '[data-dropdown-index="' + index + '"]';
|
225
|
+
}
|
226
|
+
|
227
|
+
return this.root().find(selectorString);
|
228
|
+
};
|
229
|
+
|
230
|
+
Dropdown.prototype.setState = function(index, data, active){
|
231
|
+
if (typeof index === 'undefined' || isNaN(index)) {
|
232
|
+
return;
|
233
|
+
}
|
234
|
+
|
235
|
+
var state = active ? 'expand' : 'collapse',
|
236
|
+
counterState = active ? 'collapse' : 'expand',
|
237
|
+
delay = data.delay;
|
238
|
+
|
239
|
+
this.timers[counterState][index] = clearTimeout(this.timers[counterState][index]);
|
240
|
+
|
241
|
+
if (this.timers.throttle[index] || this.timers[state][index]) {
|
242
|
+
return;
|
243
|
+
}
|
244
|
+
|
245
|
+
this.timers[state][index] = setTimeout(function(i, _state, _active, _data) {
|
246
|
+
var expander = this.getExpander(i),
|
247
|
+
handle = this.getHandle(i),
|
248
|
+
self = this;
|
249
|
+
|
250
|
+
this.timers[_state][i] = clearTimeout(this.timers[_state][i]);
|
251
|
+
|
252
|
+
expander.toggleClass(this.activeDropdownClass(), _active);
|
253
|
+
this.getHandle(i).toggleClass(this.activeDropdownClass(), _active);
|
254
|
+
|
255
|
+
if (_active){
|
256
|
+
handle.trigger('dropdownExpand', [i, _data]);
|
257
|
+
} else {
|
258
|
+
handle.trigger('dropdownCollapse', [i, _data]);
|
259
|
+
}
|
260
|
+
|
261
|
+
if (this.throttleDelay() > 0){
|
262
|
+
this.timers.throttle[i] = setTimeout(function(){
|
263
|
+
self.timers.throttle[i] = clearTimeout(self.timers.throttle[i]);
|
264
|
+
}, this.throttleDelay());
|
265
|
+
}
|
266
|
+
|
267
|
+
}.bind(this, index, state, active, data), delay);
|
268
|
+
};
|
269
|
+
|
270
|
+
Dropdown.prototype.expand = function(index, data) {
|
271
|
+
if (!this.getHandle(index).hasClass(this.activeDropdownClass())) {
|
272
|
+
this.setState(index, data, true);
|
273
|
+
}
|
274
|
+
};
|
275
|
+
|
276
|
+
Dropdown.prototype.collapse = function(index, data) {
|
277
|
+
if (this.getHandle(index).hasClass(this.activeDropdownClass())) {
|
278
|
+
this.setState(index, data, false);
|
279
|
+
}
|
280
|
+
};
|
281
|
+
|
282
|
+
return Dropdown;
|
283
|
+
});
|