extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/fx/Easing.js

@@ -1,136 +0,0 @@
-/**
- * @class Ext.fx.Easing
- *
- * This class contains a series of function definitions used to modify values during an animation.
- * They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
- * speed over its duration. The following options are available: 
- *
- * - linear The default easing type
- * - backIn
- * - backOut
- * - bounceIn
- * - bounceOut
- * - ease
- * - easeIn
- * - easeOut
- * - easeInOut
- * - elasticIn
- * - elasticOut
- * - cubic-bezier(x1, y1, x2, y2)
- *
- * Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
- * specification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
- * be in the range [0, 1] or the definition is invalid.
- *
- * [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
- *
- * @singleton
- */
-Ext.ns('Ext.fx');
-
-Ext.require('Ext.fx.CubicBezier', function() {
-    var math = Math,
-        pi = math.PI,
-        pow = math.pow,
-        sin = math.sin,
-        sqrt = math.sqrt,
-        abs = math.abs,
-        backInSeed = 1.70158;
-    Ext.fx.Easing = {
-        // ease: Ext.fx.CubicBezier.cubicBezier(0.25, 0.1, 0.25, 1),
-        // linear: Ext.fx.CubicBezier.cubicBezier(0, 0, 1, 1),
-        // 'ease-in': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
-        // 'ease-out': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
-        // 'ease-in-out': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1),
-        // 'easeIn': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 1, 1),
-        // 'easeOut': Ext.fx.CubicBezier.cubicBezier(0, 0.58, 1, 1),
-        // 'easeInOut': Ext.fx.CubicBezier.cubicBezier(0.42, 0, 0.58, 1)
-    };
-
-    Ext.apply(Ext.fx.Easing, {
-        linear: function(n) {
-            return n;
-        },
-        ease: function(n) {
-            var q = 0.07813 - n / 2,
-                alpha = -0.25,
-                Q = sqrt(0.0066 + q * q),
-                x = Q - q,
-                X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
-                y = -Q - q,
-                Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
-                t = X + Y + 0.25;
-            return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
-        },
-        easeIn: function (n) {
-            return pow(n, 1.7);
-        },
-        easeOut: function (n) {
-            return pow(n, 0.48);
-        },
-        easeInOut: function(n) {
-            var q = 0.48 - n / 1.04,
-                Q = sqrt(0.1734 + q * q),
-                x = Q - q,
-                X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
-                y = -Q - q,
-                Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
-                t = X + Y + 0.5;
-            return (1 - t) * 3 * t * t + t * t * t;
-        },
-        backIn: function (n) {
-            return n * n * ((backInSeed + 1) * n - backInSeed);
-        },
-        backOut: function (n) {
-            n = n - 1;
-            return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
-        },
-        elasticIn: function (n) {
-            if (n === 0 || n === 1) {
-                return n;
-            }
-            var p = 0.3,
-                s = p / 4;
-            return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
-        },
-        elasticOut: function (n) {
-            return 1 - Ext.fx.Easing.elasticIn(1 - n);
-        },
-        bounceIn: function (n) {
-            return 1 - Ext.fx.Easing.bounceOut(1 - n);
-        },
-        bounceOut: function (n) {
-            var s = 7.5625,
-                p = 2.75,
-                l;
-            if (n < (1 / p)) {
-                l = s * n * n;
-            } else {
-                if (n < (2 / p)) {
-                    n -= (1.5 / p);
-                    l = s * n * n + 0.75;
-                } else {
-                    if (n < (2.5 / p)) {
-                        n -= (2.25 / p);
-                        l = s * n * n + 0.9375;
-                    } else {
-                        n -= (2.625 / p);
-                        l = s * n * n + 0.984375;
-                    }
-                }
-            }
-            return l;
-        }
-    });
-    Ext.apply(Ext.fx.Easing, {
-        'back-in': Ext.fx.Easing.backIn,
-        'back-out': Ext.fx.Easing.backOut,
-        'ease-in': Ext.fx.Easing.easeIn,
-        'ease-out': Ext.fx.Easing.easeOut,
-        'elastic-in': Ext.fx.Easing.elasticIn,
-        'elastic-out': Ext.fx.Easing.elasticIn,
-        'bounce-in': Ext.fx.Easing.bounceIn,
-        'bounce-out': Ext.fx.Easing.bounceOut,
-        'ease-in-out': Ext.fx.Easing.easeInOut
-    });
-});

