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.
@@ -14,239 +14,240 @@
14
14
  * limitations under the License.
15
15
  */
16
16
 
17
- define('xooie/addons/tab_animation', ['jquery', 'xooie/addons/base'], function($, Base) {
18
-
19
- var Animation = Base('animation', function(){
20
- var self = this,
21
- isAnimating = false,
22
- animationQueue = [],
23
- callback = function(){
24
- if (animationQueue.length > 0) {
25
- animationQueue.shift()();
26
- } else {
27
- isAnimating = false;
28
- }
29
- };
30
-
31
- this.module.root.on('tabChange', function(event){
32
- animationQueue.push(function(){
33
- var direction;
34
-
35
- if (self.options.wrap) {
36
- if (event.toTab === 0 && event.fromTab === self.module.getPanel().length - 1) {
37
- direction = 1;
38
- } else if (event.toTab === self.module.getPanel().length - 1 && event.fromTab === 0) {
39
- direction = -1;
40
- } else {
41
- direction = event.toTab > event.fromTab ? 1 : -1;
42
- }
43
- } else {
44
- direction = event.toTab > event.fromTab ? 1 : -1;
45
- }
46
-
47
- self.animateToTab(event.toTab, event.fromTab , direction, callback);
48
- });
49
-
50
- if (!isAnimating) {
51
- isAnimating = true;
52
- callback();
53
- }
17
+ define('xooie/addons/tab_animation', ['jquery', 'xooie/addons/base', 'xooie/helpers'], function ($, Base, helpers) {
18
+ 'use strict';
19
+
20
+ var Animation = new Base('animation', function () {
21
+ var self, isAnimating, animationQueue;
22
+
23
+ function callback() {
24
+ if (animationQueue.length > 0) {
25
+ animationQueue.shift()();
26
+ } else {
27
+ isAnimating = false;
28
+ }
29
+ }
30
+
31
+ function getAnimation(el, properties) {
32
+ return function (cb) {
33
+ el.animate(properties, {
34
+ duration: self.options.duration,
35
+ easing: self.options.easing,
36
+ complete: function () {
37
+ $(this).attr('style', '');
38
+ cb();
39
+ }
54
40
  });
41
+ };
42
+ }
43
+
44
+ self = this;
45
+ isAnimating = false;
46
+ animationQueue = [];
47
+
48
+ this.module.root.on('tabChange', function (event) {
49
+ animationQueue.push(function () {
50
+ var direction;
51
+
52
+ if (self.options.wrap) {
53
+ if (event.toTab === 0 && event.fromTab === self.module.getPanel().length - 1) {
54
+ direction = 1;
55
+ } else if (event.toTab === self.module.getPanel().length - 1 && event.fromTab === 0) {
56
+ direction = -1;
57
+ } else {
58
+ direction = event.toTab > event.fromTab ? 1 : -1;
59
+ }
60
+ } else {
61
+ direction = event.toTab > event.fromTab ? 1 : -1;
62
+ }
55
63
 
56
- var getAnimation = function(el, properties) {
57
- return function(cb) {
58
- el.animate(properties, {
59
- duration: self.options.duration,
60
- easing: self.options.easing,
61
- complete: function() {
62
- $(this).attr('style', '');
63
- cb();
64
- }
65
- });
66
- };
67
- };
68
-
69
- this.animationMethods = {
70
-
71
- "horizontal": function(to, from, container, direction){
72
- var calls = [];
73
-
74
- container.css({
75
- overflow: 'hidden',
76
- height: from.outerHeight(),
77
- width: container.width()
78
- });
79
-
80
- from.css({
81
- display: 'block',
82
- position: 'absolute',
83
- top: 0,
84
- left: 0,
85
- width: from.width(),
86
- height: from.height()
87
- });
88
-
89
- to.css({
90
- display: 'block',
91
- position: 'absolute',
92
- top: 0,
93
- left: (direction === -1) ? -container.innerWidth() : container.innerWidth(),
94
- width: to.width(),
95
- height: to.height()
96
- });
97
-
98
- calls.push(
99
- getAnimation(from, {
100
- left: (direction === -1) ? container.innerWidth() : -container.innerWidth()
101
- }),
102
-
103
- getAnimation(to, {
104
- left: 0
105
- }),
106
-
107
- getAnimation(container, {
108
- height: to.outerHeight()
109
- })
110
- );
111
-
112
- return calls;
113
- },
114
-
115
- "vertical": function(to, from, container, direction){
116
- var calls = [];
117
-
118
- container.css({
119
- overflow: 'hidden',
120
- height: from.outerHeight(),
121
- width: container.width()
122
- });
123
-
124
- from.css({
125
- display: 'block',
126
- position: 'absolute',
127
- top: 0,
128
- left: 0,
129
- width: from.width(),
130
- height: from.height()
131
- });
132
-
133
- to.css({
134
- display: 'block',
135
- position: 'absolute',
136
- top: (direction === -1) ? -container.innerHeight() : container.innerHeight(),
137
- left: 0,
138
- width: to.width(),
139
- height: to.height()
140
- });
141
-
142
- calls.push(
143
- getAnimation(from, {
144
- top: (direction === -1) ? container.innerHeight() : -container.innerHeight()
145
- }),
146
-
147
- getAnimation(to, {
148
- top: 0
149
- }),
150
-
151
- getAnimation(container, {
152
- height: to.outerHeight()
153
- })
154
- );
155
-
156
- return calls;
157
-
158
- },
159
-
160
- "fade": function(to, from, container, direction) {
161
- var calls = [];
162
-
163
- container.css({
164
- overflow: 'hidden',
165
- height: from.outerHeight(),
166
- width: container.width()
167
- });
168
-
169
- from.css({
170
- display: 'block',
171
- position: 'absolute',
172
- opacity: 1.0,
173
- top: 0,
174
- left: 0,
175
- width: from.width(),
176
- height: from.height()
177
- });
178
-
179
- to.css({
180
- display: 'block',
181
- position: 'absolute',
182
- opacity: 0,
183
- top: 0,
184
- left: 0,
185
- width: to.width(),
186
- height: to.height()
187
- });
188
-
189
- calls.push(
190
- getAnimation(from, {
191
- opacity: 0
192
- }),
193
-
194
- getAnimation(to, {
195
- opacity: 1.0
196
- }),
197
-
198
- getAnimation(container, {
199
- height: to.outerHeight()
200
- })
201
- );
202
-
203
- return calls;
204
-
205
- }
206
- };
207
- });
64
+ self.animateToTab(event.toTab, event.fromTab, direction, callback);
65
+ });
208
66
 
209
- Animation.setDefaultOptions({
210
- panelContainerSelector: '[data-role="panel-container"]',
211
- animationMode: 'horizontal', //Can be horizontal, vertical or fade
212
- easing: 'linear', //TODO: load other easings if necessary
213
- duration: 500,
214
- wrap: false
67
+ if (!isAnimating) {
68
+ isAnimating = true;
69
+ callback();
70
+ }
215
71
  });
216
72
 
217
- $.extend(Animation.prototype, {
218
- animateToTab: function(index, currentIndex, direction, callback) {
219
- if (index === currentIndex || index < 0 || index >= this.module.getPanel().length) {
220
- return;
221
- }
222
-
223
- var from = this.module.getPanel(currentIndex),
224
- to = this.module.getPanel(index),
225
- container = from.parents(this.options.panelContainerSelector),
226
- count = 1,
227
- calls, i,
228
- step_callback = function() {
229
- count--;
230
-
231
- if (count === 0 && callback) {
232
- callback();
233
- }
234
- };
235
-
236
- if (typeof this.animationMethods[this.options.animationMode] === 'function') {
237
- calls = this.animationMethods[this.options.animationMode](to, from, container, direction);
238
-
239
- for (i = 0; i < calls.length; i++) {
240
- count++;
241
- calls[i](step_callback);
242
- }
243
-
244
- step_callback();
245
- }
73
+ this.animationMethods = {
74
+ "horizontal": function (to, from, container, direction) {
75
+ var calls = [];
76
+
77
+ container.css({
78
+ overflow: 'hidden',
79
+ height: from.outerHeight(),
80
+ width: container.width()
81
+ });
82
+
83
+ from.css({
84
+ display: 'block',
85
+ position: 'absolute',
86
+ top: 0,
87
+ left: 0,
88
+ width: from.width(),
89
+ height: from.height()
90
+ });
91
+
92
+ to.css({
93
+ display: 'block',
94
+ position: 'absolute',
95
+ top: 0,
96
+ left: (direction === -1) ? -container.innerWidth() : container.innerWidth(),
97
+ width: to.width(),
98
+ height: to.height()
99
+ });
100
+
101
+ calls.push(
102
+ getAnimation(from, {
103
+ left: (direction === -1) ? container.innerWidth() : -container.innerWidth()
104
+ }),
105
+
106
+ getAnimation(to, {
107
+ left: 0
108
+ }),
109
+
110
+ getAnimation(container, {
111
+ height: to.outerHeight()
112
+ })
113
+ );
114
+
115
+ return calls;
116
+ },
117
+
118
+ "vertical": function (to, from, container, direction) {
119
+ var calls = [];
120
+
121
+ container.css({
122
+ overflow: 'hidden',
123
+ height: from.outerHeight(),
124
+ width: container.width()
125
+ });
126
+
127
+ from.css({
128
+ display: 'block',
129
+ position: 'absolute',
130
+ top: 0,
131
+ left: 0,
132
+ width: from.width(),
133
+ height: from.height()
134
+ });
135
+
136
+ to.css({
137
+ display: 'block',
138
+ position: 'absolute',
139
+ top: (direction === -1) ? -container.innerHeight() : container.innerHeight(),
140
+ left: 0,
141
+ width: to.width(),
142
+ height: to.height()
143
+ });
144
+
145
+ calls.push(
146
+ getAnimation(from, {
147
+ top: (direction === -1) ? container.innerHeight() : -container.innerHeight()
148
+ }),
149
+
150
+ getAnimation(to, {
151
+ top: 0
152
+ }),
153
+
154
+ getAnimation(container, {
155
+ height: to.outerHeight()
156
+ })
157
+ );
158
+
159
+ return calls;
160
+ },
161
+
162
+ "fade": function (to, from, container) {
163
+ var calls = [];
164
+
165
+ container.css({
166
+ overflow: 'hidden',
167
+ height: from.outerHeight(),
168
+ width: container.width()
169
+ });
170
+
171
+ from.css({
172
+ display: 'block',
173
+ position: 'absolute',
174
+ opacity: 1.0,
175
+ top: 0,
176
+ left: 0,
177
+ width: from.width(),
178
+ height: from.height()
179
+ });
180
+
181
+ to.css({
182
+ display: 'block',
183
+ position: 'absolute',
184
+ opacity: 0,
185
+ top: 0,
186
+ left: 0,
187
+ width: to.width(),
188
+ height: to.height()
189
+ });
190
+
191
+ calls.push(
192
+ getAnimation(from, {
193
+ opacity: 0
194
+ }),
195
+
196
+ getAnimation(to, {
197
+ opacity: 1.0
198
+ }),
199
+
200
+ getAnimation(container, {
201
+ height: to.outerHeight()
202
+ })
203
+ );
204
+
205
+ return calls;
206
+ }
207
+ };
208
+ });
209
+
210
+ Animation.setDefaultOptions({
211
+ panelContainerSelector: '[data-role="panel-container"]',
212
+ animationMode: 'horizontal', //Can be horizontal, vertical or fade
213
+ easing: 'linear', //TODO: load other easings if necessary
214
+ duration: 500,
215
+ wrap: false
216
+ });
217
+
218
+ $.extend(Animation.prototype, {
219
+ animateToTab: function (index, currentIndex, direction, callback) {
220
+ var from, to, container, count, calls, i;
221
+
222
+ function step_callback() {
223
+ count -= 1;
224
+
225
+ if (count === 0 && callback) {
226
+ callback();
246
227
  }
247
- });
228
+ }
248
229
 
249
- return Animation;
230
+ if (index === currentIndex || index < 0 || index >= this.module.getPanel().length) {
231
+ return;
232
+ }
233
+
234
+ from = this.module.getPanel(currentIndex);
235
+ to = this.module.getPanel(index);
236
+ container = from.parents(this.options.panelContainerSelector);
237
+ count = 1;
238
+
239
+ if (helpers.isFunction(this.animationMethods[this.options.animationMode])) {
240
+ calls = this.animationMethods[this.options.animationMode](to, from, container, direction);
241
+
242
+ for (i = 0; i < calls.length; i += 1) {
243
+ count += 1;
244
+ calls[i](step_callback);
245
+ }
250
246
 
251
- });
247
+ step_callback();
248
+ }
249
+ }
250
+ });
252
251
 
252
+ return Animation;
253
+ });
@@ -0,0 +1,150 @@
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/addons/tab_automation', ['jquery', 'xooie/addons/base'], function($, Base) {
18
+ var outOfRange = function(lower, upper, point, normalize) {
19
+ var n = ( Math.min(lower, point) - lower ) || ( Math.max(upper, point) - upper );
20
+ var denominator = (normalize) ? Math.max(Math.abs(n),1) : 1;
21
+ return n/denominator;
22
+ };
23
+
24
+
25
+ var Automation = Base('automation', function(){
26
+ var self = this,
27
+ focusTable = {},
28
+ setFocus;
29
+
30
+ this._tabChangeTimer = 0;
31
+
32
+ this._canRotate = true;
33
+
34
+ //automationInstances.push(this);
35
+
36
+ setFocus = function(method, state) {
37
+ var prop;
38
+
39
+ focusTable[method] = state;
40
+
41
+ if (state) {
42
+ for (prop in focusTable) {
43
+ state = state && focusTable[prop];
44
+ }
45
+ }
46
+
47
+ self._canRotate = state;
48
+ };
49
+
50
+ this.module.root.on({
51
+ 'mouseenter': function(){
52
+ setFocus('mouse', false);
53
+ self.stop();
54
+ },
55
+ 'focus': function(){
56
+ setFocus('keyboard', false);
57
+ self.stop();
58
+ },
59
+ 'mouseleave': function(){
60
+ setFocus('mouse', true);
61
+ self.start();
62
+ },
63
+ 'blur': function(){
64
+ setFocus('mouse', true);
65
+ self.start();
66
+ },
67
+ 'tabChange': function(){
68
+ self.start();
69
+ }
70
+ });
71
+
72
+ this.module.root.find('*').on({
73
+ 'focus': function(){
74
+ setFocus('keyboard', false);
75
+ self.stop();
76
+ },
77
+ 'blur': function(){
78
+ setFocus('keyboard', true);
79
+ self.start();
80
+ }
81
+ });
82
+
83
+ this.start();
84
+ });
85
+
86
+ Automation.setDefaultOptions({
87
+ direction: 1,
88
+ delay: 10000
89
+ });
90
+
91
+ $.extend(Automation.prototype, {
92
+ start: function(){
93
+ var self = this;
94
+
95
+ if (this._tabChangeTimer) {
96
+ this.stop();
97
+ }
98
+
99
+ this._tabChangeTimer = setTimeout(function(){
100
+ self.stop();
101
+
102
+ if (!self._canRotate){
103
+ return;
104
+ }
105
+
106
+ if (self.outOfRange()) {
107
+ $(window).on('scroll', function(event){
108
+ if (!self.outOfRange()) {
109
+ self.start();
110
+ $(window).off(event);
111
+ }
112
+ //TODO: add logic to remove scroll event if the elementis no longer in the DOM
113
+ });
114
+ return;
115
+ }
116
+
117
+ var newTab;
118
+
119
+ if (self.module._currentTab + self.options.direction >= self.module.getPanel().length) {
120
+ newTab = 0;
121
+ } else if (self.module._currentTab + self.options.direction < 0) {
122
+ newTab = self.module.getPanel().length - 1;
123
+ } else {
124
+ newTab = self.module._currentTab + self.options.direction;
125
+ }
126
+
127
+ self.module.switchToTab(newTab);
128
+ }, this.options.delay);
129
+
130
+ },
131
+
132
+ stop: function() {
133
+ this._tabChangeTimer = clearTimeout(this._tabChangeTimer);
134
+ },
135
+
136
+ //Will return true if the tab module is out of range (ie, both the top and bottom are out of range)
137
+ outOfRange: function(){
138
+ var lower, upper, top, bottom;
139
+
140
+ lower = $(window).scrollTop();
141
+ upper = lower + $(window).height();
142
+ top = this.module.root.offset().top;
143
+ bottom = top + this.module.root.outerHeight(true);
144
+
145
+ return !!(outOfRange(lower, upper, top, true) && outOfRange(lower, upper, bottom, true));
146
+ }
147
+ });
148
+
149
+ return Automation;
150
+ });