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,332 @@
|
|
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
|
+
/**
|
18
|
+
* class Xooie.Tab < Xooie.Widget
|
19
|
+
*
|
20
|
+
* A widget that associates containers of information with "tabs". The pattern is
|
21
|
+
* designed to mimic the real-world concept of a filing cabinet, where content is
|
22
|
+
* stored in folders with protruding tabs that label said content.
|
23
|
+
*
|
24
|
+
* The Tab widget should be used as a way to organize how content is displayed
|
25
|
+
* visually. Content is hidden until the associated tab is activated.
|
26
|
+
**/
|
27
|
+
define('xooie/widgets/tab', ['jquery', 'xooie/helpers', 'xooie/widgets/base', 'xooie/event_handler'], function($, helpers, Base, EventHandler) {
|
28
|
+
/**
|
29
|
+
* Xooie.Tab@xooie-tab-active(event)
|
30
|
+
* - event (Event): A jQuery event object
|
31
|
+
*
|
32
|
+
* An event that is fired when a tab is activated. Triggers on the `root` element of the widget.
|
33
|
+
*
|
34
|
+
* ##### Event Properties
|
35
|
+
* - **tabId** (String): The id of the tab that was activated.
|
36
|
+
**/
|
37
|
+
|
38
|
+
/**
|
39
|
+
* Xooie.Tab@xooie-tab-inactive(event)
|
40
|
+
* - event (Event): A jQuery event object
|
41
|
+
*
|
42
|
+
* An event that is fired when a tab is deactivated. Triggers on the `root` element of the widget.
|
43
|
+
*
|
44
|
+
* ##### Event Properties
|
45
|
+
* - **tabId** (String): The id of the tab that was deactivated.
|
46
|
+
**/
|
47
|
+
|
48
|
+
/**
|
49
|
+
* new Xooie.Tab(element[, addons])
|
50
|
+
* - element (Element | String): A jQuery-selected element or string selector for the root element of this widget
|
51
|
+
* - addons (Array): An optional collection of [[Xooie.Addon]] classes to be instantiated with this widget
|
52
|
+
*
|
53
|
+
* Instantiates a new Tab instance. See [[Xooie.Widget]] for more functionality.
|
54
|
+
**/
|
55
|
+
var Tab = Base.extend(function(){
|
56
|
+
var self = this;
|
57
|
+
|
58
|
+
this._tabEvents = new EventHandler(this.namespace());
|
59
|
+
|
60
|
+
this._tabEvents.add({
|
61
|
+
keyup: function(event){
|
62
|
+
var activeTab = self.getActiveTabs();
|
63
|
+
|
64
|
+
if ([13,32].indexOf(event.which) !== -1 && !activeTab.is(this)){
|
65
|
+
self.deactivateTab(activeTab);
|
66
|
+
|
67
|
+
self.activateTab($(this));
|
68
|
+
|
69
|
+
event.preventDefault();
|
70
|
+
}
|
71
|
+
},
|
72
|
+
|
73
|
+
mouseup: function(){
|
74
|
+
var activeTab = self.getActiveTabs();
|
75
|
+
|
76
|
+
if (!activeTab.is(this)) {
|
77
|
+
self.deactivateTab(activeTab);
|
78
|
+
|
79
|
+
self.activateTab($(this));
|
80
|
+
}
|
81
|
+
}
|
82
|
+
});
|
83
|
+
|
84
|
+
// TODO: Test and document this. Also, create a property for data-activate
|
85
|
+
this.root().on(this.initEvent(), function(){
|
86
|
+
self.activateTab(self.tabs().filter('[data-activate="true"]'));
|
87
|
+
});
|
88
|
+
|
89
|
+
});
|
90
|
+
|
91
|
+
/** internal
|
92
|
+
* Xooie.Tab#_namespace -> String
|
93
|
+
*
|
94
|
+
* See [[Xooie.Widget#_namespace]].
|
95
|
+
* Default: `tab`.
|
96
|
+
**/
|
97
|
+
/**
|
98
|
+
* Xooie.Tab#namespace([value]) -> String
|
99
|
+
* - value: an optional value to be set.
|
100
|
+
*
|
101
|
+
* See [[Xooie.Widget#namespace]]
|
102
|
+
**/
|
103
|
+
Tab.define('namespace', 'tab');
|
104
|
+
|
105
|
+
/** internal
|
106
|
+
* Xooie.Tab#_tabSelector -> String
|
107
|
+
*
|
108
|
+
* An alternative selector for a [[Xooie.Tab#tabs]]. This allows developers to specify a tab control that may not
|
109
|
+
* be a child of the tab widget.
|
110
|
+
**/
|
111
|
+
/**
|
112
|
+
* Xooie.Tab#tabSelector([value]) -> String
|
113
|
+
* - value: an optional value to be set.
|
114
|
+
*
|
115
|
+
* The method for setting or getting [[Xooie.Tab#_tabSelector]]. Returns the current value of
|
116
|
+
* [[Xooie.Tab#_tabSelector]] if no value is passed or sets the value.
|
117
|
+
**/
|
118
|
+
Tab.define('tabSelector');
|
119
|
+
|
120
|
+
/** internal
|
121
|
+
* Xooie.Tab#_activeClass -> String
|
122
|
+
*
|
123
|
+
* A class string that is applied to active [[Xooie.Tab#tabs]] and [[Xooie.Tab#tabpanels]].
|
124
|
+
* Default: `is-tab-active`.
|
125
|
+
**/
|
126
|
+
/**
|
127
|
+
* Xooie.Tab#activeClass([value]) -> String
|
128
|
+
* - value: an optional value to be set.
|
129
|
+
*
|
130
|
+
* The method for setting or getting [[Xooie.Tab#_activeClass]]. Returns the current value of
|
131
|
+
* [[Xooie.Tab#_activeClass]] if no value is passed or sets the value.
|
132
|
+
**/
|
133
|
+
Tab.defineReadOnly('activeClass', 'is-tab-active');
|
134
|
+
|
135
|
+
/**
|
136
|
+
* Xooie.Tab#tabpanels() -> Elements
|
137
|
+
*
|
138
|
+
* Tabpanels are elements that contain the content that is shown or hidden when the corresponding
|
139
|
+
* [[Xooie.Tab#tabs]] is activated.
|
140
|
+
* This role maps to the ARIA [tab role](http://www.w3.org/TR/wai-aria/roles#tab)
|
141
|
+
**/
|
142
|
+
Tab.defineRole('tabpanel');
|
143
|
+
|
144
|
+
/**
|
145
|
+
* Xooie.Tab#tabs() -> Elements
|
146
|
+
*
|
147
|
+
* Tabs are elements that, when activated, also activate the corresponding [[Xooie.Tab#tabpanels]].
|
148
|
+
* This role maps to the ARIA [tabpanel role](http://www.w3.org/TR/wai-aria/roles#tabpanel).
|
149
|
+
**/
|
150
|
+
Tab.defineRole('tab');
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Xooie.Tab#tablists() -> Elements
|
154
|
+
*
|
155
|
+
* A tablist is an element that contains all the [[Xooie.Tab#tabs]]. If any tabs are not decendants of
|
156
|
+
* the tablist, ownership of the tab is indicated using the `aria-owns` attribute.
|
157
|
+
* There should only be one tablist per tab widget.
|
158
|
+
* This role maps to the ARIA [tablist role](http://www.w3.org/TR/wai-aria/roles#tablist)
|
159
|
+
**/
|
160
|
+
Tab.defineRole('tablist');
|
161
|
+
|
162
|
+
/**
|
163
|
+
* Xooie.Tab#activateTab(tab)
|
164
|
+
* - tab (Element): One of the [[Xooie.Tab#tabs]] associated with this widget.
|
165
|
+
*
|
166
|
+
* Activates the [[Xooie.Tab#tabs]] by adding the [[Xooie.Tab#activeClass]] class and setting the `aria-expanded` property to 'true'.
|
167
|
+
* The method also activates the [[Xooie.Tab#tabpanels]] that is indicated by the tab's `aria-controls` attribute,
|
168
|
+
* adding the [[Xooie.Tab#activeClass]] class and setting `aria-expanded` to 'true'.
|
169
|
+
**/
|
170
|
+
Tab.prototype.activateTab = function(tab) {
|
171
|
+
tab.addClass(this.activeClass())
|
172
|
+
.attr('aria-selected', true);
|
173
|
+
|
174
|
+
$('#' + tab.attr('aria-controls')).addClass(this.activeClass())
|
175
|
+
.attr('aria-expanded', true)
|
176
|
+
.focus();
|
177
|
+
|
178
|
+
var e = $.Event('xooie-tab-active');
|
179
|
+
|
180
|
+
e.tabId = tab.attr('id');
|
181
|
+
|
182
|
+
this.root().trigger(e);
|
183
|
+
};
|
184
|
+
|
185
|
+
/**
|
186
|
+
* Xooie.Tab#deactivateTab(tab)
|
187
|
+
* - tab (Element): One of the [[Xooie.Tab#tabs]] associated with this widget.
|
188
|
+
*
|
189
|
+
* Deactivates the [[Xooie.Tab#tabs]] by removing the [[Xooie.Tab#activeClass]] class and setting the `aria-expanded` property to 'false'.
|
190
|
+
* The method also deactivates the [[Xooie.Tab#tabpanels]] that is indicated by the tab's `aria-controls` attribute,
|
191
|
+
* removing the [[Xooie.Tab#activeClass]] class and setting `aria-expanded` to 'false'.
|
192
|
+
**/
|
193
|
+
Tab.prototype.deactivateTab = function(tab) {
|
194
|
+
tab.removeClass(this.activeClass())
|
195
|
+
.attr('aria-selected', false);
|
196
|
+
|
197
|
+
$('#' + tab.attr('aria-controls')).removeClass(this.activeClass())
|
198
|
+
.attr('aria-expanded', false);
|
199
|
+
|
200
|
+
var e = $.Event('xooie-tab-inactive');
|
201
|
+
|
202
|
+
e.tabId = tab.attr('id');
|
203
|
+
|
204
|
+
this.root().trigger(e);
|
205
|
+
};
|
206
|
+
|
207
|
+
/**
|
208
|
+
* Xooie.Tab#getActiveTabs() -> Elements
|
209
|
+
*
|
210
|
+
* Returns a jQuery-selected collection of all [[Xooie.Tab#tabs]] that currently have the
|
211
|
+
* [[Xooie.Tab#activeClass]] class.
|
212
|
+
**/
|
213
|
+
Tab.prototype.getActiveTabs = function() {
|
214
|
+
return this.tabs().filter('.' + this.activeClass());
|
215
|
+
};
|
216
|
+
|
217
|
+
/** internal
|
218
|
+
* Xooie.Tab#_process_role_tab(tabs) -> Element
|
219
|
+
* - tabs (Element): A jQuery-selected collection of [[Xooie.Tab#tabs]]
|
220
|
+
*
|
221
|
+
* This method processes the elements that have been designated as [[Xooie.Tab#tabs]] with
|
222
|
+
* the `data-x-role="tab"` attribute. Tabs are given the [`role="tab"`](http://www.w3.org/TR/wai-aria/roles#tab) and [`aria-selected="false"`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)
|
223
|
+
* [ARIA](http://www.w3.org/TR/wai-aria/) attributes.
|
224
|
+
**/
|
225
|
+
Tab.prototype._process_role_tab = function(tabs){
|
226
|
+
var tabpanels = this.tabpanels(),
|
227
|
+
tab, panelId,
|
228
|
+
self = this;
|
229
|
+
|
230
|
+
tabs.attr('role', 'tab')
|
231
|
+
.attr('aria-selected', false);
|
232
|
+
|
233
|
+
tabs.each(function(index) {
|
234
|
+
tab = $(this);
|
235
|
+
panelId = tabpanels.eq(index).attr('id');
|
236
|
+
|
237
|
+
$(this).attr('aria-controls', panelId);
|
238
|
+
|
239
|
+
if ($(this).is('a')) {
|
240
|
+
$(this).attr('href', '#' + panelId);
|
241
|
+
}
|
242
|
+
|
243
|
+
});
|
244
|
+
|
245
|
+
tabs.on(this._tabEvents.handlers);
|
246
|
+
|
247
|
+
return tabs;
|
248
|
+
};
|
249
|
+
|
250
|
+
/** internal
|
251
|
+
* Xooie.Tab#_get_role_tab() -> Element
|
252
|
+
*
|
253
|
+
* Internal method used to retrieve the [[Xooie.Tab#tabs]] for this widget. If [[Xooie.Tab#tabSelector]] has been
|
254
|
+
* defined then its value will be used to select from the DOM. Otherwise, tabs will be selected from decendants of
|
255
|
+
* the root using the `[data-x-role="tab"]` selector.
|
256
|
+
**/
|
257
|
+
Tab.prototype._get_role_tab = function(){
|
258
|
+
if (!helpers.isUndefined(this.tabSelector())) {
|
259
|
+
return $(this.tabSelector());
|
260
|
+
} else {
|
261
|
+
return this.root().find('[data-x-role="tab"]');
|
262
|
+
}
|
263
|
+
};
|
264
|
+
|
265
|
+
/** internal
|
266
|
+
* Xooie.Tab#_render_role_tab() -> Elements
|
267
|
+
*
|
268
|
+
* TODO: Create this method to keep parity with the existing tab functionality
|
269
|
+
**/
|
270
|
+
Tab.prototype._render_role_tab = function(){
|
271
|
+
|
272
|
+
};
|
273
|
+
|
274
|
+
/** internal
|
275
|
+
* Xooie.Tab#_process_role_tablist(tablist) -> Element
|
276
|
+
* - tablist (Element): A jQuery-selected collection of [[Xooie.Tab#tablists]]
|
277
|
+
*
|
278
|
+
* This method processes the elements that have been designated as [[Xooie.Tab#tablists]] with
|
279
|
+
* the `data-x-role="tablist"` attribute. The tablist is given the [`role="tablist"`](http://www.w3.org/TR/wai-aria/roles#tablist)
|
280
|
+
* [ARIA](http://www.w3.org/TR/wai-aria/) attributes. If any [[Xooie.Tab#tabs]] are not decendants of the tab list, the ids of those
|
281
|
+
* tabs are added to the [`aria-owns`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-owns) attribute.
|
282
|
+
**/
|
283
|
+
Tab.prototype._process_role_tablist = function(tablist) {
|
284
|
+
var tabs = this.tabs();
|
285
|
+
|
286
|
+
tablist.attr('role', 'tablist');
|
287
|
+
|
288
|
+
tabs.each(function(index) {
|
289
|
+
var owns, id;
|
290
|
+
if (tablist.has(this).length === 0) {
|
291
|
+
owns = tablist.attr('aria-owns') || '';
|
292
|
+
|
293
|
+
owns = owns.split(' ');
|
294
|
+
|
295
|
+
id = $(this).attr('id');
|
296
|
+
|
297
|
+
if (owns.indexOf(id) === -1) {
|
298
|
+
owns.push(id);
|
299
|
+
}
|
300
|
+
|
301
|
+
tablist.attr('aria-owns', owns.join(' '));
|
302
|
+
}
|
303
|
+
});
|
304
|
+
|
305
|
+
return tablist;
|
306
|
+
};
|
307
|
+
/** internal
|
308
|
+
* Xooie.Tab#_render_role_tablist() -> Element
|
309
|
+
*
|
310
|
+
* TODO: Add this method to render the tablist if it is not included.
|
311
|
+
**/
|
312
|
+
Tab.prototype._render_role_tablist = function(){
|
313
|
+
return $('<ul data-x-role="tablist"></ul>');
|
314
|
+
};
|
315
|
+
|
316
|
+
/** internal
|
317
|
+
* Xooie.Tab#_process_role_tabpanel(tabpanels) -> Element
|
318
|
+
* - tabpanels (Element): A jQuery-selected collection of [[Xooie.Tab#tabpanels]]
|
319
|
+
*
|
320
|
+
* This method processes the elements that have been designated as [[Xooie.Tab#tabpanels]] with
|
321
|
+
* the `data-x-role="tabpanel"` attribute. Tabs are given the [`role="tabpanel"`](http://www.w3.org/TR/wai-aria/roles#tab) and [`aria-expanded="false"`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected)
|
322
|
+
* [ARIA](http://www.w3.org/TR/wai-aria/) attributes.
|
323
|
+
**/
|
324
|
+
Tab.prototype._process_role_tabpanel = function(tabpanels) {
|
325
|
+
tabpanels.attr('role', 'tabpanel')
|
326
|
+
.attr('aria-expanded', false);
|
327
|
+
|
328
|
+
return tabpanels;
|
329
|
+
};
|
330
|
+
|
331
|
+
return Tab;
|
332
|
+
});
|
@@ -0,0 +1,282 @@
|
|
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
|
+
var $X, Xooie;
|
18
|
+
|
19
|
+
/** alias of: $X
|
20
|
+
* Xooie
|
21
|
+
*
|
22
|
+
* Xooie is a JavaScript UI widget library.
|
23
|
+
**/
|
24
|
+
|
25
|
+
/**
|
26
|
+
* $X(element)
|
27
|
+
* - element (Element | String): A jQuery collection or string representing the DOM element to be
|
28
|
+
* instantiated as a Xooie widget.
|
29
|
+
*
|
30
|
+
* Traverses the DOM, starting from the element passed to the method, and instantiates a Xooie
|
31
|
+
* widget for every element that has a data-widget-type attribute.
|
32
|
+
**/
|
33
|
+
|
34
|
+
$X = Xooie = (function(static_config) {
|
35
|
+
var config = {
|
36
|
+
widgets: {},
|
37
|
+
addons: {}
|
38
|
+
},
|
39
|
+
obj = function() {
|
40
|
+
return false;
|
41
|
+
},
|
42
|
+
gcTimer = null;
|
43
|
+
|
44
|
+
function copyObj(dst, src) {
|
45
|
+
var name;
|
46
|
+
|
47
|
+
for (name in src) {
|
48
|
+
if (src.hasOwnProperty(name)) {
|
49
|
+
dst[name] = src[name];
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
function gcCallback() {
|
55
|
+
if (typeof Xooie.cleanup !== 'undefined') {
|
56
|
+
Xooie.cleanup();
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
/**
|
61
|
+
* $X.config(options)
|
62
|
+
* - options (Object): An object that describes the configuration options for Xooie.
|
63
|
+
*
|
64
|
+
* Defines the url strings for Xooie modules that will be used to require said modules.
|
65
|
+
*
|
66
|
+
* ##### Options
|
67
|
+
*
|
68
|
+
* - **root** (String): The location of all Xooie files.
|
69
|
+
* Default: `xooie`.
|
70
|
+
* - **widgets** (Object): Defines the location of widgets. By default, Xooie will look for widgets in the
|
71
|
+
* '/widgets' directory, relative to the `{root}`.
|
72
|
+
* - **addons** (Object): Defines the location of addons. By default, Xooie will look for addons in the
|
73
|
+
* '/addons' directory, relative to the `{root}`.
|
74
|
+
* - **cleanupInterval** (Integer): Defines the interval at which Xooie checks for instantiated widgets that are
|
75
|
+
* no longer active in the DOM. A value of '0' means no cleanup occurs.
|
76
|
+
* Default: `0`.
|
77
|
+
**/
|
78
|
+
|
79
|
+
obj.config = function(options) {
|
80
|
+
var name;
|
81
|
+
|
82
|
+
for (name in options) {
|
83
|
+
if (options.hasOwnProperty(name)) {
|
84
|
+
if (name === 'widgets' || name == 'addons') {
|
85
|
+
copyObj(config[name], options[name]);
|
86
|
+
} else {
|
87
|
+
config[name] = options[name];
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
if (typeof options.cleanupInterval !== 'undefined') {
|
93
|
+
gcTimer = clearInterval(gcTimer);
|
94
|
+
|
95
|
+
if (config.cleanupInterval > 0) {
|
96
|
+
gcTimer = setInterval(gcCallback, config.cleanupInterval);
|
97
|
+
}
|
98
|
+
}
|
99
|
+
};
|
100
|
+
|
101
|
+
/** internal
|
102
|
+
* $X._mapName(name, type) -> String
|
103
|
+
* - name (String): The name of the module, as determeined by the `data-widget-type` or `data-addons` properties.
|
104
|
+
* - type (String): The type of module. Can be either `'widget'` or `'addon'`
|
105
|
+
*
|
106
|
+
* Maps the name of the widget or addon to the correct url string where the module file is located.
|
107
|
+
**/
|
108
|
+
|
109
|
+
obj._mapName = function(name, type) {
|
110
|
+
if (typeof config[type][name] === 'undefined') {
|
111
|
+
return [config.root, '/', type, '/', name].join('');
|
112
|
+
} else {
|
113
|
+
return config[type][name];
|
114
|
+
}
|
115
|
+
};
|
116
|
+
|
117
|
+
obj.config({
|
118
|
+
root: 'xooie',
|
119
|
+
cleanupInterval: 0
|
120
|
+
});
|
121
|
+
|
122
|
+
if (static_config) {
|
123
|
+
obj.config(static_config);
|
124
|
+
}
|
125
|
+
|
126
|
+
return obj;
|
127
|
+
}(Xooie));
|
128
|
+
|
129
|
+
define('xooie/xooie', ['jquery', 'xooie/helpers', 'xooie/stylesheet'], function($, helpers, Stylesheet){
|
130
|
+
var config = Xooie.config,
|
131
|
+
_mapName = Xooie._mapName,
|
132
|
+
widgetSelector = '[data-widget-type]';
|
133
|
+
widgetDataAttr = 'widgetType';
|
134
|
+
addonDataAttr = 'addons';
|
135
|
+
|
136
|
+
$X = Xooie = function(element){
|
137
|
+
var nodes, moduleNames, moduleUrls,
|
138
|
+
node, url,
|
139
|
+
i, j;
|
140
|
+
|
141
|
+
element = $(element);
|
142
|
+
|
143
|
+
// Find all elements labeled as widgets:
|
144
|
+
nodes = element.find(widgetSelector);
|
145
|
+
|
146
|
+
// If the element is also tagged, add it to the collection:
|
147
|
+
if (element.is(widgetSelector)){
|
148
|
+
nodes = nodes.add(element);
|
149
|
+
}
|
150
|
+
|
151
|
+
// This array will be the list of unique modules to load:
|
152
|
+
moduleUrls = [];
|
153
|
+
|
154
|
+
// Iterate through each item in the collection:
|
155
|
+
for(i = 0; i < nodes.length; i+=1) {
|
156
|
+
node = $(nodes[i]);
|
157
|
+
|
158
|
+
// Add all of the widget types to the list of modules we need:
|
159
|
+
moduleNames = helpers.toAry(node.data(widgetDataAttr));
|
160
|
+
|
161
|
+
// For each widget we check to see if the url is already in our
|
162
|
+
// list of urls to require:
|
163
|
+
for (j = 0; j < moduleNames.length; j+=1) {
|
164
|
+
url = $X._mapName(moduleNames[j], 'widgets');
|
165
|
+
|
166
|
+
if (moduleUrls.indexOf(url) === -1) {
|
167
|
+
moduleUrls.push(url);
|
168
|
+
}
|
169
|
+
}
|
170
|
+
|
171
|
+
// Do the same with each addon name:
|
172
|
+
moduleNames = helpers.toAry(node.data(addonDataAttr)) || [];
|
173
|
+
|
174
|
+
for (j = 0; j < moduleNames.length; j+=1) {
|
175
|
+
url = $X._mapName(moduleNames[j], 'addons');
|
176
|
+
|
177
|
+
if (moduleUrls.indexOf(url) === -1) {
|
178
|
+
moduleUrls.push(url);
|
179
|
+
}
|
180
|
+
}
|
181
|
+
}
|
182
|
+
|
183
|
+
// Now that we have a list of urls to load, let's load them:
|
184
|
+
require(moduleUrls, function(){
|
185
|
+
var widgets, addons, node,
|
186
|
+
addonMods, widgetMod, argIndex,
|
187
|
+
i, j, k;
|
188
|
+
|
189
|
+
// We need to iterate through our collection of nodes again:
|
190
|
+
for (i = 0; i < nodes.length; i+=1) {
|
191
|
+
node = $(nodes[i]);
|
192
|
+
|
193
|
+
// This time, we're keeping track of our addons and widges separately:
|
194
|
+
widgets = helpers.toAry(node.data(widgetDataAttr));
|
195
|
+
addons = helpers.toAry(node.data(addonDataAttr)) || [];
|
196
|
+
|
197
|
+
// Iterate through each widget type:
|
198
|
+
for (j = 0; j < widgets.length; j+=1) {
|
199
|
+
|
200
|
+
// Get the index of this module from the moduleUrls:
|
201
|
+
argIndex = moduleUrls.indexOf($X._mapName(widgets[j], 'widgets'));
|
202
|
+
|
203
|
+
//Get the widget that we'll be instantiating:
|
204
|
+
widgetMod = arguments[argIndex];
|
205
|
+
|
206
|
+
addonMods = [];
|
207
|
+
|
208
|
+
// Now get each addon that we'll instantiate with the widget:
|
209
|
+
for (k = 0; k < addons.length; k+=1) {
|
210
|
+
// Get the index of the addon module from moduleUrls:
|
211
|
+
argIndex = moduleUrls.indexOf($X._mapName(addons[k], 'addons'));
|
212
|
+
|
213
|
+
addonMods.push(arguments[argIndex]);
|
214
|
+
}
|
215
|
+
|
216
|
+
// Instantiate the new instance using the argIndex to find the right module:
|
217
|
+
new widgetMod(node, addonMods);
|
218
|
+
}
|
219
|
+
}
|
220
|
+
});
|
221
|
+
};
|
222
|
+
|
223
|
+
Xooie.config = config;
|
224
|
+
Xooie._mapName = _mapName;
|
225
|
+
|
226
|
+
/** internal, read-only
|
227
|
+
* $X._stylesheet -> Object
|
228
|
+
*
|
229
|
+
* An instance of the [[Stylesheet]] class used to manipluate a dynamically created Xooie stylesheet
|
230
|
+
**/
|
231
|
+
Xooie._stylesheet = new Stylesheet('Xooie');
|
232
|
+
|
233
|
+
/** internal
|
234
|
+
* $X._styleRules -> Object
|
235
|
+
*
|
236
|
+
* A cache of css rules defined by the [[Xooie.Widget.createStyleRule]] method.
|
237
|
+
**/
|
238
|
+
Xooie._styleRules = {};
|
239
|
+
|
240
|
+
/** internal
|
241
|
+
* $X._instanceCache -> Array
|
242
|
+
*
|
243
|
+
* A collection of currently instantiated widgets.
|
244
|
+
**/
|
245
|
+
Xooie._instanceCache = [];
|
246
|
+
|
247
|
+
/** internal
|
248
|
+
* $X._instanceIndex -> Integer
|
249
|
+
*
|
250
|
+
* Tracks the next available instance index in the cache. This value also serves as the id of the
|
251
|
+
* next instantiated widget.
|
252
|
+
**/
|
253
|
+
Xooie._instanceIndex = 0;
|
254
|
+
|
255
|
+
/**
|
256
|
+
* $X.cleanup()
|
257
|
+
*
|
258
|
+
* Checks all instantiated widgets to ensure that the root element is still in the DOM. If the
|
259
|
+
* root element is no longer in the DOM, the module is garbage collected.
|
260
|
+
**/
|
261
|
+
|
262
|
+
Xooie.cleanup = function() {
|
263
|
+
var i, instance;
|
264
|
+
|
265
|
+
for (i = 0; i < $X._instanceCache.length; i++) {
|
266
|
+
instance = $X._instanceCache[i];
|
267
|
+
|
268
|
+
if (instance.root() && instance.root().parents('body').length === 0) {
|
269
|
+
instance.cleanup();
|
270
|
+
delete $X._instanceCache[i];
|
271
|
+
}
|
272
|
+
}
|
273
|
+
};
|
274
|
+
|
275
|
+
return Xooie;
|
276
|
+
});
|
277
|
+
|
278
|
+
require(['jquery', 'xooie/xooie'], function($, $X){
|
279
|
+
$(document).ready(function() {
|
280
|
+
$X($(this));
|
281
|
+
});
|
282
|
+
});
|
File without changes
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: xooie
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Andrew Larkin
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2013-08-21 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description: A highly modular, extensible JavaScript UI framework.
|
14
14
|
email: andrewlarkin2@gmail.com
|
@@ -16,9 +16,6 @@ executables: []
|
|
16
16
|
extensions: []
|
17
17
|
extra_rdoc_files: []
|
18
18
|
files:
|
19
|
-
- License.txt
|
20
|
-
- README.md
|
21
|
-
- lib/xooie.rb
|
22
19
|
- vendor/assets/javascripts/xooie.js
|
23
20
|
- vendor/assets/javascripts/xooie/addons/base.js
|
24
21
|
- vendor/assets/javascripts/xooie/addons/carousel_lentils.js
|
@@ -30,8 +27,22 @@ files:
|
|
30
27
|
- vendor/assets/javascripts/xooie/carousel.js
|
31
28
|
- vendor/assets/javascripts/xooie/dialog.js
|
32
29
|
- vendor/assets/javascripts/xooie/dropdown.js
|
30
|
+
- vendor/assets/javascripts/xooie/event_handler.js
|
31
|
+
- vendor/assets/javascripts/xooie/helpers.js
|
32
|
+
- vendor/assets/javascripts/xooie/keyboard_navigation.js
|
33
|
+
- vendor/assets/javascripts/xooie/shared.js
|
33
34
|
- vendor/assets/javascripts/xooie/stylesheet.js
|
34
35
|
- vendor/assets/javascripts/xooie/tab.js
|
36
|
+
- vendor/assets/javascripts/xooie/widgets/accordion.js
|
37
|
+
- vendor/assets/javascripts/xooie/widgets/base.js
|
38
|
+
- vendor/assets/javascripts/xooie/widgets/carousel.js
|
39
|
+
- vendor/assets/javascripts/xooie/widgets/dialog.js
|
40
|
+
- vendor/assets/javascripts/xooie/widgets/dropdown.js
|
41
|
+
- vendor/assets/javascripts/xooie/widgets/tab.js
|
42
|
+
- vendor/assets/javascripts/xooie/xooie.js
|
43
|
+
- lib/xooie.rb
|
44
|
+
- README.md
|
45
|
+
- License.txt
|
35
46
|
homepage: http://github.com/Comcast/Xooie
|
36
47
|
licenses:
|
37
48
|
- Apache
|
@@ -52,9 +63,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
52
63
|
version: '0'
|
53
64
|
requirements: []
|
54
65
|
rubyforge_project:
|
55
|
-
rubygems_version: 2.
|
66
|
+
rubygems_version: 2.0.3
|
56
67
|
signing_key:
|
57
68
|
specification_version: 4
|
58
69
|
summary: A highly modular, extensible JavaScript UI framework.
|
59
70
|
test_files: []
|
60
|
-
has_rdoc:
|