Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / src / dd / StatusProxy.js
diff --git a/src/dd/StatusProxy.js b/src/dd/StatusProxy.js
new file mode 100644 (file)
index 0000000..5806535
--- /dev/null
@@ -0,0 +1,171 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\r
+ * @class Ext.dd.StatusProxy\r
+ * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the\r
+ * default drag proxy used by all Ext.dd components.\r
+ * @constructor\r
+ * @param {Object} config\r
+ */\r
+Ext.dd.StatusProxy = function(config){\r
+    Ext.apply(this, config);\r
+    this.id = this.id || Ext.id();\r
+    this.el = new Ext.Layer({\r
+        dh: {\r
+            id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [\r
+                {tag: "div", cls: "x-dd-drop-icon"},\r
+                {tag: "div", cls: "x-dd-drag-ghost"}\r
+            ]\r
+        }, \r
+        shadow: !config || config.shadow !== false\r
+    });\r
+    this.ghost = Ext.get(this.el.dom.childNodes[1]);\r
+    this.dropStatus = this.dropNotAllowed;\r
+};\r
+\r
+Ext.dd.StatusProxy.prototype = {\r
+    /**\r
+     * @cfg {String} dropAllowed\r
+     * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").\r
+     */\r
+    dropAllowed : "x-dd-drop-ok",\r
+    /**\r
+     * @cfg {String} dropNotAllowed\r
+     * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").\r
+     */\r
+    dropNotAllowed : "x-dd-drop-nodrop",\r
+\r
+    /**\r
+     * Updates the proxy's visual element to indicate the status of whether or not drop is allowed\r
+     * over the current target element.\r
+     * @param {String} cssClass The css class for the new drop status indicator image\r
+     */\r
+    setStatus : function(cssClass){\r
+        cssClass = cssClass || this.dropNotAllowed;\r
+        if(this.dropStatus != cssClass){\r
+            this.el.replaceClass(this.dropStatus, cssClass);\r
+            this.dropStatus = cssClass;\r
+        }\r
+    },\r
+\r
+    /**\r
+     * Resets the status indicator to the default dropNotAllowed value\r
+     * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it\r
+     */\r
+    reset : function(clearGhost){\r
+        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;\r
+        this.dropStatus = this.dropNotAllowed;\r
+        if(clearGhost){\r
+            this.ghost.update("");\r
+        }\r
+    },\r
+\r
+    /**\r
+     * Updates the contents of the ghost element\r
+     * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a\r
+     * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).\r
+     */\r
+    update : function(html){\r
+        if(typeof html == "string"){\r
+            this.ghost.update(html);\r
+        }else{\r
+            this.ghost.update("");\r
+            html.style.margin = "0";\r
+            this.ghost.dom.appendChild(html);\r
+        }\r
+        var el = this.ghost.dom.firstChild; \r
+        if(el){\r
+            Ext.fly(el).setStyle('float', 'none');\r
+        }\r
+    },\r
+\r
+    /**\r
+     * Returns the underlying proxy {@link Ext.Layer}\r
+     * @return {Ext.Layer} el\r
+    */\r
+    getEl : function(){\r
+        return this.el;\r
+    },\r
+\r
+    /**\r
+     * Returns the ghost element\r
+     * @return {Ext.Element} el\r
+     */\r
+    getGhost : function(){\r
+        return this.ghost;\r
+    },\r
+\r
+    /**\r
+     * Hides the proxy\r
+     * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them\r
+     */\r
+    hide : function(clear){\r
+        this.el.hide();\r
+        if(clear){\r
+            this.reset(true);\r
+        }\r
+    },\r
+\r
+    /**\r
+     * Stops the repair animation if it's currently running\r
+     */\r
+    stop : function(){\r
+        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){\r
+            this.anim.stop();\r
+        }\r
+    },\r
+\r
+    /**\r
+     * Displays this proxy\r
+     */\r
+    show : function(){\r
+        this.el.show();\r
+    },\r
+\r
+    /**\r
+     * Force the Layer to sync its shadow and shim positions to the element\r
+     */\r
+    sync : function(){\r
+        this.el.sync();\r
+    },\r
+\r
+    /**\r
+     * Causes the proxy to return to its position of origin via an animation.  Should be called after an\r
+     * invalid drop operation by the item being dragged.\r
+     * @param {Array} xy The XY position of the element ([x, y])\r
+     * @param {Function} callback The function to call after the repair is complete\r
+     * @param {Object} scope The scope in which to execute the callback\r
+     */\r
+    repair : function(xy, callback, scope){\r
+        this.callback = callback;\r
+        this.scope = scope;\r
+        if(xy && this.animRepair !== false){\r
+            this.el.addClass("x-dd-drag-repair");\r
+            this.el.hideUnders(true);\r
+            this.anim = this.el.shift({\r
+                duration: this.repairDuration || .5,\r
+                easing: 'easeOut',\r
+                xy: xy,\r
+                stopFx: true,\r
+                callback: this.afterRepair,\r
+                scope: this\r
+            });\r
+        }else{\r
+            this.afterRepair();\r
+        }\r
+    },\r
+\r
+    // private\r
+    afterRepair : function(){\r
+        this.hide(true);\r
+        if(typeof this.callback == "function"){\r
+            this.callback.call(this.scope || this);\r
+        }\r
+        this.callback = null;\r
+        this.scope = null;\r
+    }\r
+};
\ No newline at end of file