ScrollManager.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-dd-ScrollManager'>/**
  19. </span> * Provides automatic scrolling of overflow regions in the page during drag operations.
  20. *
  21. * The ScrollManager configs will be used as the defaults for any scroll container registered with it, but you can also
  22. * override most of the configs per scroll container by adding a ddScrollConfig object to the target element that
  23. * contains these properties: {@link #hthresh}, {@link #vthresh}, {@link #increment} and {@link #frequency}. Example
  24. * usage:
  25. *
  26. * var el = Ext.get('scroll-ct');
  27. * el.ddScrollConfig = {
  28. * vthresh: 50,
  29. * hthresh: -1,
  30. * frequency: 100,
  31. * increment: 200
  32. * };
  33. * Ext.dd.ScrollManager.register(el);
  34. *
  35. * Note: This class is designed to be used in &quot;Point Mode
  36. */
  37. Ext.define('Ext.dd.ScrollManager', {
  38. singleton: true,
  39. requires: [
  40. 'Ext.dd.DragDropManager'
  41. ],
  42. constructor: function() {
  43. var ddm = Ext.dd.DragDropManager;
  44. ddm.fireEvents = Ext.Function.createSequence(ddm.fireEvents, this.onFire, this);
  45. ddm.stopDrag = Ext.Function.createSequence(ddm.stopDrag, this.onStop, this);
  46. this.doScroll = Ext.Function.bind(this.doScroll, this);
  47. this.ddmInstance = ddm;
  48. this.els = {};
  49. this.dragEl = null;
  50. this.proc = {};
  51. },
  52. onStop: function(e){
  53. var sm = Ext.dd.ScrollManager;
  54. sm.dragEl = null;
  55. sm.clearProc();
  56. },
  57. triggerRefresh: function() {
  58. if (this.ddmInstance.dragCurrent) {
  59. this.ddmInstance.refreshCache(this.ddmInstance.dragCurrent.groups);
  60. }
  61. },
  62. doScroll: function() {
  63. if (this.ddmInstance.dragCurrent) {
  64. var proc = this.proc,
  65. procEl = proc.el,
  66. ddScrollConfig = proc.el.ddScrollConfig,
  67. inc = ddScrollConfig ? ddScrollConfig.increment : this.increment;
  68. if (!this.animate) {
  69. if (procEl.scroll(proc.dir, inc)) {
  70. this.triggerRefresh();
  71. }
  72. } else {
  73. procEl.scroll(proc.dir, inc, true, this.animDuration, this.triggerRefresh);
  74. }
  75. }
  76. },
  77. clearProc: function() {
  78. var proc = this.proc;
  79. if (proc.id) {
  80. clearInterval(proc.id);
  81. }
  82. proc.id = 0;
  83. proc.el = null;
  84. proc.dir = &quot;&quot;;
  85. },
  86. startProc: function(el, dir) {
  87. this.clearProc();
  88. this.proc.el = el;
  89. this.proc.dir = dir;
  90. var group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup : undefined,
  91. freq = (el.ddScrollConfig &amp;&amp; el.ddScrollConfig.frequency)
  92. ? el.ddScrollConfig.frequency
  93. : this.frequency;
  94. if (group === undefined || this.ddmInstance.dragCurrent.ddGroup == group) {
  95. this.proc.id = setInterval(this.doScroll, freq);
  96. }
  97. },
  98. onFire: function(e, isDrop) {
  99. if (isDrop || !this.ddmInstance.dragCurrent) {
  100. return;
  101. }
  102. if (!this.dragEl || this.dragEl != this.ddmInstance.dragCurrent) {
  103. this.dragEl = this.ddmInstance.dragCurrent;
  104. // refresh regions on drag start
  105. this.refreshCache();
  106. }
  107. var xy = e.getXY(),
  108. pt = e.getPoint(),
  109. proc = this.proc,
  110. els = this.els,
  111. id, el, r, c;
  112. for (id in els) {
  113. el = els[id];
  114. r = el._region;
  115. c = el.ddScrollConfig ? el.ddScrollConfig : this;
  116. if (r &amp;&amp; r.contains(pt) &amp;&amp; el.isScrollable()) {
  117. if (r.bottom - pt.y &lt;= c.vthresh) {
  118. if(proc.el != el){
  119. this.startProc(el, &quot;down&quot;);
  120. }
  121. return;
  122. }else if (r.right - pt.x &lt;= c.hthresh) {
  123. if (proc.el != el) {
  124. this.startProc(el, &quot;left&quot;);
  125. }
  126. return;
  127. } else if(pt.y - r.top &lt;= c.vthresh) {
  128. if (proc.el != el) {
  129. this.startProc(el, &quot;up&quot;);
  130. }
  131. return;
  132. } else if(pt.x - r.left &lt;= c.hthresh) {
  133. if (proc.el != el) {
  134. this.startProc(el, &quot;right&quot;);
  135. }
  136. return;
  137. }
  138. }
  139. }
  140. this.clearProc();
  141. },
  142. <span id='Ext-dd-ScrollManager-method-register'> /**
  143. </span> * Registers new overflow element(s) to auto scroll
  144. * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
  145. * The id of or the element to be scrolled or an array of either
  146. */
  147. register : function(el){
  148. if (Ext.isArray(el)) {
  149. for(var i = 0, len = el.length; i &lt; len; i++) {
  150. this.register(el[i]);
  151. }
  152. } else {
  153. el = Ext.get(el);
  154. this.els[el.id] = el;
  155. }
  156. },
  157. <span id='Ext-dd-ScrollManager-method-unregister'> /**
  158. </span> * Unregisters overflow element(s) so they are no longer scrolled
  159. * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
  160. * The id of or the element to be removed or an array of either
  161. */
  162. unregister : function(el){
  163. if(Ext.isArray(el)){
  164. for (var i = 0, len = el.length; i &lt; len; i++) {
  165. this.unregister(el[i]);
  166. }
  167. }else{
  168. el = Ext.get(el);
  169. delete this.els[el.id];
  170. }
  171. },
  172. <span id='Ext-dd-ScrollManager-property-vthresh'> /**
  173. </span> * The number of pixels from the top or bottom edge of a container the pointer needs to be to trigger scrolling
  174. */
  175. vthresh : 25,
  176. <span id='Ext-dd-ScrollManager-property-hthresh'> /**
  177. </span> * The number of pixels from the right or left edge of a container the pointer needs to be to trigger scrolling
  178. */
  179. hthresh : 25,
  180. <span id='Ext-dd-ScrollManager-property-increment'> /**
  181. </span> * The number of pixels to scroll in each scroll increment
  182. */
  183. increment : 100,
  184. <span id='Ext-dd-ScrollManager-property-frequency'> /**
  185. </span> * The frequency of scrolls in milliseconds
  186. */
  187. frequency : 500,
  188. <span id='Ext-dd-ScrollManager-property-animate'> /**
  189. </span> * True to animate the scroll
  190. */
  191. animate: true,
  192. <span id='Ext-dd-ScrollManager-property-animDuration'> /**
  193. </span> * The animation duration in seconds - MUST BE less than Ext.dd.ScrollManager.frequency!
  194. */
  195. animDuration: 0.4,
  196. <span id='Ext-dd-ScrollManager-property-ddGroup'> /**
  197. </span> * @property {String} ddGroup
  198. * The named drag drop {@link Ext.dd.DragSource#ddGroup group} to which this container belongs. If a ddGroup is
  199. * specified, then container scrolling will only occur when a dragged object is in the same ddGroup.
  200. */
  201. ddGroup: undefined,
  202. <span id='Ext-dd-ScrollManager-method-refreshCache'> /**
  203. </span> * Manually trigger a cache refresh.
  204. */
  205. refreshCache : function(){
  206. var els = this.els,
  207. id;
  208. for (id in els) {
  209. if(typeof els[id] == 'object'){ // for people extending the object prototype
  210. els[id]._region = els[id].getRegion();
  211. }
  212. }
  213. }
  214. });
  215. </pre>
  216. </body>
  217. </html>