src/dd/StatusProxy.js

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