extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/dd/Registry.js

@@ -0,0 +1,117 @@
+/**
+ * Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
+ * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
+ */
+Ext.define('Ext.dd.Registry', {
+    singleton: true,
+    constructor: function() {
+        this.elements = {}; 
+        this.handles = {}; 
+        this.autoIdSeed = 0;
+    },
+    
+    getId: function(el, autogen){
+        if(typeof el == "string"){
+            return el;
+        }
+        var id = el.id;
+        if(!id && autogen !== false){
+            id = "extdd-" + (++this.autoIdSeed);
+            el.id = id;
+        }
+        return id;
+    },
+    
+    /**
+     * Registers a drag drop element.
+     *
+     * @param {String/HTMLElement} element The id or DOM node to register
+     * @param {Object} data An custom data object that will be passed between the elements that are involved in drag
+     * drop operations. You can populate this object with any arbitrary properties that your own code knows how to
+     * interpret, plus there are some specific properties known to the Registry that should be populated in the data
+     * object (if applicable):
+     * @param {HTMLElement[]} data.handles Array of DOM nodes that trigger dragging for the element being registered.
+     * @param {Boolean} data.isHandle True if the element passed in triggers dragging itself, else false.
+     */
+    register : function(el, data){
+        data = data || {};
+        if (typeof el == "string") {
+            el = document.getElementById(el);
+        }
+        data.ddel = el;
+        this.elements[this.getId(el)] = data;
+        if (data.isHandle !== false) {
+            this.handles[data.ddel.id] = data;
+        }
+        if (data.handles) {
+            var hs = data.handles,
+                i, len;
+            for (i = 0, len = hs.length; i < len; i++) {
+                this.handles[this.getId(hs[i])] = data;
+            }
+        }
+    },
+
+    /**
+     * Unregister a drag drop element
+     * @param {String/HTMLElement} element The id or DOM node to unregister
+     */
+    unregister : function(el){
+        var id = this.getId(el, false),
+            data = this.elements[id],
+            hs, i, len;
+        if(data){
+            delete this.elements[id];
+            if(data.handles){
+                hs = data.handles;
+                for (i = 0, len = hs.length; i < len; i++) {
+                    delete this.handles[this.getId(hs[i], false)];
+                }
+            }
+        }
+    },
+
+    /**
+     * Returns the handle registered for a DOM Node by id
+     * @param {String/HTMLElement} id The DOM node or id to look up
+     * @return {Object} handle The custom handle data
+     */
+    getHandle : function(id){
+        if(typeof id != "string"){ // must be element?
+            id = id.id;
+        }
+        return this.handles[id];
+    },
+
+    /**
+     * Returns the handle that is registered for the DOM node that is the target of the event
+     * @param {Event} e The event
+     * @return {Object} handle The custom handle data
+     */
+    getHandleFromEvent : function(e){
+        var t = e.getTarget();
+        return t ? this.handles[t.id] : null;
+    },
+
+    /**
+     * Returns a custom data object that is registered for a DOM node by id
+     * @param {String/HTMLElement} id The DOM node or id to look up
+     * @return {Object} data The custom data
+     */
+    getTarget : function(id){
+        if(typeof id != "string"){ // must be element?
+            id = id.id;
+        }
+        return this.elements[id];
+    },
+
+    /**
+     * Returns a custom data object that is registered for the DOM node that is the target of the event
+     * @param {Event} e The event
+     * @return {Object} data The custom data
+     */
+    getTargetFromEvent : function(e){
+        var t = e.getTarget();
+        return t ? this.elements[t.id] || this.handles[t.id] : null;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/dd/ScrollManager.js

@@ -0,0 +1,218 @@
+/**
+ * Provides automatic scrolling of overflow regions in the page during drag operations.
+ *
+ * The ScrollManager configs will be used as the defaults for any scroll container registered with it, but you can also
+ * override most of the configs per scroll container by adding a ddScrollConfig object to the target element that
+ * contains these properties: {@link #hthresh}, {@link #vthresh}, {@link #increment} and {@link #frequency}. Example
+ * usage:
+ *
+ *     var el = Ext.get('scroll-ct');
+ *     el.ddScrollConfig = {
+ *         vthresh: 50,
+ *         hthresh: -1,
+ *         frequency: 100,
+ *         increment: 200
+ *     };
+ *     Ext.dd.ScrollManager.register(el);
+ *
+ * Note: This class is designed to be used in "Point Mode
+ */
+Ext.define('Ext.dd.ScrollManager', {
+    singleton: true,
+    requires: [
+        'Ext.dd.DragDropManager'
+    ],
+
+    constructor: function() {
+        var ddm = Ext.dd.DragDropManager;
+        ddm.fireEvents = Ext.Function.createSequence(ddm.fireEvents, this.onFire, this);
+        ddm.stopDrag = Ext.Function.createSequence(ddm.stopDrag, this.onStop, this);
+        this.doScroll = Ext.Function.bind(this.doScroll, this);
+        this.ddmInstance = ddm;
+        this.els = {};
+        this.dragEl = null;
+        this.proc = {};
+    },
+
+    onStop: function(e){
+        var sm = Ext.dd.ScrollManager;
+        sm.dragEl = null;
+        sm.clearProc();
+    },
+
+    triggerRefresh: function() {
+        if (this.ddmInstance.dragCurrent) {
+            this.ddmInstance.refreshCache(this.ddmInstance.dragCurrent.groups);
+        }
+    },
+
+    doScroll: function() {
+        if (this.ddmInstance.dragCurrent) {
+            var proc   = this.proc,
+                procEl = proc.el,
+                ddScrollConfig = proc.el.ddScrollConfig,
+                inc = ddScrollConfig ? ddScrollConfig.increment : this.increment;
+
+            if (!this.animate) {
+                if (procEl.scroll(proc.dir, inc)) {
+                    this.triggerRefresh();
+                }
+            } else {
+                procEl.scroll(proc.dir, inc, true, this.animDuration, this.triggerRefresh);
+            }
+        }
+    },
+
+    clearProc: function() {
+        var proc = this.proc;
+        if (proc.id) {
+            clearInterval(proc.id);
+        }
+        proc.id = 0;
+        proc.el = null;
+        proc.dir = "";
+    },
+
+    startProc: function(el, dir) {
+        this.clearProc();
+        this.proc.el = el;
+        this.proc.dir = dir;
+        var group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup : undefined,
+            freq  = (el.ddScrollConfig && el.ddScrollConfig.frequency)
+                  ? el.ddScrollConfig.frequency
+                  : this.frequency;
+
+        if (group === undefined || this.ddmInstance.dragCurrent.ddGroup == group) {
+            this.proc.id = setInterval(this.doScroll, freq);
+        }
+    },
+
+    onFire: function(e, isDrop) {
+        if (isDrop || !this.ddmInstance.dragCurrent) {
+            return;
+        }
+        if (!this.dragEl || this.dragEl != this.ddmInstance.dragCurrent) {
+            this.dragEl = this.ddmInstance.dragCurrent;
+            // refresh regions on drag start
+            this.refreshCache();
+        }
+
+        var xy = e.getXY(),
+            pt = e.getPoint(),
+            proc = this.proc,
+            els = this.els,
+            id, el, r, c;
+
+        for (id in els) {
+            el = els[id];
+            r = el._region;
+            c = el.ddScrollConfig ? el.ddScrollConfig : this;
+            if (r && r.contains(pt) && el.isScrollable()) {
+                if (r.bottom - pt.y <= c.vthresh) {
+                    if(proc.el != el){
+                        this.startProc(el, "down");
+                    }
+                    return;
+                }else if (r.right - pt.x <= c.hthresh) {
+                    if (proc.el != el) {
+                        this.startProc(el, "left");
+                    }
+                    return;
+                } else if(pt.y - r.top <= c.vthresh) {
+                    if (proc.el != el) {
+                        this.startProc(el, "up");
+                    }
+                    return;
+                } else if(pt.x - r.left <= c.hthresh) {
+                    if (proc.el != el) {
+                        this.startProc(el, "right");
+                    }
+                    return;
+                }
+            }
+        }
+        this.clearProc();
+    },
+
+    /**
+     * Registers new overflow element(s) to auto scroll
+     * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
+     * The id of or the element to be scrolled or an array of either
+     */
+    register : function(el){
+        if (Ext.isArray(el)) {
+            for(var i = 0, len = el.length; i < len; i++) {
+                    this.register(el[i]);
+            }
+        } else {
+            el = Ext.get(el);
+            this.els[el.id] = el;
+        }
+    },
+
+    /**
+     * Unregisters overflow element(s) so they are no longer scrolled
+     * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
+     * The id of or the element to be removed or an array of either
+     */
+    unregister : function(el){
+        if(Ext.isArray(el)){
+            for (var i = 0, len = el.length; i < len; i++) {
+                this.unregister(el[i]);
+            }
+        }else{
+            el = Ext.get(el);
+            delete this.els[el.id];
+        }
+    },
+
+    /**
+     * The number of pixels from the top or bottom edge of a container the pointer needs to be to trigger scrolling
+     */
+    vthresh : 25,
+
+    /**
+     * The number of pixels from the right or left edge of a container the pointer needs to be to trigger scrolling
+     */
+    hthresh : 25,
+
+    /**
+     * The number of pixels to scroll in each scroll increment
+     */
+    increment : 100,
+
+    /**
+     * The frequency of scrolls in milliseconds
+     */
+    frequency : 500,
+
+    /**
+     * True to animate the scroll
+     */
+    animate: true,
+
+    /**
+     * The animation duration in seconds - MUST BE less than Ext.dd.ScrollManager.frequency!
+     */
+    animDuration: 0.4,
+
+    /**
+     * @property {String} ddGroup
+     * The named drag drop {@link Ext.dd.DragSource#ddGroup group} to which this container belongs. If a ddGroup is
+     * specified, then container scrolling will only occur when a dragged object is in the same ddGroup.
+     */
+    ddGroup: undefined,
+
+    /**
+     * Manually trigger a cache refresh.
+     */
+    refreshCache : function(){
+        var els = this.els,
+            id;
+        for (id in els) {
+            if(typeof els[id] == 'object'){ // for people extending the object prototype
+                els[id]._region = els[id].getRegion();
+            }
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/dd/StatusProxy.js

@@ -0,0 +1,179 @@
+/**
+ * A specialized floating Component that supports a drop status icon, {@link Ext.Layer} styles
+ * and auto-repair.  This is the default drag proxy used by all Ext.dd components.
+ */
+Ext.define('Ext.dd.StatusProxy', {
+    extend: 'Ext.Component',
+    animRepair: false,
+
+    childEls: [
+        'ghost'
+    ],
+
+    renderTpl: [
+        '<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
+        '<div id="{id}-ghost" class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>'
+    ],
+
+    /**
+     * Creates new StatusProxy.
+     * @param {Object} [config] Config object.
+     */
+    constructor: function(config) {
+        var me = this;
+
+        config = config || {};
+
+        Ext.apply(me, {
+            hideMode: 'visibility',
+            hidden: true,
+            floating: true,
+            id: me.id || Ext.id(),
+            cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
+            shadow: config.shadow || false,
+            renderTo: Ext.getDetachedBody()
+        });
+        me.callParent(arguments);
+        this.dropStatus = this.dropNotAllowed;
+    },
+
+    /**
+     * @cfg {String} dropAllowed
+     * The CSS class to apply to the status element when drop is allowed.
+     */
+    dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
+
+    /**
+     * @cfg {String} dropNotAllowed
+     * The CSS class to apply to the status element when drop is not allowed.
+     */
+    dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
+
+    /**
+     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
+     * over the current target element.
+     * @param {String} cssClass The css class for the new drop status indicator image
+     */
+    setStatus : function(cssClass){
+        cssClass = cssClass || this.dropNotAllowed;
+        if (this.dropStatus != cssClass) {
+            this.el.replaceCls(this.dropStatus, cssClass);
+            this.dropStatus = cssClass;
+        }
+    },
+
+    /**
+     * Resets the status indicator to the default dropNotAllowed value
+     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
+     */
+    reset : function(clearGhost){
+        var me = this,
+            clsPrefix = Ext.baseCSSPrefix + 'dd-drag-proxy ';
+
+        me.el.replaceCls(clsPrefix + me.dropAllowed, clsPrefix + me.dropNotAllowed);
+        me.dropStatus = me.dropNotAllowed;
+        if (clearGhost) {
+            me.ghost.update('');
+        }
+    },
+
+    /**
+     * Updates the contents of the ghost element
+     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
+     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
+     */
+    update : function(html){
+        if (typeof html == "string") {
+            this.ghost.update(html);
+        } else {
+            this.ghost.update("");
+            html.style.margin = "0";
+            this.ghost.dom.appendChild(html);
+        }
+        var el = this.ghost.dom.firstChild;
+        if (el) {
+            Ext.fly(el).setStyle('float', 'none');
+        }
+    },
+
+    /**
+     * Returns the ghost element
+     * @return {Ext.Element} el
+     */
+    getGhost : function(){
+        return this.ghost;
+    },
+
+    /**
+     * Hides the proxy
+     * @param {Boolean} clear True to reset the status and clear the ghost contents,
+     * false to preserve them
+     */
+    hide : function(clear) {
+        this.callParent();
+        if (clear) {
+            this.reset(true);
+        }
+    },
+
+    /**
+     * Stops the repair animation if it's currently running
+     */
+    stop : function(){
+        if (this.anim && this.anim.isAnimated && this.anim.isAnimated()) {
+            this.anim.stop();
+        }
+    },
+
+    /**
+     * Force the Layer to sync its shadow and shim positions to the element
+     */
+    sync : function(){
+        this.el.sync();
+    },
+
+    /**
+     * Causes the proxy to return to its position of origin via an animation.
+     * Should be called after an invalid drop operation by the item being dragged.
+     * @param {Number[]} xy The XY position of the element ([x, y])
+     * @param {Function} callback The function to call after the repair is complete.
+     * @param {Object} scope The scope (`this` reference) in which the callback function is executed.
+     * Defaults to the browser window.
+     */
+    repair : function(xy, callback, scope) {
+        var me = this;
+
+        me.callback = callback;
+        me.scope = scope;
+        if (xy && me.animRepair !== false) {
+            me.el.addCls(Ext.baseCSSPrefix + 'dd-drag-repair');
+            me.el.hideUnders(true);
+            me.anim = me.el.animate({
+                duration: me.repairDuration || 500,
+                easing: 'ease-out',
+                to: {
+                    x: xy[0],
+                    y: xy[1]
+                },
+                stopAnimation: true,
+                callback: me.afterRepair,
+                scope: me
+            });
+        } else {
+            me.afterRepair();
+        }
+    },
+
+    // private
+    afterRepair : function() {
+        var me = this;
+    
+        me.hide(true);
+        me.el.removeCls(Ext.baseCSSPrefix + 'dd-drag-repair');
+        if (typeof me.callback == "function") {
+            me.callback.call(me.scope || me);
+        }
+        delete me.callback;
+        delete me.scope;
+    }
+});