xooie 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,132 +0,0 @@
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
- });
@@ -1,285 +0,0 @@
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
-
104
- forceCollapse: function(event, data) {
105
- self.setState(data.index, data, false);
106
- }
107
- }, this.dropdownHandleSelector());
108
-
109
- this.root().on('xooie-init.dropdown xooie-refresh.dropdown', function(){
110
- handles.each(function(index){
111
- var handle = $(this),
112
- expander = expanders.eq(index);
113
-
114
-
115
- handle.attr({
116
- 'data-dropdown-index': index,
117
- 'aria-selected': false
118
- });
119
- expander.attr({
120
- 'data-dropdown-index': index,
121
- 'aria-hidden': true
122
- });
123
- });
124
- });
125
-
126
- expanders.on('mouseover focus', function(){
127
- var index = parseInt($(this).attr('data-dropdown-index'), 10);
128
-
129
- if (self.timers.collapse[index]){
130
- self.timers.collapse[index] = clearTimeout(self.timers.collapse[index]);
131
-
132
- $(this).on('mouseleave blur', {index: index}, function(event){
133
- self.collapse(event.data.index, 0);
134
- $(this).unbind(event);
135
- });
136
- }
137
- });
138
-
139
- });
140
-
141
- Dropdown.define('namespace', 'dropdown');
142
-
143
- Dropdown.define('throttleDelay', 300);
144
-
145
- Dropdown.define('triggers', {
146
- on: {
147
- focus: {
148
- delay: 0
149
- }
150
- },
151
- off: {
152
- blur: {
153
- delay: 0
154
- }
155
- }
156
- });
157
-
158
- Dropdown.defineReadOnly('dropdownHandleSelector', '[data-role="dropdown-handle"]');
159
-
160
- Dropdown.defineReadOnly('dropdownExpanderSelector', '[data-role="dropdown-content"]');
161
-
162
- Dropdown.defineReadOnly('activeDropdownClass', 'is-dropdown-active');
163
-
164
- Dropdown.prototype.getTriggerHandle = function(triggerData, index){
165
- var handles = this.getHandle(index);
166
-
167
- if (triggerData.selector) {
168
- return triggerData.selector === 'document' ? $(document) : $(triggerData.selector);
169
- } else {
170
- return handles;
171
- }
172
- };
173
-
174
- Dropdown.prototype.addHandlers = function(state, index){
175
- var trigger, handle, triggerData, countName;
176
-
177
- triggerData = this.triggers()[state];
178
-
179
- for (trigger in triggerData) {
180
- if (typeof triggerData[trigger].which !== 'undefined') {
181
- triggerData[trigger].which = parseWhich(triggerData[trigger].which);
182
- }
183
-
184
- countName = [trigger,state,'count'].join('-');
185
-
186
- handle = this.getTriggerHandle(triggerData[trigger], index);
187
-
188
- handle.data(countName, handle.data(countName) + 1 || 1);
189
-
190
- handle.on(trigger, $.extend({delay: 0, index: index}, triggerData[trigger]), this.handlers[state]);
191
- }
192
- };
193
-
194
- Dropdown.prototype.removeHandlers = function(state, index){
195
- var trigger, handle, triggerData, countName, eventCount;
196
-
197
- triggerData = this.triggers()[state];
198
-
199
- for (trigger in triggerData) {
200
- handle = this.getTriggerHandle(triggerData[trigger], index);
201
-
202
- countName = [trigger,state,'count'].join('-');
203
-
204
- eventCount = handle.data(countName) - 1;
205
-
206
- if (eventCount <= 0) {
207
- handle.unbind(trigger, this.handlers[state]);
208
-
209
- handle.data(countName, 0);
210
- } else {
211
- handle.data(countName, eventCount);
212
- }
213
- }
214
- };
215
-
216
- Dropdown.prototype.getHandle = function(index){
217
- var handles = this.root().find(this.dropdownHandleSelector());
218
-
219
- return (typeof index !== 'undefined' && index >= 0) ? handles.eq(index) : handles;
220
- };
221
-
222
- Dropdown.prototype.getExpander = function(index){
223
- var selectorString;
224
-
225
- if (typeof index === 'undefined' || isNaN(index)) {
226
- selectorString = this.dropdownExpanderSelector();
227
- } else {
228
- selectorString = this.dropdownExpanderSelector() + '[data-dropdown-index="' + index + '"]';
229
- }
230
-
231
- return this.root().find(selectorString);
232
- };
233
-
234
- Dropdown.prototype.setState = function(index, data, active){
235
- if (typeof index === 'undefined' || isNaN(index)) {
236
- return;
237
- }
238
-
239
- var state = active ? 'expand' : 'collapse',
240
- counterState = active ? 'collapse' : 'expand',
241
- delay = data.delay;
242
-
243
- this.timers[counterState][index] = clearTimeout(this.timers[counterState][index]);
244
-
245
- if (this.timers.throttle[index] || this.timers[state][index]) {
246
- return;
247
- }
248
-
249
- this.timers[state][index] = setTimeout(function(i, _state, _active, _data) {
250
- var expander = this.getExpander(i),
251
- handle = this.getHandle(i),
252
- self = this;
253
-
254
- this.timers[_state][i] = clearTimeout(this.timers[_state][i]);
255
-
256
- expander.toggleClass(this.activeDropdownClass(), _active);
257
- this.getHandle(i).toggleClass(this.activeDropdownClass(), _active);
258
-
259
- if (_active){
260
- handle.trigger('dropdownExpand', [i, _data]);
261
- } else {
262
- handle.trigger('dropdownCollapse', [i, _data]);
263
- }
264
-
265
- if (this.throttleDelay() > 0){
266
- this.timers.throttle[i] = setTimeout(function(){
267
- self.timers.throttle[i] = clearTimeout(self.timers.throttle[i]);
268
- }, this.throttleDelay());
269
- }
270
-
271
- }.bind(this, index, state, active, data), delay);
272
- };
273
-
274
- Dropdown.prototype.expand = function(index, data) {
275
- if (!this.getHandle(index).hasClass(this.activeDropdownClass())) {
276
- this.setState(index, data, true);
277
- }
278
- };
279
-
280
- Dropdown.prototype.collapse = function(index, data) {
281
- this.setState(index, data, false);
282
- };
283
-
284
- return Dropdown;
285
- });