data/app/assets/javascripts/src/fx/Manager.js

@@ -1,353 +0,0 @@
-/**
- * @class Ext.fx.Manager
- * Animation Manager which keeps track of all current animations and manages them on a frame by frame basis.
- * @private
- * @singleton
- */
-
-Ext.define('Ext.fx.Manager', {
-
-    /* Begin Definitions */
-
-    singleton: true,
-
-    requires: ['Ext.util.MixedCollection',
-               'Ext.fx.target.Element',
-               'Ext.fx.target.ElementCSS',
-               'Ext.fx.target.CompositeElement',
-               'Ext.fx.target.CompositeElementCSS',
-               'Ext.fx.target.Sprite',
-               'Ext.fx.target.CompositeSprite',
-               'Ext.fx.target.Component'],
-
-    mixins: {
-        queue: 'Ext.fx.Queue'
-    },
-
-    /* End Definitions */
-
-    constructor: function() {
-        this.items = new Ext.util.MixedCollection();
-        this.mixins.queue.constructor.call(this);
-
-        // this.requestAnimFrame = (function() {
-        //     var raf = window.requestAnimationFrame ||
-        //               window.webkitRequestAnimationFrame ||
-        //               window.mozRequestAnimationFrame ||
-        //               window.oRequestAnimationFrame ||
-        //               window.msRequestAnimationFrame;
-        //     if (raf) {
-        //         return function(callback, element) {
-        //             raf(callback);
-        //         };
-        //     }
-        //     else {
-        //         return function(callback, element) {
-        //             window.setTimeout(callback, Ext.fx.Manager.interval);
-        //         };
-        //     }
-        // })();
-    },
-
-    /**
-     * @cfg {Number} interval Default interval in miliseconds to calculate each frame.  Defaults to 16ms (~60fps)
-     */
-    interval: 16,
-
-    /**
-     * @cfg {Boolean} forceJS Force the use of JavaScript-based animation instead of CSS3 animation, even when CSS3
-     * animation is supported by the browser. This defaults to true currently, as CSS3 animation support is still
-     * considered experimental at this time, and if used should be thouroughly tested across all targeted browsers.
-     * @protected
-     */
-    forceJS: true,
-
-    // @private Target factory
-    createTarget: function(target) {
-        var me = this,
-            useCSS3 = !me.forceJS && Ext.supports.Transitions,
-            targetObj;
-
-        me.useCSS3 = useCSS3;
-
-        if (target) {
-            // dom element, string or fly
-            if (target.tagName || Ext.isString(target) || target.isFly) {
-                target = Ext.get(target);
-                targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);
-            }
-            // Element
-            else if (target.dom) {
-                targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);
-            }
-            // Element Composite
-            else if (target.isComposite) {
-                targetObj = new Ext.fx.target['CompositeElement' + (useCSS3 ? 'CSS' : '')](target);
-            }
-            // Draw Sprite
-            else if (target.isSprite) {
-                targetObj = new Ext.fx.target.Sprite(target);
-            }
-            // Draw Sprite Composite
-            else if (target.isCompositeSprite) {
-                targetObj = new Ext.fx.target.CompositeSprite(target);
-            }
-            // Component
-            else if (target.isComponent) {
-                targetObj = new Ext.fx.target.Component(target);
-            }
-            else if (target.isAnimTarget) {
-                return target;
-            }
-            else {
-                return null;
-            }
-            me.targets.add(targetObj);
-            return targetObj;
-        }
-        else {
-            return null;
-        }
-    },
-
-    /**
-     * Add an Anim to the manager. This is done automatically when an Anim instance is created.
-     * @param {Ext.fx.Anim} anim
-     */
-    addAnim: function(anim) {
-        var items = this.items,
-            task = this.task;
-
-        // Make sure we use the anim's id, not the anim target's id here. The anim id will be unique on
-        // each call to addAnim. `anim.target` is the DOM element being targeted, and since multiple animations
-        // can target a single DOM node concurrently, the target id cannot be assumned to be unique.
-        items.add(anim.id, anim);
-        //Ext.log('+     added anim ', anim.id, ', target: ', anim.target.getId(), ', duration: ', anim.duration);
-
-        // Start the timer if not already running
-        if (!task && items.length) {
-            task = this.task = {
-                run: this.runner,
-                interval: this.interval,
-                scope: this
-            };
-            //Ext.log('--->> Starting task');
-            Ext.TaskManager.start(task);
-        }
-    },
-
-    /**
-     * Remove an Anim from the manager. This is done automatically when an Anim ends.
-     * @param {Ext.fx.Anim} anim
-     */
-    removeAnim: function(anim) {
-        var me = this,
-            items = me.items,
-            task = me.task;
-                
-        items.removeAtKey(anim.id);
-        //Ext.log('    X removed anim ', anim.id, ', target: ', anim.target.getId(), ', frames: ', anim.frameCount, ', item count: ', items.length);
-        
-        // Stop the timer if there are no more managed Anims
-        if (task && !items.length) {
-            //Ext.log('[]--- Stopping task');
-            Ext.TaskManager.stop(task);
-            delete me.task;
-        }
-    },
-
-    /**
-     * @private
-     * Runner function being called each frame
-     */
-    runner: function() {
-        var me = this,
-            items = me.items.getRange(),
-            i = 0,
-            len = items.length,
-            anim;
-
-        //Ext.log('      executing anim runner task with ', len, ' items');
-        me.targetArr = {};
-
-        // Single timestamp for all animations this interval
-        me.timestamp = new Date();
-        
-        // Loop to start any new animations first before looping to
-        // execute running animations (which will also include all animations
-        // started in this loop). This is a subtle difference from simply
-        // iterating in one loop and starting then running each animation,
-        // but separating the loops is necessary to ensure that all new animations
-        // actually kick off prior to existing ones regardless of array order.
-        // Otherwise in edge cases when there is excess latency in overall
-        // performance, allowing existing animations to run before new ones can
-        // lead to dropped frames and subtle race conditions when they are
-        // interdependent, which is often the case with certain Element fx.
-        for (; i < len; i++) {
-            anim = items[i];
-            
-            if (anim.isReady()) {
-                //Ext.log('      starting anim ', anim.id, ', target: ', anim.target.id);
-                me.startAnim(anim);
-            }
-        }
-        
-        for (i = 0; i < len; i++) {
-            anim = items[i];
-            
-            if (anim.isRunning()) {
-                //Ext.log('      running anim ', anim.target.id);
-                me.runAnim(anim);
-            //<debug>
-            } else if (!me.useCSS3) {
-                // When using CSS3 transitions the animations get paused since they are not
-                // needed once the transition is handed over to the browser, so we can
-                // ignore this case. However if we are doing JS animations and something is
-                // paused here it's possibly unintentional.
-                //Ext.log(' (i)  anim ', anim.id, ' is active but not running...');
-            //</debug>
-            }
-        }
-
-        // Apply all the pending changes to their targets
-        me.applyPendingAttrs();
-    },
-
-    /**
-     * @private
-     * Start the individual animation (initialization)
-     */
-    startAnim: function(anim) {
-        anim.start(this.timestamp);
-    },
-
-    /**
-     * @private
-     * Run the individual animation for this frame
-     */
-    runAnim: function(anim) {
-        if (!anim) {
-            return;
-        }
-        var me = this,
-            targetId = anim.target.getId(),
-            useCSS3 = me.useCSS3 && anim.target.type == 'element',
-            elapsedTime = me.timestamp - anim.startTime,
-            lastFrame = (elapsedTime >= anim.duration),
-            target, o;
-
-        target = this.collectTargetData(anim, elapsedTime, useCSS3, lastFrame);
-        
-        // For CSS3 animation, we need to immediately set the first frame's attributes without any transition
-        // to get a good initial state, then add the transition properties and set the final attributes.
-        if (useCSS3) {
-            //Ext.log(' (i)  using CSS3 transitions');
-            
-            // Flush the collected attributes, without transition
-            anim.target.setAttr(target.anims[anim.id].attributes, true);
-
-            // Add the end frame data
-            me.collectTargetData(anim, anim.duration, useCSS3, lastFrame);
-
-            // Pause the animation so runAnim doesn't keep getting called
-            anim.paused = true;
-
-            target = anim.target.target;
-            // We only want to attach an event on the last element in a composite
-            if (anim.target.isComposite) {
-                target = anim.target.target.last();
-            }
-
-            // Listen for the transitionend event
-            o = {};
-            o[Ext.supports.CSS3TransitionEnd] = anim.lastFrame;
-            o.scope = anim;
-            o.single = true;
-            target.on(o);
-        }
-    },
-
-    /**
-     * @private
-     * Collect target attributes for the given Anim object at the given timestamp
-     * @param {Ext.fx.Anim} anim The Anim instance
-     * @param {Number} timestamp Time after the anim's start time
-     * @param {Boolean} [useCSS3=false] True if using CSS3-based animation, else false
-     * @param {Boolean} [isLastFrame=false] True if this is the last frame of animation to be run, else false
-     * @return {Object} The animation target wrapper object containing the passed animation along with the
-     * new attributes to set on the target's element in the next animation frame.
-     */
-    collectTargetData: function(anim, elapsedTime, useCSS3, isLastFrame) {
-        var targetId = anim.target.getId(),
-            target = this.targetArr[targetId];
-        
-        if (!target) {
-            // Create a thin wrapper around the target so that we can create a link between the
-            // target element and its associated animations. This is important later when applying
-            // attributes to the target so that each animation can be independently run with its own
-            // duration and stopped at any point without affecting other animations for the same target.
-            target = this.targetArr[targetId] = {
-                id: targetId,
-                el: anim.target,
-                anims: {}
-            };
-        }
-
-        // This is a wrapper for the animation so that we can also save state along with it,
-        // including the current elapsed time and lastFrame status. Even though this method only
-        // adds a single anim object per call, each target element could have multiple animations
-        // associated with it, which is why the anim is added to the target's `anims` hash by id.
-        target.anims[anim.id] = {
-            id: anim.id,
-            anim: anim,
-            elapsed: elapsedTime,
-            isLastFrame: isLastFrame,
-            // This is the object that gets applied to the target element below in applyPendingAttrs():
-            attributes: [{
-                duration: anim.duration,
-                easing: (useCSS3 && anim.reverse) ? anim.easingFn.reverse().toCSS3() : anim.easing,
-                // This is where the magic happens. The anim calculates what its new attributes should
-                // be based on the current frame and returns those as a hash of values.
-                attrs: anim.runAnim(elapsedTime)
-            }]
-        };
-        
-        return target;
-    },
-    
-    /**
-     * @private
-     * Apply all pending attribute changes to their targets
-     */
-    applyPendingAttrs: function() {
-        var targetArr = this.targetArr,
-            target, targetId, animWrap, anim, animId;
-        
-        // Loop through each target
-        for (targetId in targetArr) {
-            if (targetArr.hasOwnProperty(targetId)) {
-                target = targetArr[targetId];
-                
-                // Each target could have multiple associated animations, so iterate those
-                for (animId in target.anims) {
-                    if (target.anims.hasOwnProperty(animId)) {
-                        animWrap = target.anims[animId];
-                        anim = animWrap.anim;
-                        
-                        // If the animation has valid attributes, set them on the target
-                        if (animWrap.attributes && anim.isRunning()) {
-                            //Ext.log('  >   applying attributes for anim ', animWrap.id, ', target: ', target.id, ', elapsed: ', animWrap.elapsed);
-                            target.el.setAttr(animWrap.attributes, false, animWrap.isLastFrame);
-                            
-                            // If this particular anim is at the last frame end it
-                            if (animWrap.isLastFrame) {
-                                //Ext.log('      running last frame for ', animWrap.id, ', target: ', targetId);
-                                anim.lastFrame();
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-});