git.roojs.org Git - roojs1/blob - Roo/dd/StatusProxy.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13 /**
  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.
  17  * @constructor
  18  * @param {Object} config
  19  */
  20 Roo.dd.StatusProxy = function(config){
  21     Roo.apply(this, config);
  22     this.id = this.id || Roo.id();
  23     this.el = new Roo.Layer({
  24         dh: {
  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"}
  28             ]
  29         },
  30         shadow: !config || config.shadow !== false
  31     });
  32     this.ghost = Roo.get(this.el.dom.childNodes[1]);
  33     this.dropStatus = this.dropNotAllowed;
  34 };
  35
  36 Roo.dd.StatusProxy.prototype = {
  37     /**
  38      * @cfg {String} dropAllowed
  39      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
  40      */
  41     dropAllowed : "x-dd-drop-ok",
  42     /**
  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").
  45      */
  46     dropNotAllowed : "x-dd-drop-nodrop",
  47
  48     /**
  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
  52      */
  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;
  58         }
  59     },
  60
  61     /**
  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
  64      */
  65     reset : function(clearGhost){
  66         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
  67         this.dropStatus = this.dropNotAllowed;
  68         if(clearGhost){
  69             this.ghost.update("");
  70         }
  71     },
  72
  73     /**
  74      * Updates the contents of the ghost element
  75      * @param {String} html The html that will replace the current innerHTML of the ghost element
  76      */
  77     update : function(html){
  78         if(typeof html == "string"){
  79             this.ghost.update(html);
  80         }else{
  81             this.ghost.update("");
  82             html.style.margin = "0";
  83             this.ghost.dom.appendChild(html);
  84         }
  85         // ensure float = none set?? cant remember why though.
  86         var el = this.ghost.dom.firstChild;
  87                 if(el){
  88                         Roo.fly(el).setStyle('float', 'none');
  89                 }
  90     },
  91
  92     /**
  93      * Returns the underlying proxy {@link Roo.Layer}
  94      * @return {Roo.Layer} el
  95     */
  96     getEl : function(){
  97         return this.el;
  98     },
  99
 100     /**
 101      * Returns the ghost element
 102      * @return {Roo.Element} el
 103      */
 104     getGhost : function(){
 105         return this.ghost;
 106     },
 107
 108     /**
 109      * Hides the proxy
 110      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
 111      */
 112     hide : function(clear){
 113         this.el.hide();
 114         if(clear){
 115             this.reset(true);
 116         }
 117     },
 118
 119     /**
 120      * Stops the repair animation if it's currently running
 121      */
 122     stop : function(){
 123         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
 124             this.anim.stop();
 125         }
 126     },
 127
 128     /**
 129      * Displays this proxy
 130      */
 131     show : function(){
 132         this.el.show();
 133     },
 134
 135     /**
 136      * Force the Layer to sync its shadow and shim positions to the element
 137      */
 138     sync : function(){
 139         this.el.sync();
 140     },
 141
 142     /**
 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
 148      */
 149     repair : function(xy, callback, scope){
 150         this.callback = callback;
 151         this.scope = scope;
 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,
 157                 easing: 'easeOut',
 158                 xy: xy,
 159                 stopFx: true,
 160                 callback: this.afterRepair,
 161                 scope: this
 162             });
 163         }else{
 164             this.afterRepair();
 165         }
 166     },
 167
 168     // private
 169     afterRepair : function(){
 170         this.hide(true);
 171         if(typeof this.callback == "function"){
 172             this.callback.call(this.scope || this);
 173         }
 174         this.callback = null;
 175         this.scope = null;
 176     }
 177 };