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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +0 -6
  3. data/lib/xooie.rb +1 -3
  4. data/vendor/assets/javascripts/xooie/addons/base.js +211 -46
  5. data/vendor/assets/javascripts/xooie/addons/carousel_lentils.js +0 -0
  6. data/vendor/assets/javascripts/xooie/addons/carousel_pagination.js +0 -0
  7. data/vendor/assets/javascripts/xooie/addons/dropdown_accordion.js +0 -0
  8. data/vendor/assets/javascripts/xooie/addons/tab_animation.js +0 -0
  9. data/vendor/assets/javascripts/xooie/addons/tab_automation.js +0 -0
  10. data/vendor/assets/javascripts/xooie/base.js +1 -4
  11. data/vendor/assets/javascripts/xooie/carousel.js +5 -5
  12. data/vendor/assets/javascripts/xooie/dialog.js +2 -31
  13. data/vendor/assets/javascripts/xooie/dropdown.js +5 -17
  14. data/vendor/assets/javascripts/xooie/event_handler.js +83 -0
  15. data/vendor/assets/javascripts/xooie/helpers.js +61 -0
  16. data/vendor/assets/javascripts/xooie/keyboard_navigation.js +216 -0
  17. data/vendor/assets/javascripts/xooie/shared.js +175 -0
  18. data/vendor/assets/javascripts/xooie/stylesheet.js +77 -78
  19. data/vendor/assets/javascripts/xooie/tab.js +0 -0
  20. data/vendor/assets/javascripts/xooie/widgets/accordion.js +52 -0
  21. data/vendor/assets/javascripts/xooie/widgets/base.js +644 -0
  22. data/vendor/assets/javascripts/xooie/widgets/carousel.js +769 -0
  23. data/vendor/assets/javascripts/xooie/widgets/dialog.js +132 -0
  24. data/vendor/assets/javascripts/xooie/widgets/dropdown.js +283 -0
  25. data/vendor/assets/javascripts/xooie/widgets/tab.js +332 -0
  26. data/vendor/assets/javascripts/xooie/xooie.js +282 -0
  27. data/vendor/assets/javascripts/xooie.js +0 -0
  28. 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
+ });