git.roojs.org Git - roojs1/blob - docs/src/Roo_dd_StatusProxy.js.html

   1 <html><head><title>Roo/dd/StatusProxy.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   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  * &lt;script type=&quot;text/javascript&quot;&gt;
  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 </span><span class="jsdoc-var">Roo.dd.StatusProxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  21     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  22     </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
  23     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Layer</span><span class="jsdoc-syntax">({
  24         </span><span class="jsdoc-var">dh</span><span class="jsdoc-syntax">: {
  25             </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dd-drag-proxy &quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">children</span><span class="jsdoc-syntax">: [
  26                 {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dd-drop-icon&quot;</span><span class="jsdoc-syntax">},
  27                 {</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dd-drag-ghost&quot;</span><span class="jsdoc-syntax">}
  28             ]
  29         },
  30         </span><span class="jsdoc-var">shadow</span><span class="jsdoc-syntax">: !</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">config.shadow </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false
  31     </span><span class="jsdoc-syntax">});
  32     </span><span class="jsdoc-var">this.ghost </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.dom.childNodes</span><span class="jsdoc-syntax">[1]);
  33     </span><span class="jsdoc-var">this.dropStatus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
  34 };
  35
  36 </span><span class="jsdoc-var">Roo.dd.StatusProxy.prototype </span><span class="jsdoc-syntax">= {
  37     </span><span class="jsdoc-comment">/**
  38      * @cfg {String} dropAllowed
  39      * The CSS class to apply to the status element when drop is allowed (defaults to &quot;x-dd-drop-ok&quot;).
  40      */
  41     </span><span class="jsdoc-var">dropAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dd-drop-ok&quot;</span><span class="jsdoc-syntax">,
  42     </span><span class="jsdoc-comment">/**
  43      * @cfg {String} dropNotAllowed
  44      * The CSS class to apply to the status element when drop is not allowed (defaults to &quot;x-dd-drop-nodrop&quot;).
  45      */
  46     </span><span class="jsdoc-var">dropNotAllowed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-dd-drop-nodrop&quot;</span><span class="jsdoc-syntax">,
  47
  48     </span><span class="jsdoc-comment">/**
  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     </span><span class="jsdoc-var">setStatus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">){
  54         </span><span class="jsdoc-var">cssClass </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssClass </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
  55         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropStatus </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">){
  56             </span><span class="jsdoc-var">this.el.replaceClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropStatus</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">);
  57             </span><span class="jsdoc-var">this.dropStatus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssClass</span><span class="jsdoc-syntax">;
  58         }
  59     },
  60
  61     </span><span class="jsdoc-comment">/**
  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     </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clearGhost</span><span class="jsdoc-syntax">){
  66         </span><span class="jsdoc-var">this.el.dom.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;x-dd-drag-proxy &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
  67         </span><span class="jsdoc-var">this.dropStatus </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dropNotAllowed</span><span class="jsdoc-syntax">;
  68         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clearGhost</span><span class="jsdoc-syntax">){
  69             </span><span class="jsdoc-var">this.ghost.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  70         }
  71     },
  72
  73     </span><span class="jsdoc-comment">/**
  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     </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">){
  78         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
  79             </span><span class="jsdoc-var">this.ghost.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
  80         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  81             </span><span class="jsdoc-var">this.ghost.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  82             </span><span class="jsdoc-var">html.style.margin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;0&quot;</span><span class="jsdoc-syntax">;
  83             </span><span class="jsdoc-var">this.ghost.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
  84         }
  85         </span><span class="jsdoc-comment">// ensure float = none set?? cant remember why though.
  86         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.ghost.dom.firstChild</span><span class="jsdoc-syntax">;
  87                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
  88                         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'float'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'none'</span><span class="jsdoc-syntax">);
  89                 }
  90     },
  91
  92     </span><span class="jsdoc-comment">/**
  93      * Returns the underlying proxy {@link Roo.Layer}
  94      * @return {Roo.Layer} el
  95     */
  96     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  97         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
  98     },
  99
 100     </span><span class="jsdoc-comment">/**
 101      * Returns the ghost element
 102      * @return {Roo.Element} el
 103      */
 104     </span><span class="jsdoc-var">getGhost </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 105         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.ghost</span><span class="jsdoc-syntax">;
 106     },
 107
 108     </span><span class="jsdoc-comment">/**
 109      * Hides the proxy
 110      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
 111      */
 112     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clear</span><span class="jsdoc-syntax">){
 113         </span><span class="jsdoc-var">this.el.hide</span><span class="jsdoc-syntax">();
 114         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">clear</span><span class="jsdoc-syntax">){
 115             </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 116         }
 117     },
 118
 119     </span><span class="jsdoc-comment">/**
 120      * Stops the repair animation if it's currently running
 121      */
 122     </span><span class="jsdoc-var">stop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 123         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.anim </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.anim.isAnimated </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.anim.isAnimated</span><span class="jsdoc-syntax">()){
 124             </span><span class="jsdoc-var">this.anim.stop</span><span class="jsdoc-syntax">();
 125         }
 126     },
 127
 128     </span><span class="jsdoc-comment">/**
 129      * Displays this proxy
 130      */
 131     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 132         </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
 133     },
 134
 135     </span><span class="jsdoc-comment">/**
 136      * Force the Layer to sync its shadow and shim positions to the element
 137      */
 138     </span><span class="jsdoc-var">sync </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 139         </span><span class="jsdoc-var">this.el.sync</span><span class="jsdoc-syntax">();
 140     },
 141
 142     </span><span class="jsdoc-comment">/**
 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     </span><span class="jsdoc-var">repair </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
 150         </span><span class="jsdoc-var">this.callback </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">;
 151         </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">;
 152         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.animRepair </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
 153             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-dd-drag-repair&quot;</span><span class="jsdoc-syntax">);
 154             </span><span class="jsdoc-var">this.el.hideUnders</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 155             </span><span class="jsdoc-var">this.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.shift</span><span class="jsdoc-syntax">({
 156                 </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.repairDuration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">,
 157                 </span><span class="jsdoc-var">easing</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">,
 158                 </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">,
 159                 </span><span class="jsdoc-var">stopFx</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 160                 </span><span class="jsdoc-var">callback</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.afterRepair</span><span class="jsdoc-syntax">,
 161                 </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this
 162             </span><span class="jsdoc-syntax">});
 163         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 164             </span><span class="jsdoc-var">this.afterRepair</span><span class="jsdoc-syntax">();
 165         }
 166     },
 167
 168     </span><span class="jsdoc-comment">// private
 169     </span><span class="jsdoc-var">afterRepair </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 170         </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 171         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">this.callback </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
 172             </span><span class="jsdoc-var">this.callback.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 173         }
 174         </span><span class="jsdoc-var">this.callback </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 175         </span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 176     }
 177 };</span></code></body></html>