xooie 1.0.4 → 1.0.5

data/vendor/assets/javascripts/xooie/addons/tab_animation.js

@@ -14,239 +14,240 @@
 *   limitations under the License.
 */
 
-define('xooie/addons/tab_animation', ['jquery', 'xooie/addons/base'], function($, Base) {
-
-    var Animation = Base('animation', function(){
-        var self = this,
-            isAnimating = false,
-            animationQueue = [],
-            callback = function(){
-                if (animationQueue.length > 0) {
-                    animationQueue.shift()();
-                } else {
-                    isAnimating = false;
-                }
-            };
-
-        this.module.root.on('tabChange', function(event){
-            animationQueue.push(function(){
-                var direction;
-
-                if (self.options.wrap) {
-                    if (event.toTab === 0 && event.fromTab === self.module.getPanel().length - 1) {
-                        direction = 1;
-                    } else if (event.toTab === self.module.getPanel().length - 1 && event.fromTab === 0) {
-                        direction = -1;
-                    } else {
-                        direction = event.toTab > event.fromTab ? 1 : -1;
-                    }
-                } else {
-                    direction = event.toTab > event.fromTab ? 1 : -1;
-                }
-
-                self.animateToTab(event.toTab, event.fromTab , direction, callback);
-            });
-
-            if (!isAnimating) {
-                isAnimating = true;
-                callback();
-            }
+define('xooie/addons/tab_animation', ['jquery', 'xooie/addons/base', 'xooie/helpers'], function ($, Base, helpers) {
+  'use strict';
+
+  var Animation = new Base('animation', function () {
+    var self, isAnimating, animationQueue;
+
+    function callback() {
+      if (animationQueue.length > 0) {
+        animationQueue.shift()();
+      } else {
+        isAnimating = false;
+      }
+    }
+
+    function getAnimation(el, properties) {
+      return function (cb) {
+        el.animate(properties, {
+          duration: self.options.duration,
+          easing: self.options.easing,
+          complete: function () {
+            $(this).attr('style', '');
+            cb();
+          }
         });
+      };
+    }
+
+    self = this;
+    isAnimating = false;
+    animationQueue = [];
+
+    this.module.root.on('tabChange', function (event) {
+      animationQueue.push(function () {
+        var direction;
+
+        if (self.options.wrap) {
+          if (event.toTab === 0 && event.fromTab === self.module.getPanel().length - 1) {
+            direction = 1;
+          } else if (event.toTab === self.module.getPanel().length - 1 && event.fromTab === 0) {
+            direction = -1;
+          } else {
+            direction = event.toTab > event.fromTab ? 1 : -1;
+          }
+        } else {
+          direction = event.toTab > event.fromTab ? 1 : -1;
+        }
 
-        var getAnimation = function(el, properties) {
-            return function(cb) {
-                el.animate(properties, {
-                    duration: self.options.duration,
-                    easing: self.options.easing,
-                    complete: function() {
-                        $(this).attr('style', '');
-                        cb();
-                    }
-                });
-            };
-        };
-
-        this.animationMethods = {
-
-            "horizontal": function(to, from, container, direction){
-                var calls = [];
-
-                container.css({
-                    overflow: 'hidden',
-                    height: from.outerHeight(),
-                    width: container.width()
-                });
-
-                from.css({
-                    display: 'block',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: from.width(),
-                    height: from.height()
-                });
-
-                to.css({
-                    display: 'block',
-                    position: 'absolute',
-                    top: 0,
-                    left: (direction === -1) ? -container.innerWidth() : container.innerWidth(),
-                    width: to.width(),
-                    height: to.height()
-                });
-
-                calls.push(
-                    getAnimation(from, {
-                        left: (direction === -1) ? container.innerWidth() : -container.innerWidth()
-                    }),
-
-                    getAnimation(to, {
-                        left: 0
-                    }),
-
-                    getAnimation(container, {
-                        height: to.outerHeight()
-                    })
-                );
-
-                return calls;
-            },
-
-            "vertical": function(to, from, container, direction){
-                var calls = [];
-
-                container.css({
-                    overflow: 'hidden',
-                    height: from.outerHeight(),
-                    width: container.width()
-                });
-
-                from.css({
-                    display: 'block',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: from.width(),
-                    height: from.height()
-                });
-
-                to.css({
-                    display: 'block',
-                    position: 'absolute',
-                    top: (direction === -1) ? -container.innerHeight() : container.innerHeight(),
-                    left: 0,
-                    width: to.width(),
-                    height: to.height()
-                });
-
-                calls.push(
-                    getAnimation(from, {
-                        top: (direction === -1) ? container.innerHeight() : -container.innerHeight()
-                    }),
-
-                    getAnimation(to, {
-                        top: 0
-                    }),
-
-                    getAnimation(container, {
-                        height: to.outerHeight()
-                    })
-                );
-
-                return calls;
-
-            },
-
-            "fade": function(to, from, container, direction) {
-                var calls = [];
-
-                container.css({
-                    overflow: 'hidden',
-                    height: from.outerHeight(),
-                    width: container.width()
-                });
-
-                from.css({
-                    display: 'block',
-                    position: 'absolute',
-                    opacity: 1.0,
-                    top: 0,
-                    left: 0,
-                    width: from.width(),
-                    height: from.height()
-                });
-
-                to.css({
-                    display: 'block',
-                    position: 'absolute',
-                    opacity: 0,
-                    top: 0,
-                    left: 0,
-                    width: to.width(),
-                    height: to.height()
-                });
-
-                calls.push(
-                    getAnimation(from, {
-                        opacity: 0
-                    }),
-
-                    getAnimation(to, {
-                        opacity: 1.0
-                    }),
-
-                    getAnimation(container, {
-                        height: to.outerHeight()
-                    })
-                );
-
-                return calls;
-
-            }
-        };
-    });
+        self.animateToTab(event.toTab, event.fromTab, direction, callback);
+      });
 
-    Animation.setDefaultOptions({
-        panelContainerSelector: '[data-role="panel-container"]',
-        animationMode: 'horizontal', //Can be horizontal, vertical or fade
-        easing: 'linear', //TODO: load other easings if necessary
-        duration: 500,
-        wrap: false
+      if (!isAnimating) {
+        isAnimating = true;
+        callback();
+      }
     });
 
-    $.extend(Animation.prototype, {
-        animateToTab: function(index, currentIndex, direction, callback) {
-            if (index === currentIndex || index < 0 || index >= this.module.getPanel().length) {
-                return;
-            }
-
-            var from = this.module.getPanel(currentIndex),
-                to = this.module.getPanel(index),
-                container = from.parents(this.options.panelContainerSelector),
-                count = 1,
-                calls, i,
-                step_callback = function() {
-                    count--;
-
-                    if (count === 0 && callback) {
-                        callback();
-                    }
-                };
-
-            if (typeof this.animationMethods[this.options.animationMode] === 'function') {
-                calls = this.animationMethods[this.options.animationMode](to, from, container, direction);
-
-                for (i = 0; i < calls.length; i++) {
-                    count++;
-                    calls[i](step_callback);
-                }
-
-                step_callback();
-            }
+    this.animationMethods = {
+      "horizontal": function (to, from, container, direction) {
+        var calls = [];
+
+        container.css({
+          overflow: 'hidden',
+          height: from.outerHeight(),
+          width: container.width()
+        });
+
+        from.css({
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: from.width(),
+          height: from.height()
+        });
+
+        to.css({
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          left: (direction === -1) ? -container.innerWidth() : container.innerWidth(),
+          width: to.width(),
+          height: to.height()
+        });
+
+        calls.push(
+          getAnimation(from, {
+            left: (direction === -1) ? container.innerWidth() : -container.innerWidth()
+          }),
+
+          getAnimation(to, {
+            left: 0
+          }),
+
+          getAnimation(container, {
+            height: to.outerHeight()
+          })
+        );
+
+        return calls;
+      },
+
+      "vertical": function (to, from, container, direction) {
+        var calls = [];
+
+        container.css({
+          overflow: 'hidden',
+          height: from.outerHeight(),
+          width: container.width()
+        });
+
+        from.css({
+          display: 'block',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: from.width(),
+          height: from.height()
+        });
+
+        to.css({
+          display: 'block',
+          position: 'absolute',
+          top: (direction === -1) ? -container.innerHeight() : container.innerHeight(),
+          left: 0,
+          width: to.width(),
+          height: to.height()
+        });
+
+        calls.push(
+          getAnimation(from, {
+            top: (direction === -1) ? container.innerHeight() : -container.innerHeight()
+          }),
+
+          getAnimation(to, {
+            top: 0
+          }),
+
+          getAnimation(container, {
+            height: to.outerHeight()
+          })
+        );
+
+        return calls;
+      },
+
+      "fade": function (to, from, container) {
+        var calls = [];
+
+        container.css({
+          overflow: 'hidden',
+          height: from.outerHeight(),
+          width: container.width()
+        });
+
+        from.css({
+          display: 'block',
+          position: 'absolute',
+          opacity: 1.0,
+          top: 0,
+          left: 0,
+          width: from.width(),
+          height: from.height()
+        });
+
+        to.css({
+          display: 'block',
+          position: 'absolute',
+          opacity: 0,
+          top: 0,
+          left: 0,
+          width: to.width(),
+          height: to.height()
+        });
+
+        calls.push(
+          getAnimation(from, {
+            opacity: 0
+          }),
+
+          getAnimation(to, {
+            opacity: 1.0
+          }),
+
+          getAnimation(container, {
+            height: to.outerHeight()
+          })
+        );
+
+        return calls;
+      }
+    };
+  });
+
+  Animation.setDefaultOptions({
+    panelContainerSelector: '[data-role="panel-container"]',
+    animationMode: 'horizontal', //Can be horizontal, vertical or fade
+    easing: 'linear', //TODO: load other easings if necessary
+    duration: 500,
+    wrap: false
+  });
+
+  $.extend(Animation.prototype, {
+    animateToTab: function (index, currentIndex, direction, callback) {
+      var from, to, container, count, calls, i;
+
+      function step_callback() {
+        count -= 1;
+
+        if (count === 0 && callback) {
+          callback();
         }
-    });
+      }
 
-    return Animation;
+      if (index === currentIndex || index < 0 || index >= this.module.getPanel().length) {
+        return;
+      }
+
+      from = this.module.getPanel(currentIndex);
+      to = this.module.getPanel(index);
+      container = from.parents(this.options.panelContainerSelector);
+      count = 1;
+
+      if (helpers.isFunction(this.animationMethods[this.options.animationMode])) {
+        calls = this.animationMethods[this.options.animationMode](to, from, container, direction);
+
+        for (i = 0; i < calls.length; i += 1) {
+          count += 1;
+          calls[i](step_callback);
+        }
 
-});
+        step_callback();
+      }
+    }
+  });
 
+  return Animation;
+});

data/vendor/assets/javascripts/xooie/addons/tab_automation.js

@@ -0,0 +1,150 @@
+/*
+*   Copyright 2012 Comcast
+*
+*   Licensed under the Apache License, Version 2.0 (the "License");
+*   you may not use this file except in compliance with the License.
+*   You may obtain a copy of the License at
+*
+*       http://www.apache.org/licenses/LICENSE-2.0
+*
+*   Unless required by applicable law or agreed to in writing, software
+*   distributed under the License is distributed on an "AS IS" BASIS,
+*   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*   See the License for the specific language governing permissions and
+*   limitations under the License.
+*/
+
+define('xooie/addons/tab_automation', ['jquery', 'xooie/addons/base'], function($, Base) {
+    var outOfRange = function(lower, upper, point, normalize) {
+        var n = ( Math.min(lower, point) - lower ) || ( Math.max(upper, point) - upper );
+        var denominator = (normalize) ? Math.max(Math.abs(n),1) : 1;
+        return n/denominator;
+    };
+
+
+    var Automation = Base('automation', function(){
+        var self = this,
+            focusTable = {},
+            setFocus;
+
+        this._tabChangeTimer = 0;
+
+        this._canRotate = true;
+
+        //automationInstances.push(this);
+
+        setFocus = function(method, state) {
+            var prop;
+
+            focusTable[method] = state;
+
+            if (state) {
+                for (prop in focusTable) {
+                    state = state && focusTable[prop];
+                }
+            }
+
+            self._canRotate = state;
+        };
+
+        this.module.root.on({
+            'mouseenter': function(){
+                setFocus('mouse', false);
+                self.stop();
+            },
+            'focus': function(){
+                setFocus('keyboard', false);
+                self.stop();
+            },
+            'mouseleave': function(){
+                setFocus('mouse', true);
+                self.start();
+            },
+            'blur': function(){
+                setFocus('mouse', true);
+                self.start();
+            },
+            'tabChange': function(){
+                self.start();
+            }
+        });
+
+        this.module.root.find('*').on({
+           'focus': function(){
+                setFocus('keyboard', false);
+                self.stop();
+            },
+            'blur': function(){
+                setFocus('keyboard', true);
+                self.start();
+            }
+        });
+
+        this.start();
+    });
+
+    Automation.setDefaultOptions({
+        direction: 1,
+        delay: 10000
+    });
+
+    $.extend(Automation.prototype, {
+        start: function(){
+            var self = this;
+
+            if (this._tabChangeTimer) {
+                this.stop();
+            }
+
+            this._tabChangeTimer = setTimeout(function(){
+                self.stop();
+
+                if (!self._canRotate){
+                    return;
+                }
+
+                if (self.outOfRange()) {
+                    $(window).on('scroll', function(event){
+                        if (!self.outOfRange()) {
+                            self.start();
+                            $(window).off(event);
+                        }
+                        //TODO: add logic to remove scroll event if the elementis no longer in the DOM
+                    });
+                    return;
+                }
+
+                var newTab;
+
+                if (self.module._currentTab + self.options.direction >= self.module.getPanel().length) {
+                    newTab = 0;
+                } else if (self.module._currentTab + self.options.direction < 0) {
+                    newTab = self.module.getPanel().length - 1;
+                } else {
+                    newTab = self.module._currentTab + self.options.direction;
+                }
+
+                self.module.switchToTab(newTab);
+            }, this.options.delay);
+
+        },
+
+        stop: function() {
+            this._tabChangeTimer = clearTimeout(this._tabChangeTimer);
+        },
+
+        //Will return true if the tab module is out of range (ie, both the top and bottom are out of range)
+        outOfRange: function(){
+            var lower, upper, top, bottom;
+
+            lower = $(window).scrollTop();
+            upper = lower + $(window).height();
+            top = this.module.root.offset().top;
+            bottom = top + this.module.root.outerHeight(true);
+
+            return !!(outOfRange(lower, upper, top, true) && outOfRange(lower, upper, bottom, true));
+        }
+    });
+
+    return Automation;
+});