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

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/dd/DDProxy.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  * @class Roo.dd.DDProxy
  14  * A DragDrop implementation that inserts an empty, bordered div into
  15  * the document that follows the cursor during drag operations.  At the time of
  16  * the click, the frame div is resized to the dimensions of the linked html
  17  * element, and moved to the exact location of the linked element.
  18  *
  19  * References to the &quot;frame&quot; element refer to the single proxy element that
  20  * was created to be dragged in place of all DDProxy elements on the
  21  * page.
  22  *
  23  * @extends Roo.dd.DD
  24  * @constructor
  25  * @param {String} id the id of the linked html element
  26  * @param {String} sGroup the group of related DragDrop objects
  27  * @param {object} config an object containing configurable attributes
  28  *                Valid properties for DDProxy in addition to those in DragDrop:
  29  *                   resizeFrame, centerFrame, dragElId
  30  */
  31 </span><span class="jsdoc-var">Roo.dd.DDProxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) {
  32     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">) {
  33         </span><span class="jsdoc-var">this.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  34         </span><span class="jsdoc-var">this.initFrame</span><span class="jsdoc-syntax">();
  35     }
  36 };
  37
  38 </span><span class="jsdoc-comment">/**
  39  * The default drag frame div id
  40  * @property Roo.dd.DDProxy.dragElId
  41  * @type String
  42  * @static
  43  */
  44 </span><span class="jsdoc-var">Roo.dd.DDProxy.dragElId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ygddfdiv&quot;</span><span class="jsdoc-syntax">;
  45
  46 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.dd.DDProxy</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.dd.DD</span><span class="jsdoc-syntax">, {
  47
  48     </span><span class="jsdoc-comment">/**
  49      * By default we resize the drag frame to be the same size as the element
  50      * we want to drag (this is to get the frame effect).  We can turn it off
  51      * if we want a different behavior.
  52      * @property resizeFrame
  53      * @type boolean
  54      */
  55     </span><span class="jsdoc-var">resizeFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  56
  57     </span><span class="jsdoc-comment">/**
  58      * By default the frame is positioned exactly where the drag element is, so
  59      * we use the cursor offset provided by Roo.dd.DD.  Another option that works only if
  60      * you do not have constraints on the obj is to have the drag frame centered
  61      * around the cursor.  Set centerFrame to true for this effect.
  62      * @property centerFrame
  63      * @type boolean
  64      */
  65     </span><span class="jsdoc-var">centerFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  66
  67     </span><span class="jsdoc-comment">/**
  68      * Creates the proxy element if it does not yet exist
  69      * @method createFrame
  70      */
  71     </span><span class="jsdoc-var">createFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
  72         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">self </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
  73         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">;
  74
  75         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">body.firstChild</span><span class="jsdoc-syntax">) {
  76             </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">self.createFrame</span><span class="jsdoc-syntax">(); }, 50 );
  77             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  78         }
  79
  80         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
  81
  82         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">) {
  83             </span><span class="jsdoc-var">div    </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
  84             </span><span class="jsdoc-var">div.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dragElId</span><span class="jsdoc-syntax">;
  85             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">div.style</span><span class="jsdoc-syntax">;
  86
  87             </span><span class="jsdoc-var">s.position   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">;
  88             </span><span class="jsdoc-var">s.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
  89             </span><span class="jsdoc-var">s.cursor     </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;move&quot;</span><span class="jsdoc-syntax">;
  90             </span><span class="jsdoc-var">s.border     </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;2px solid #aaa&quot;</span><span class="jsdoc-syntax">;
  91             </span><span class="jsdoc-var">s.zIndex     </span><span class="jsdoc-syntax">= 999;
  92
  93             </span><span class="jsdoc-comment">// appendChild can blow up IE if invoked prior to the window load event
  94             // while rendering a table.  It is possible there are other scenarios
  95             // that would cause this to happen as well.
  96             </span><span class="jsdoc-var">body.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">body.firstChild</span><span class="jsdoc-syntax">);
  97         }
  98     },
  99
 100     </span><span class="jsdoc-comment">/**
 101      * Initialization for the drag frame element.  Must be called in the
 102      * constructor of all subclasses
 103      * @method initFrame
 104      */
 105     </span><span class="jsdoc-var">initFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 106         </span><span class="jsdoc-var">this.createFrame</span><span class="jsdoc-syntax">();
 107     },
 108
 109     </span><span class="jsdoc-var">applyConfig</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 110         </span><span class="jsdoc-var">Roo.dd.DDProxy.superclass.applyConfig.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 111
 112         </span><span class="jsdoc-var">this.resizeFrame </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.resizeFrame </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 113         </span><span class="jsdoc-var">this.centerFrame </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.config.centerFrame</span><span class="jsdoc-syntax">);
 114         </span><span class="jsdoc-var">this.setDragElId</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.config.dragElId </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.dd.DDProxy.dragElId</span><span class="jsdoc-syntax">);
 115     },
 116
 117     </span><span class="jsdoc-comment">/**
 118      * Resizes the drag frame to the dimensions of the clicked object, positions
 119      * it over the object, and finally displays it
 120      * @method showFrame
 121      * @param {int} iPageX X click position
 122      * @param {int} iPageY Y click position
 123      * @private
 124      */
 125     </span><span class="jsdoc-var">showFrame</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iPageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iPageY</span><span class="jsdoc-syntax">) {
 126         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
 127         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
 128         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dragEl.style</span><span class="jsdoc-syntax">;
 129
 130         </span><span class="jsdoc-var">this._resizeProxy</span><span class="jsdoc-syntax">();
 131
 132         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.centerFrame</span><span class="jsdoc-syntax">) {
 133             </span><span class="jsdoc-var">this.setDelta</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s.width</span><span class="jsdoc-syntax">,  10)/2),
 134                            </span><span class="jsdoc-var">Math.round</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parseInt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s.height</span><span class="jsdoc-syntax">, 10)/2) );
 135         }
 136
 137         </span><span class="jsdoc-var">this.setDragElPos</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">iPageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">iPageY</span><span class="jsdoc-syntax">);
 138
 139         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dragEl</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.show</span><span class="jsdoc-syntax">();
 140     },
 141
 142     </span><span class="jsdoc-comment">/**
 143      * The proxy is automatically resized to the dimensions of the linked
 144      * element when a drag is initiated, unless resizeFrame is set to false
 145      * @method _resizeProxy
 146      * @private
 147      */
 148     </span><span class="jsdoc-var">_resizeProxy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 149         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeFrame</span><span class="jsdoc-syntax">) {
 150             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
 151             </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.offsetWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.offsetHeight</span><span class="jsdoc-syntax">);
 152         }
 153     },
 154
 155     </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
 156     </span><span class="jsdoc-var">b4MouseDown</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 157         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageX</span><span class="jsdoc-syntax">();
 158         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getPageY</span><span class="jsdoc-syntax">();
 159         </span><span class="jsdoc-var">this.autoOffset</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
 160         </span><span class="jsdoc-var">this.setDragElPos</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
 161     },
 162
 163     </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
 164     </span><span class="jsdoc-var">b4StartDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">) {
 165         </span><span class="jsdoc-comment">// show the drag frame
 166         </span><span class="jsdoc-var">this.showFrame</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
 167     },
 168
 169     </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
 170     </span><span class="jsdoc-var">b4EndDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 171         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">())</span><span class="jsdoc-var">.hide</span><span class="jsdoc-syntax">();
 172     },
 173
 174     </span><span class="jsdoc-comment">// overrides Roo.dd.DragDrop
 175     // By default we try to move the element to the last location of the frame.
 176     // This is so that the default behavior mirrors that of Roo.dd.DD.
 177     </span><span class="jsdoc-var">endDrag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 178
 179         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
 180         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">del </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragEl</span><span class="jsdoc-syntax">();
 181
 182         </span><span class="jsdoc-comment">// Show the drag frame briefly so we can get its position
 183         </span><span class="jsdoc-var">del.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 184
 185         </span><span class="jsdoc-var">this.beforeMove</span><span class="jsdoc-syntax">();
 186         </span><span class="jsdoc-comment">// Hide the linked element before the move to get around a Safari
 187         // rendering bug.
 188         </span><span class="jsdoc-var">lel.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
 189         </span><span class="jsdoc-var">Roo.dd.DDM.moveToEl</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">del</span><span class="jsdoc-syntax">);
 190         </span><span class="jsdoc-var">del.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">;
 191         </span><span class="jsdoc-var">lel.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 192
 193         </span><span class="jsdoc-var">this.afterDrag</span><span class="jsdoc-syntax">();
 194     },
 195
 196     </span><span class="jsdoc-var">beforeMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 197
 198     },
 199
 200     </span><span class="jsdoc-var">afterDrag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 201
 202     },
 203
 204     </span><span class="jsdoc-var">toString</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 205         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;DDProxy &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.id</span><span class="jsdoc-syntax">);
 206     }
 207
 208 });
 209 </span></code></body></html>