4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.dd.StatusProxy
15 * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair. This is the
16 * default drag proxy used by all Roo.dd components.
18 * @param {Object} config
20 Roo.dd.StatusProxy = function(config){
21 Roo.apply(this, config);
22 this.id = this.id || Roo.id();
23 this.el = new Roo.Layer({
25 id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
26 {tag: "div", cls: "x-dd-drop-icon"},
27 {tag: "div", cls: "x-dd-drag-ghost"}
30 shadow: !config || config.shadow !== false
32 this.ghost = Roo.get(this.el.dom.childNodes[1]);
33 this.dropStatus = this.dropNotAllowed;
36 Roo.dd.StatusProxy.prototype = {
38 * @cfg {String} dropAllowed
39 * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
41 dropAllowed : "x-dd-drop-ok",
43 * @cfg {String} dropNotAllowed
44 * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
46 dropNotAllowed : "x-dd-drop-nodrop",
49 * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
50 * over the current target element.
51 * @param {String} cssClass The css class for the new drop status indicator image
53 setStatus : function(cssClass){
54 cssClass = cssClass || this.dropNotAllowed;
55 if(this.dropStatus != cssClass){
56 this.el.replaceClass(this.dropStatus, cssClass);
57 this.dropStatus = cssClass;
62 * Resets the status indicator to the default dropNotAllowed value
63 * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
65 reset : function(clearGhost){
66 this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
67 this.dropStatus = this.dropNotAllowed;
69 this.ghost.update("");
74 * Updates the contents of the ghost element
75 * @param {String} html The html that will replace the current innerHTML of the ghost element
77 update : function(html){
78 if(typeof html == "string"){
79 this.ghost.update(html);
81 this.ghost.update("");
82 html.style.margin = "0";
83 this.ghost.dom.appendChild(html);
85 // ensure float = none set?? cant remember why though.
86 var el = this.ghost.dom.firstChild;
88 Roo.fly(el).setStyle('float', 'none');
93 * Returns the underlying proxy {@link Roo.Layer}
94 * @return {Roo.Layer} el
101 * Returns the ghost element
102 * @return {Roo.Element} el
104 getGhost : function(){
110 * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
112 hide : function(clear){
120 * Stops the repair animation if it's currently running
123 if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
129 * Displays this proxy
136 * Force the Layer to sync its shadow and shim positions to the element
143 * Causes the proxy to return to its position of origin via an animation. Should be called after an
144 * invalid drop operation by the item being dragged.
145 * @param {Array} xy The XY position of the element ([x, y])
146 * @param {Function} callback The function to call after the repair is complete
147 * @param {Object} scope The scope in which to execute the callback
149 repair : function(xy, callback, scope){
150 this.callback = callback;
152 if(xy && this.animRepair !== false){
153 this.el.addClass("x-dd-drag-repair");
154 this.el.hideUnders(true);
155 this.anim = this.el.shift({
156 duration: this.repairDuration || .5,
160 callback: this.afterRepair,
169 afterRepair : function(){
171 if(typeof this.callback == "function"){
172 this.callback.call(this.scope || this);
174 this.callback = null;