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

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/dd/ScrollManager.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.ScrollManager
  15  * Provides automatic scrolling of overflow regions in the page during drag operations.&lt;br&gt;&lt;br&gt;
  16  * &lt;b&gt;Note: This class uses &quot;Point Mode&quot; and is untested in &quot;Intersect Mode&quot;.&lt;/b&gt;
  17  * @singleton
  18  */
  19 </span><span class="jsdoc-var">Roo.dd.ScrollManager </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  20     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ddm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dd.DragDropMgr</span><span class="jsdoc-syntax">;
  21     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">els </span><span class="jsdoc-syntax">= {};
  22     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  23     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">proc </span><span class="jsdoc-syntax">= {};
  24
  25
  26
  27     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">onStop </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">){
  28         </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  29         </span><span class="jsdoc-var">clearProc</span><span class="jsdoc-syntax">();
  30     };
  31
  32     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">triggerRefresh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  33         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddm.dragCurrent</span><span class="jsdoc-syntax">){
  34              </span><span class="jsdoc-var">ddm.refreshCache</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddm.dragCurrent.groups</span><span class="jsdoc-syntax">);
  35         }
  36     };
  37
  38     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">doScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  39         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ddm.dragCurrent</span><span class="jsdoc-syntax">){
  40             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dd.ScrollManager</span><span class="jsdoc-syntax">;
  41             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">dds.animate</span><span class="jsdoc-syntax">){
  42                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.el.scroll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.dir</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dds.increment</span><span class="jsdoc-syntax">)){
  43                     </span><span class="jsdoc-var">triggerRefresh</span><span class="jsdoc-syntax">();
  44                 }
  45             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  46                 </span><span class="jsdoc-var">proc.el.scroll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.dir</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dds.increment</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dds.animDuration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">triggerRefresh</span><span class="jsdoc-syntax">);
  47             }
  48         }
  49     };
  50
  51     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">clearProc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  52         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.id</span><span class="jsdoc-syntax">){
  53             </span><span class="jsdoc-var">clearInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.id</span><span class="jsdoc-syntax">);
  54         }
  55         </span><span class="jsdoc-var">proc.id </span><span class="jsdoc-syntax">= 0;
  56         </span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  57         </span><span class="jsdoc-var">proc.dir </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
  58     };
  59
  60     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">startProc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">){
  61          </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'scroll startproc'</span><span class="jsdoc-syntax">);
  62         </span><span class="jsdoc-var">clearProc</span><span class="jsdoc-syntax">();
  63         </span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
  64         </span><span class="jsdoc-var">proc.dir </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">;
  65         </span><span class="jsdoc-var">proc.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doScroll</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.dd.ScrollManager.frequency</span><span class="jsdoc-syntax">);
  66     };
  67
  68     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">onFire </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">, </span><span class="jsdoc-var">isDrop</span><span class="jsdoc-syntax">){
  69
  70         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">isDrop </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">ddm.dragCurrent</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; }
  71         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.dd.ScrollManager</span><span class="jsdoc-syntax">;
  72         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">ddm.dragCurrent</span><span class="jsdoc-syntax">){
  73             </span><span class="jsdoc-var">dragEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ddm.dragCurrent</span><span class="jsdoc-syntax">;
  74             </span><span class="jsdoc-comment">// refresh regions on drag start
  75             </span><span class="jsdoc-var">dds.refreshCache</span><span class="jsdoc-syntax">();
  76         }
  77
  78         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Event.getXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
  79         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.lib.Point</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0], </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1]);
  80         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
  81             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el._region</span><span class="jsdoc-syntax">;
  82             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">r.contains</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">) &amp;&amp; </span><span class="jsdoc-var">el.isScrollable</span><span class="jsdoc-syntax">()){
  83                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.bottom </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">dds.thresh</span><span class="jsdoc-syntax">){
  84                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
  85                         </span><span class="jsdoc-var">startProc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">);
  86                     }
  87                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  88                 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.right </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">dds.thresh</span><span class="jsdoc-syntax">){
  89                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
  90                         </span><span class="jsdoc-var">startProc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">);
  91                     }
  92                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  93                 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">r.top </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">dds.thresh</span><span class="jsdoc-syntax">){
  94                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
  95                         </span><span class="jsdoc-var">startProc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">);
  96                     }
  97                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  98                 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">r.left </span><span class="jsdoc-syntax">&lt;= </span><span class="jsdoc-var">dds.thresh</span><span class="jsdoc-syntax">){
  99                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">proc.el </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 100                         </span><span class="jsdoc-var">startProc</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">);
 101                     }
 102                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 103                 }
 104             }
 105         }
 106         </span><span class="jsdoc-var">clearProc</span><span class="jsdoc-syntax">();
 107     };
 108
 109     </span><span class="jsdoc-var">ddm.fireEvents </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ddm.fireEvents.createSequence</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">onFire</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ddm</span><span class="jsdoc-syntax">);
 110     </span><span class="jsdoc-var">ddm.stopDrag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ddm.stopDrag.createSequence</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">onStop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ddm</span><span class="jsdoc-syntax">);
 111
 112     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 113         </span><span class="jsdoc-comment">/**
 114          * Registers new overflow element(s) to auto scroll
 115          * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
 116          */
 117         </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 118             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
 119                 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 120                         </span><span class="jsdoc-var">this.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 121                 }
 122             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 123                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 124                 </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 125             }
 126             </span><span class="jsdoc-var">Roo.dd.ScrollManager.els </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">;
 127         },
 128
 129         </span><span class="jsdoc-comment">/**
 130          * Unregisters overflow element(s) so they are no longer scrolled
 131          * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
 132          */
 133         </span><span class="jsdoc-var">unregister </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 134             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
 135                 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 136                         </span><span class="jsdoc-var">this.unregister</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 137                 }
 138             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 139                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 140                 </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el.id</span><span class="jsdoc-syntax">];
 141             }
 142         },
 143
 144         </span><span class="jsdoc-comment">/**
 145          * The number of pixels from the edge of a container the pointer needs to be to
 146          * trigger scrolling (defaults to 25)
 147          * @type Number
 148          */
 149         </span><span class="jsdoc-var">thresh </span><span class="jsdoc-syntax">: 25,
 150
 151         </span><span class="jsdoc-comment">/**
 152          * The number of pixels to scroll in each scroll increment (defaults to 50)
 153          * @type Number
 154          */
 155         </span><span class="jsdoc-var">increment </span><span class="jsdoc-syntax">: 100,
 156
 157         </span><span class="jsdoc-comment">/**
 158          * The frequency of scrolls in milliseconds (defaults to 500)
 159          * @type Number
 160          */
 161         </span><span class="jsdoc-var">frequency </span><span class="jsdoc-syntax">: 500,
 162
 163         </span><span class="jsdoc-comment">/**
 164          * True to animate the scroll (defaults to true)
 165          * @type Boolean
 166          */
 167         </span><span class="jsdoc-var">animate</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 168
 169         </span><span class="jsdoc-comment">/**
 170          * The animation duration in seconds -
 171          * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
 172          * @type Number
 173          */
 174         </span><span class="jsdoc-var">animDuration</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">.4</span><span class="jsdoc-syntax">,
 175
 176         </span><span class="jsdoc-comment">/**
 177          * Manually trigger a cache refresh.
 178          */
 179         </span><span class="jsdoc-var">refreshCache </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 180             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">){
 181                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// for people extending the object prototype
 182                     </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">._region </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">els</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getRegion</span><span class="jsdoc-syntax">();
 183                 }
 184             }
 185         }
 186     };
 187 }();</span></code></body></html>