extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/fx/target/Component.js

@@ -0,0 +1,118 @@
+/**
+ * @class Ext.fx.target.Component
+ * 
+ * This class represents a animation target for a {@link Ext.Component}. In general this class will not be
+ * created directly, the {@link Ext.Component} will be passed to the animation and
+ * and the appropriate target will be created.
+ */
+Ext.define('Ext.fx.target.Component', {
+
+    /* Begin Definitions */
+   
+    extend: 'Ext.fx.target.Target',
+    
+    /* End Definitions */
+
+    type: 'component',
+
+    // Methods to call to retrieve unspecified "from" values from a target Component
+    getPropMethod: {
+        top: function() {
+            return this.getPosition(true)[1];
+        },
+        left: function() {
+            return this.getPosition(true)[0];
+        },
+        x: function() {
+            return this.getPosition()[0];
+        },
+        y: function() {
+            return this.getPosition()[1];
+        },
+        height: function() {
+            return this.getHeight();
+        },
+        width: function() {
+            return this.getWidth();
+        },
+        opacity: function() {
+            return this.el.getStyle('opacity');
+        }
+    },
+
+    compMethod: {
+        top: 'setPosition',
+        left: 'setPosition',
+        x: 'setPagePosition',
+        y: 'setPagePosition',
+        height: 'setSize',
+        width: 'setSize',
+        opacity: 'setOpacity'
+    },
+
+    // Read the named attribute from the target Component. Use the defined getter for the attribute
+    getAttr: function(attr, val) {
+        return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
+    },
+
+    setAttr: function(targetData, isFirstFrame, isLastFrame) {
+        var me = this,
+            target = me.target,
+            ln = targetData.length,
+            attrs, attr, o, i, j, meth, targets, left, top, w, h;
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i].attrs;
+            for (attr in attrs) {
+                targets = attrs[attr].length;
+                meth = {
+                    setPosition: {},
+                    setPagePosition: {},
+                    setSize: {},
+                    setOpacity: {}
+                };
+                for (j = 0; j < targets; j++) {
+                    o = attrs[attr][j];
+                    // We REALLY want a single function call, so push these down to merge them: eg
+                    // meth.setPagePosition.target = <targetComponent>
+                    // meth.setPagePosition['x'] = 100
+                    // meth.setPagePosition['y'] = 100
+                    meth[me.compMethod[attr]].target = o[0];
+                    meth[me.compMethod[attr]][attr] = o[1];
+                }
+                if (meth.setPosition.target) {
+                    o = meth.setPosition;
+                    left = (o.left === undefined) ? undefined : parseFloat(o.left);
+                    top = (o.top === undefined) ? undefined : parseFloat(o.top);
+                    o.target.setPosition(left, top);
+                }
+                if (meth.setPagePosition.target) {
+                    o = meth.setPagePosition;
+                    o.target.setPagePosition(o.x, o.y);
+                }
+                if (meth.setSize.target) {
+                    o = meth.setSize;
+                    // Dimensions not being animated MUST NOT be autosized. They must remain at current value.
+                    w = (o.width === undefined) ? o.target.getWidth() : parseFloat(o.width);
+                    h = (o.height === undefined) ? o.target.getHeight() : parseFloat(o.height);
+
+                    // Only set the size of the Component on the last frame, or if the animation was
+                    // configured with dynamic: true.
+                    // In other cases, we just set the target element size.
+                    // This will result in either clipping if animating a reduction in size, or the revealing of
+                    // the inner elements of the Component if animating an increase in size.
+                    // Component's animate function initially resizes to the larger size before resizing the
+                    // outer element to clip the contents.
+                    if (isLastFrame || me.dynamic) {
+                        o.target.setSize(w, h);
+                    } else {
+                        o.target.el.setSize(w, h);
+                    }
+                }
+                if (meth.setOpacity.target) {
+                    o = meth.setOpacity;
+                    o.target.el.setStyle('opacity', o.opacity);
+                }
+            }
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/CompositeElement.js

@@ -0,0 +1,46 @@
+/**
+ * @class Ext.fx.target.CompositeElement
+ * 
+ * This class represents a animation target for a {@link Ext.CompositeElement}. It allows
+ * each {@link Ext.Element} in the group to be animated as a whole. In general this class will not be
+ * created directly, the {@link Ext.CompositeElement} will be passed to the animation and
+ * and the appropriate target will be created.
+ */
+Ext.define('Ext.fx.target.CompositeElement', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.Element',
+
+    /* End Definitions */
+
+    /**
+     * @property {Boolean} isComposite
+     * `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
+     */
+    isComposite: true,
+    
+    constructor: function(target) {
+        target.id = target.id || Ext.id(null, 'ext-composite-');
+        this.callParent([target]);
+    },
+
+    getAttr: function(attr, val) {
+        var out      = [],
+            elements = this.target.elements,
+            length   = elements.length,
+            i,
+            el;
+
+        for (i = 0; i < length; i++) {
+            el = elements[i];
+
+            if (el) {
+                el = this.target.getElement(el);
+                out.push([el, this.getElVal(el, attr, val)]);
+            }
+        }
+
+        return out;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/CompositeElementCSS.js

@@ -0,0 +1,22 @@
+/**
+ * @class Ext.fx.target.CompositeElementCSS
+ * 
+ * This class represents a animation target for a {@link Ext.CompositeElement}, where the
+ * constituent elements support CSS based animation. It allows each {@link Ext.Element} in 
+ * the group to be animated as a whole. In general this class will not be created directly, 
+ * the {@link Ext.CompositeElement} will be passed to the animation and the appropriate target 
+ * will be created.
+ */
+Ext.define('Ext.fx.target.CompositeElementCSS', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.CompositeElement',
+
+    requires: ['Ext.fx.target.ElementCSS'],
+
+    /* End Definitions */
+    setAttr: function() {
+        return Ext.fx.target.ElementCSS.prototype.setAttr.apply(this, arguments);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/CompositeSprite.js

@@ -0,0 +1,34 @@
+/**
+ * @class Ext.fx.target.CompositeSprite
+
+This class represents a animation target for a {@link Ext.draw.CompositeSprite}. It allows
+each {@link Ext.draw.Sprite} in the group to be animated as a whole. In general this class will not be
+created directly, the {@link Ext.draw.CompositeSprite} will be passed to the animation and
+and the appropriate target will be created.
+
+ * @markdown
+ */
+
+Ext.define('Ext.fx.target.CompositeSprite', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.Sprite',
+
+    /* End Definitions */
+
+    getAttr: function(attr, val) {
+        var out     = [],
+            sprites = [].concat(this.target.items),
+            length  = sprites.length,
+            i,
+            sprite;
+
+        for (i = 0; i < length; i++) {
+            sprite = sprites[i];
+            out.push([sprite, val != undefined ? val : this.getFromPrim(sprite, attr)]);
+        }
+
+        return out;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/Element.js

@@ -0,0 +1,83 @@
+/**
+ * @class Ext.fx.target.Element
+ * 
+ * This class represents a animation target for an {@link Ext.Element}. In general this class will not be
+ * created directly, the {@link Ext.Element} will be passed to the animation and
+ * and the appropriate target will be created.
+ */
+Ext.define('Ext.fx.target.Element', {
+
+    /* Begin Definitions */
+    
+    extend: 'Ext.fx.target.Target',
+    
+    /* End Definitions */
+
+    type: 'element',
+
+    getElVal: function(el, attr, val) {
+        if (val == undefined) {
+            if (attr === 'x') {
+                val = el.getX();
+            }
+            else if (attr === 'y') {
+                val = el.getY();
+            }
+            else if (attr === 'scrollTop') {
+                val = el.getScroll().top;
+            }
+            else if (attr === 'scrollLeft') {
+                val = el.getScroll().left;
+            }
+            else if (attr === 'height') {
+                val = el.getHeight();
+            }
+            else if (attr === 'width') {
+                val = el.getWidth();
+            }
+            else {
+                val = el.getStyle(attr);
+            }
+        }
+        return val;
+    },
+
+    getAttr: function(attr, val) {
+        var el = this.target;
+        return [[ el, this.getElVal(el, attr, val)]];
+    },
+
+    setAttr: function(targetData) {
+        var target = this.target,
+            ln = targetData.length,
+            attrs, attr, o, i, j, ln2, element, value;
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i].attrs;
+            for (attr in attrs) {
+                if (attrs.hasOwnProperty(attr)) {
+                    ln2 = attrs[attr].length;
+                    for (j = 0; j < ln2; j++) {
+                        o = attrs[attr][j];
+                        element = o[0];
+                        value = o[1];
+                        if (attr === 'x') {
+                            element.setX(value);
+                        } else if (attr === 'y') {
+                            element.setY(value);
+                        } else if (attr === 'scrollTop') {
+                            element.scrollTo('top', value);
+                        } else if (attr === 'scrollLeft') {
+                            element.scrollTo('left',value);
+                        } else if (attr === 'width') {
+                            element.setWidth(value);
+                        } else if (attr === 'height') {
+                            element.setHeight(value);
+                        } else {
+                            element.setStyle(attr, value);
+                        }
+                    }
+                }
+            }
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/ElementCSS.js

@@ -0,0 +1,77 @@
+/**
+ * @class Ext.fx.target.ElementCSS
+ * 
+ * This class represents a animation target for an {@link Ext.Element} that supports CSS
+ * based animation. In general this class will not be created directly, the {@link Ext.Element} 
+ * will be passed to the animation and the appropriate target will be created.
+ */
+Ext.define('Ext.fx.target.ElementCSS', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.Element',
+
+    /* End Definitions */
+
+    setAttr: function(targetData, isFirstFrame) {
+        var cssArr = {
+                attrs: [],
+                duration: [],
+                easing: []
+            },
+            ln = targetData.length,
+            attributes,
+            attrs,
+            attr,
+            easing,
+            duration,
+            o,
+            i,
+            j,
+            ln2;
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i];
+            duration = attrs.duration;
+            easing = attrs.easing;
+            attrs = attrs.attrs;
+            for (attr in attrs) {
+                if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
+                    cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
+                        return '-' + v.toLowerCase();
+                    }));
+                    cssArr.duration.push(duration + 'ms');
+                    cssArr.easing.push(easing);
+                }
+            }
+        }
+        attributes = cssArr.attrs.join(',');
+        duration = cssArr.duration.join(',');
+        easing = cssArr.easing.join(', ');
+        for (i = 0; i < ln; i++) {
+            attrs = targetData[i].attrs;
+            for (attr in attrs) {
+                ln2 = attrs[attr].length;
+                for (j = 0; j < ln2; j++) {
+                    o = attrs[attr][j];
+                    o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', isFirstFrame ? '' : attributes);
+                    o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', isFirstFrame ? '' : duration);
+                    o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', isFirstFrame ? '' : easing);
+                    o[0].setStyle(attr, o[1]);
+
+                    // Must trigger reflow to make this get used as the start point for the transition that follows
+                    if (isFirstFrame) {
+                        o = o[0].dom.offsetWidth;
+                    }
+                    else {
+                        // Remove transition properties when completed.
+                        o[0].on(Ext.supports.CSS3TransitionEnd, function() {
+                            this.setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', null);
+                            this.setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', null);
+                            this.setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', null);
+                        }, o[0], { single: true });
+                    }
+                }
+            }
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/fx/target/Sprite.js

@@ -0,0 +1,128 @@
+/**
+ * @class Ext.fx.target.Sprite
+
+ This class represents an animation target for a {@link Ext.draw.Sprite}. In general this class will not be
+ created directly, the {@link Ext.draw.Sprite} will be passed to the animation and
+ and the appropriate target will be created.
+
+ * @markdown
+ */
+
+Ext.define('Ext.fx.target.Sprite', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.Target',
+
+    /* End Definitions */
+
+    type: 'draw',
+
+    getFromPrim: function (sprite, attr) {
+        var obj;
+        switch (attr) {
+            case 'rotate':
+            case 'rotation':
+                obj = sprite.attr.rotation;
+                return {
+                    x: obj.x || 0,
+                    y: obj.y || 0,
+                    degrees: obj.degrees || 0
+                };
+            case 'scale':
+            case 'scaling':
+                obj = sprite.attr.scaling;
+                return {
+                    x: obj.x || 1,
+                    y: obj.y || 1,
+                    cx: obj.cx || 0,
+                    cy: obj.cy || 0
+                };
+            case 'translate':
+            case 'translation':
+                obj = sprite.attr.translation;
+                return {
+                    x: obj.x || 0,
+                    y: obj.y || 0
+                };
+            default:
+                return sprite.attr[attr];
+        }
+    },
+
+    getAttr: function (attr, val) {
+        return [
+            [this.target, val != undefined ? val : this.getFromPrim(this.target, attr)]
+        ];
+    },
+
+    setAttr: function (targetData) {
+        var ln = targetData.length,
+            spriteArr = [],
+            attrsConf, attr, attrArr, attrs, sprite, idx, value, i, j, x, y, ln2;
+        for (i = 0; i < ln; i++) {
+            attrsConf = targetData[i].attrs;
+            for (attr in attrsConf) {
+                attrArr = attrsConf[attr];
+                ln2 = attrArr.length;
+                for (j = 0; j < ln2; j++) {
+                    sprite = attrArr[j][0];
+                    attrs = attrArr[j][1];
+                    if (attr === 'translate' || attr === 'translation') {
+                        value = {
+                            x: attrs.x,
+                            y: attrs.y
+                        };
+                    }
+                    else if (attr === 'rotate' || attr === 'rotation') {
+                        x = attrs.x;
+                        if (isNaN(x)) {
+                            x = null;
+                        }
+                        y = attrs.y;
+                        if (isNaN(y)) {
+                            y = null;
+                        }
+                        value = {
+                            degrees: attrs.degrees,
+                            x: x,
+                            y: y
+                        };
+                    } else if (attr === 'scale' || attr === 'scaling') {
+                        x = attrs.x;
+                        if (isNaN(x)) {
+                            x = null;
+                        }
+                        y = attrs.y;
+                        if (isNaN(y)) {
+                            y = null;
+                        }
+                        value = {
+                            x: x,
+                            y: y,
+                            cx: attrs.cx,
+                            cy: attrs.cy
+                        };
+                    }
+                    else if (attr === 'width' || attr === 'height' || attr === 'x' || attr === 'y') {
+                        value = parseFloat(attrs);
+                    }
+                    else {
+                        value = attrs;
+                    }
+                    idx = Ext.Array.indexOf(spriteArr, sprite);
+                    if (idx == -1) {
+                        spriteArr.push([sprite, {}]);
+                        idx = spriteArr.length - 1;
+                    }
+                    spriteArr[idx][1][attr] = value;
+                }
+            }
+        }
+        ln = spriteArr.length;
+        for (i = 0; i < ln; i++) {
+            spriteArr[i][0].setAttributes(spriteArr[i][1]);
+        }
+        this.target.redraw();
+    }
+});