src/dd/StatusProxy.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.dd.StatusProxy
   9  * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair.  This is the
  10  * default drag proxy used by all Ext.dd components.
  11  * @constructor
  12  * @param {Object} config
  13  */
  14 Ext.dd.StatusProxy = function(config){
  15     Ext.apply(this, config);
  16     this.id = this.id || Ext.id();
  17     this.el = new Ext.Layer({
  18         dh: {
  19             id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
  20                 {tag: "div", cls: "x-dd-drop-icon"},
  21                 {tag: "div", cls: "x-dd-drag-ghost"}
  22             ]
  23         },
  24         shadow: !config || config.shadow !== false
  25     });
  26     this.ghost = Ext.get(this.el.dom.childNodes[1]);
  27     this.dropStatus = this.dropNotAllowed;
  28 };
  29
  30 Ext.dd.StatusProxy.prototype = {
  31     /**
  32      * @cfg {String} dropAllowed
  33      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
  34      */
  35     dropAllowed : "x-dd-drop-ok",
  36     /**
  37      * @cfg {String} dropNotAllowed
  38      * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
  39      */
  40     dropNotAllowed : "x-dd-drop-nodrop",
  41
  42     /**
  43      * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
  44      * over the current target element.
  45      * @param {String} cssClass The css class for the new drop status indicator image
  46      */
  47     setStatus : function(cssClass){
  48         cssClass = cssClass || this.dropNotAllowed;
  49         if(this.dropStatus != cssClass){
  50             this.el.replaceClass(this.dropStatus, cssClass);
  51             this.dropStatus = cssClass;
  52         }
  53     },
  54
  55     /**
  56      * Resets the status indicator to the default dropNotAllowed value
  57      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
  58      */
  59     reset : function(clearGhost){
  60         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
  61         this.dropStatus = this.dropNotAllowed;
  62         if(clearGhost){
  63             this.ghost.update("");
  64         }
  65     },
  66
  67     /**
  68      * Updates the contents of the ghost element
  69      * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
  70      * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
  71      */
  72     update : function(html){
  73         if(typeof html == "string"){
  74             this.ghost.update(html);
  75         }else{
  76             this.ghost.update("");
  77             html.style.margin = "0";
  78             this.ghost.dom.appendChild(html);
  79         }
  80         var el = this.ghost.dom.firstChild;
  81         if(el){
  82             Ext.fly(el).setStyle('float', 'none');
  83         }
  84     },
  85
  86     /**
  87      * Returns the underlying proxy {@link Ext.Layer}
  88      * @return {Ext.Layer} el
  89     */
  90     getEl : function(){
  91         return this.el;
  92     },
  93
  94     /**
  95      * Returns the ghost element
  96      * @return {Ext.Element} el
  97      */
  98     getGhost : function(){
  99         return this.ghost;
 100     },
 101
 102     /**
 103      * Hides the proxy
 104      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
 105      */
 106     hide : function(clear){
 107         this.el.hide();
 108         if(clear){
 109             this.reset(true);
 110         }
 111     },
 112
 113     /**
 114      * Stops the repair animation if it's currently running
 115      */
 116     stop : function(){
 117         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
 118             this.anim.stop();
 119         }
 120     },
 121
 122     /**
 123      * Displays this proxy
 124      */
 125     show : function(){
 126         this.el.show();
 127     },
 128
 129     /**
 130      * Force the Layer to sync its shadow and shim positions to the element
 131      */
 132     sync : function(){
 133         this.el.sync();
 134     },
 135
 136     /**
 137      * Causes the proxy to return to its position of origin via an animation.  Should be called after an
 138      * invalid drop operation by the item being dragged.
 139      * @param {Array} xy The XY position of the element ([x, y])
 140      * @param {Function} callback The function to call after the repair is complete.
 141      * @param {Object} scope The scope (<code>this</code> reference) in which the callback function is executed. Defaults to the browser window.
 142      */
 143     repair : function(xy, callback, scope){
 144         this.callback = callback;
 145         this.scope = scope;
 146         if(xy && this.animRepair !== false){
 147             this.el.addClass("x-dd-drag-repair");
 148             this.el.hideUnders(true);
 149             this.anim = this.el.shift({
 150                 duration: this.repairDuration || .5,
 151                 easing: 'easeOut',
 152                 xy: xy,
 153                 stopFx: true,
 154                 callback: this.afterRepair,
 155                 scope: this
 156             });
 157         }else{
 158             this.afterRepair();
 159         }
 160     },
 161
 162     // private
 163     afterRepair : function(){
 164         this.hide(true);
 165         if(typeof this.callback == "function"){
 166             this.callback.call(this.scope || this);
 167         }
 168         this.callback = null;
 169         this.scope = null;
 170     },
 171
 172     destroy: function(){
 173         Ext.destroy(this.ghost, this.el);
 174     }
 175 };