extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/util/CSS.js

@@ -0,0 +1,185 @@
+/**
+ * Utility class for manipulating CSS rules
+ * @singleton
+ */
+Ext.define('Ext.util.CSS', (function() {
+    var rules = null,
+        doc = document,
+        camelRe = /(-[a-z])/gi,
+        camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
+
+    return {
+
+        singleton: true,
+
+        constructor: function() {
+            this.rules = {};
+            this.initialized = false;
+        },
+
+        /**
+         * Creates a stylesheet from a text blob of rules.
+         * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
+         * @param {String} cssText The text containing the css rules
+         * @param {String} id An id to add to the stylesheet for later removal
+         * @return {CSSStyleSheet}
+         */
+        createStyleSheet : function(cssText, id) {
+            var ss,
+                head = doc.getElementsByTagName("head")[0],
+                styleEl = doc.createElement("style");
+
+            styleEl.setAttribute("type", "text/css");
+            if (id) {
+               styleEl.setAttribute("id", id);
+            }
+
+            if (Ext.isIE) {
+               head.appendChild(styleEl);
+               ss = styleEl.styleSheet;
+               ss.cssText = cssText;
+            } else {
+                try{
+                    styleEl.appendChild(doc.createTextNode(cssText));
+                } catch(e) {
+                   styleEl.cssText = cssText;
+                }
+                head.appendChild(styleEl);
+                ss = styleEl.styleSheet ? styleEl.styleSheet : (styleEl.sheet || doc.styleSheets[doc.styleSheets.length-1]);
+            }
+            this.cacheStyleSheet(ss);
+            return ss;
+        },
+
+        /**
+         * Removes a style or link tag by id
+         * @param {String} id The id of the tag
+         */
+        removeStyleSheet : function(id) {
+            var existing = document.getElementById(id);
+            if (existing) {
+                existing.parentNode.removeChild(existing);
+            }
+        },
+
+        /**
+         * Dynamically swaps an existing stylesheet reference for a new one
+         * @param {String} id The id of an existing link tag to remove
+         * @param {String} url The href of the new stylesheet to include
+         */
+        swapStyleSheet : function(id, url) {
+            var doc = document,
+                ss;
+            this.removeStyleSheet(id);
+            ss = doc.createElement("link");
+            ss.setAttribute("rel", "stylesheet");
+            ss.setAttribute("type", "text/css");
+            ss.setAttribute("id", id);
+            ss.setAttribute("href", url);
+            doc.getElementsByTagName("head")[0].appendChild(ss);
+        },
+
+        /**
+         * Refresh the rule cache if you have dynamically added stylesheets
+         * @return {Object} An object (hash) of rules indexed by selector
+         */
+        refreshCache : function() {
+            return this.getRules(true);
+        },
+
+        // private
+        cacheStyleSheet : function(ss) {
+            if(!rules){
+                rules = {};
+            }
+            try {// try catch for cross domain access issue
+                var ssRules = ss.cssRules || ss.rules,
+                    selectorText,
+                    i = ssRules.length - 1,
+                    j,
+                    selectors;
+
+                for (; i >= 0; --i) {
+                    selectorText = ssRules[i].selectorText;
+                    if (selectorText) {
+
+                        // Split in case there are multiple, comma-delimited selectors
+                        selectorText = selectorText.split(',');
+                        selectors = selectorText.length;
+                        for (j = 0; j < selectors; j++) {
+                            rules[Ext.String.trim(selectorText[j]).toLowerCase()] = ssRules[i];
+                        }
+                    }
+                }
+            } catch(e) {}
+        },
+
+        /**
+         * Gets all css rules for the document
+         * @param {Boolean} refreshCache true to refresh the internal cache
+         * @return {Object} An object (hash) of rules indexed by selector
+         */
+        getRules : function(refreshCache) {
+            if (rules === null || refreshCache) {
+                rules = {};
+                var ds = doc.styleSheets,
+                    i = 0,
+                    len = ds.length;
+
+                for (; i < len; i++) {
+                    try {
+                        if (!ds[i].disabled) {
+                            this.cacheStyleSheet(ds[i]);
+                        }
+                    } catch(e) {}
+                }
+            }
+            return rules;
+        },
+
+        /**
+         * Gets an an individual CSS rule by selector(s)
+         * @param {String/String[]} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
+         * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
+         * @return {CSSStyleRule} The CSS rule or null if one is not found
+         */
+        getRule: function(selector, refreshCache) {
+            var rs = this.getRules(refreshCache),
+                i;
+            if (!Ext.isArray(selector)) {
+                return rs[selector.toLowerCase()];
+            }
+            for (i = 0; i < selector.length; i++) {
+                if (rs[selector[i]]) {
+                    return rs[selector[i].toLowerCase()];
+                }
+            }
+            return null;
+        },
+
+        /**
+         * Updates a rule property
+         * @param {String/String[]} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
+         * @param {String} property The css property
+         * @param {String} value The new value for the property
+         * @return {Boolean} true If a rule was found and updated
+         */
+        updateRule : function(selector, property, value){
+            var rule, i;
+            if (!Ext.isArray(selector)) {
+                rule = this.getRule(selector);
+                if (rule) {
+                    rule.style[property.replace(camelRe, camelFn)] = value;
+                    return true;
+                }
+            } else {
+                for (i = 0; i < selector.length; i++) {
+                    if (this.updateRule(selector[i], property, value)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+    };
+}()));

data/app/assets/javascripts/extjs-rails/src/util/ClickRepeater.js

@@ -0,0 +1,238 @@
+/**
+ * A wrapper class which can be applied to any element. Fires a "click" event while the
+ * mouse is pressed. The interval between firings may be specified in the config but
+ * defaults to 20 milliseconds.
+ *
+ * Optionally, a CSS class may be applied to the element during the time it is pressed.
+ */
+Ext.define('Ext.util.ClickRepeater', {
+    extend: 'Ext.util.Observable',
+
+    /**
+     * Creates new ClickRepeater.
+     * @param {String/HTMLElement/Ext.Element} el The element or its ID to listen on
+     * @param {Object} [config] Config object.
+     */
+    constructor : function(el, config){
+        var me = this;
+
+        me.el = Ext.get(el);
+        me.el.unselectable();
+
+        Ext.apply(me, config);
+
+        me.callParent();
+
+        me.addEvents(
+        /**
+         * @event mousedown
+         * Fires when the mouse button is depressed.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        "mousedown",
+        /**
+         * @event click
+         * Fires on a specified interval during the time the element is pressed.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        "click",
+        /**
+         * @event mouseup
+         * Fires when the mouse key is released.
+         * @param {Ext.util.ClickRepeater} this
+         * @param {Ext.EventObject} e
+         */
+        "mouseup"
+        );
+
+        if(!me.disabled){
+            me.disabled = true;
+            me.enable();
+        }
+
+        // allow inline handler
+        if(me.handler){
+            me.on("click", me.handler,  me.scope || me);
+        }
+    },
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} el
+     * The element to act as a button.
+     */
+
+    /**
+     * @cfg {String} pressedCls
+     * A CSS class name to be applied to the element while pressed.
+     */
+
+    /**
+     * @cfg {Boolean} accelerate
+     * True if autorepeating should start slowly and accelerate.
+     * "interval" and "delay" are ignored.
+     */
+
+    /**
+     * @cfg {Number} interval
+     * The interval between firings of the "click" event (in milliseconds).
+     */
+    interval : 20,
+
+    /**
+     * @cfg {Number} delay
+     * The initial delay before the repeating event begins firing.
+     * Similar to an autorepeat key delay.
+     */
+    delay: 250,
+
+    /**
+     * @cfg {Boolean} preventDefault
+     * True to prevent the default click event
+     */
+    preventDefault : true,
+
+    /**
+     * @cfg {Boolean} stopDefault
+     * True to stop the default click event
+     */
+    stopDefault : false,
+
+    timer : 0,
+
+    /**
+     * Enables the repeater and allows events to fire.
+     */
+    enable: function(){
+        if(this.disabled){
+            this.el.on('mousedown', this.handleMouseDown, this);
+            if (Ext.isIE){
+                this.el.on('dblclick', this.handleDblClick, this);
+            }
+            if(this.preventDefault || this.stopDefault){
+                this.el.on('click', this.eventOptions, this);
+            }
+        }
+        this.disabled = false;
+    },
+
+    /**
+     * Disables the repeater and stops events from firing.
+     */
+    disable: function(/* private */ force){
+        if(force || !this.disabled){
+            clearTimeout(this.timer);
+            if(this.pressedCls){
+                this.el.removeCls(this.pressedCls);
+            }
+            Ext.getDoc().un('mouseup', this.handleMouseUp, this);
+            this.el.removeAllListeners();
+        }
+        this.disabled = true;
+    },
+
+    /**
+     * Convenience function for setting disabled/enabled by boolean.
+     * @param {Boolean} disabled
+     */
+    setDisabled: function(disabled){
+        this[disabled ? 'disable' : 'enable']();
+    },
+
+    eventOptions: function(e){
+        if(this.preventDefault){
+            e.preventDefault();
+        }
+        if(this.stopDefault){
+            e.stopEvent();
+        }
+    },
+
+    // private
+    destroy : function() {
+        this.disable(true);
+        Ext.destroy(this.el);
+        this.clearListeners();
+    },
+
+    handleDblClick : function(e){
+        clearTimeout(this.timer);
+        this.el.blur();
+
+        this.fireEvent("mousedown", this, e);
+        this.fireEvent("click", this, e);
+    },
+
+    // private
+    handleMouseDown : function(e){
+        clearTimeout(this.timer);
+        this.el.blur();
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
+        }
+        this.mousedownTime = new Date();
+
+        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
+        this.el.on("mouseout", this.handleMouseOut, this);
+
+        this.fireEvent("mousedown", this, e);
+        this.fireEvent("click", this, e);
+
+        // Do not honor delay or interval if acceleration wanted.
+        if (this.accelerate) {
+            this.delay = 400;
+        }
+
+        // Re-wrap the event object in a non-shared object, so it doesn't lose its context if
+        // the global shared EventObject gets a new Event put into it before the timer fires.
+        e = new Ext.EventObjectImpl(e);
+
+        this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
+    },
+
+    // private
+    click : function(e){
+        this.fireEvent("click", this, e);
+        this.timer =  Ext.defer(this.click, this.accelerate ?
+            this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
+                400,
+                -390,
+                12000) :
+            this.interval, this, [e]);
+    },
+
+    easeOutExpo : function (t, b, c, d) {
+        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+    },
+
+    // private
+    handleMouseOut : function(){
+        clearTimeout(this.timer);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
+        }
+        this.el.on("mouseover", this.handleMouseReturn, this);
+    },
+
+    // private
+    handleMouseReturn : function(){
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        if(this.pressedCls){
+            this.el.addCls(this.pressedCls);
+        }
+        this.click();
+    },
+
+    // private
+    handleMouseUp : function(e){
+        clearTimeout(this.timer);
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        this.el.un("mouseout", this.handleMouseOut, this);
+        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
+        if(this.pressedCls){
+            this.el.removeCls(this.pressedCls);
+        }
+        this.fireEvent("mouseup", this, e);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/util/ComponentDragger.js

@@ -0,0 +1,126 @@
+/**
+ * A subclass of Ext.dd.DragTracker which handles dragging any Component.
+ *
+ * This is configured with a Component to be made draggable, and a config object for the {@link Ext.dd.DragTracker}
+ * class.
+ *
+ * A {@link #delegate} may be provided which may be either the element to use as the mousedown target or a {@link
+ * Ext.DomQuery} selector to activate multiple mousedown targets.
+ *
+ * When the Component begins to be dragged, its `beginDrag` method will be called if implemented.
+ *
+ * When the drag ends, its `endDrag` method will be called if implemented.
+ */
+Ext.define('Ext.util.ComponentDragger', {
+    extend: 'Ext.dd.DragTracker',
+
+    /**
+     * @cfg {Boolean} constrain
+     * Specify as `true` to constrain the Component to within the bounds of the {@link #constrainTo} region.
+     */
+
+    /**
+     * @cfg {String/Ext.Element} delegate
+     * A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
+     * Element which are the drag handles. This limits dragging to only begin when the matching elements are
+     * mousedowned.
+     *
+     * This may also be a specific child element within the Component's encapsulating element to use as the drag handle.
+     */
+
+    /**
+     * @cfg {Boolean} constrainDelegate
+     * Specify as `true` to constrain the drag handles within the {@link #constrainTo} region.
+     */
+
+    autoStart: 500,
+
+    /**
+     * Creates new ComponentDragger.
+     * @param {Object} comp The Component to provide dragging for.
+     * @param {Object} [config] Config object
+     */
+    constructor: function(comp, config) {
+        this.comp = comp;
+        this.initialConstrainTo = config.constrainTo;
+        this.callParent([ config ]);
+    },
+
+    onStart: function(e) {
+        var me = this,
+            comp = me.comp;
+
+        // Cache the start [X, Y] array
+        this.startPosition = comp.el.getXY();
+
+        // If client Component has a ghost method to show a lightweight version of itself
+        // then use that as a drag proxy unless configured to liveDrag.
+        if (comp.ghost && !comp.liveDrag) {
+             me.proxy = comp.ghost();
+             me.dragTarget = me.proxy.header.el;
+        }
+
+        // Set the constrainTo Region before we start dragging.
+        if (me.constrain || me.constrainDelegate) {
+            me.constrainTo = me.calculateConstrainRegion();
+        }
+
+        if (comp.beginDrag) {
+            comp.beginDrag();
+        }
+    },
+
+    calculateConstrainRegion: function() {
+        var me = this,
+            comp = me.comp,
+            c = me.initialConstrainTo,
+            delegateRegion,
+            elRegion,
+            shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;
+
+        // The configured constrainTo might be a Region or an element
+        if (!(c instanceof Ext.util.Region)) {
+            c =  Ext.fly(c).getViewRegion();
+        }
+
+        // Reduce the constrain region to allow for shadow
+        if (shadowSize) {
+            c.adjust(0, -shadowSize, -shadowSize, shadowSize);
+        }
+
+        // If they only want to constrain the *delegate* to within the constrain region,
+        // adjust the region to be larger based on the insets of the delegate from the outer
+        // edges of the Component.
+        if (!me.constrainDelegate) {
+            delegateRegion = Ext.fly(me.dragTarget).getRegion();
+            elRegion = me.proxy ? me.proxy.el.getRegion() : comp.el.getRegion();
+
+            c.adjust(
+                delegateRegion.top - elRegion.top,
+                delegateRegion.right - elRegion.right,
+                delegateRegion.bottom - elRegion.bottom,
+                delegateRegion.left - elRegion.left
+            );
+        }
+        return c;
+    },
+
+    // Move either the ghost Component or the target Component to its new position on drag
+    onDrag: function(e) {
+        var me = this,
+            comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
+            offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
+
+        comp.setPagePosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
+    },
+
+    onEnd: function(e) {
+        var comp = this.comp;
+        if (this.proxy && !comp.liveDrag) {
+            comp.unghost();
+        }
+        if (comp.endDrag) {
+            comp.endDrag();
+        }
+    }
+});