ClickRepeater.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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-util-ClickRepeater'>/**
  19. </span> * A wrapper class which can be applied to any element. Fires a &quot;click&quot; event while the
  20. * mouse is pressed. The interval between firings may be specified in the config but
  21. * defaults to 20 milliseconds.
  22. *
  23. * Optionally, a CSS class may be applied to the element during the time it is pressed.
  24. */
  25. Ext.define('Ext.util.ClickRepeater', {
  26. extend: 'Ext.util.Observable',
  27. <span id='Ext-util-ClickRepeater-method-constructor'> /**
  28. </span> * Creates new ClickRepeater.
  29. * @param {String/HTMLElement/Ext.Element} el The element or its ID to listen on
  30. * @param {Object} [config] Config object.
  31. */
  32. constructor : function(el, config){
  33. var me = this;
  34. me.el = Ext.get(el);
  35. me.el.unselectable();
  36. Ext.apply(me, config);
  37. me.callParent();
  38. me.addEvents(
  39. <span id='Ext-util-ClickRepeater-event-mousedown'> /**
  40. </span> * @event mousedown
  41. * Fires when the mouse button is depressed.
  42. * @param {Ext.util.ClickRepeater} this
  43. * @param {Ext.EventObject} e
  44. */
  45. &quot;mousedown&quot;,
  46. <span id='Ext-util-ClickRepeater-event-click'> /**
  47. </span> * @event click
  48. * Fires on a specified interval during the time the element is pressed.
  49. * @param {Ext.util.ClickRepeater} this
  50. * @param {Ext.EventObject} e
  51. */
  52. &quot;click&quot;,
  53. <span id='Ext-util-ClickRepeater-event-mouseup'> /**
  54. </span> * @event mouseup
  55. * Fires when the mouse key is released.
  56. * @param {Ext.util.ClickRepeater} this
  57. * @param {Ext.EventObject} e
  58. */
  59. &quot;mouseup&quot;
  60. );
  61. if(!me.disabled){
  62. me.disabled = true;
  63. me.enable();
  64. }
  65. // allow inline handler
  66. if(me.handler){
  67. me.on(&quot;click&quot;, me.handler, me.scope || me);
  68. }
  69. },
  70. <span id='Ext-util-ClickRepeater-cfg-el'> /**
  71. </span> * @cfg {String/HTMLElement/Ext.Element} el
  72. * The element to act as a button.
  73. */
  74. <span id='Ext-util-ClickRepeater-cfg-pressedCls'> /**
  75. </span> * @cfg {String} pressedCls
  76. * A CSS class name to be applied to the element while pressed.
  77. */
  78. <span id='Ext-util-ClickRepeater-cfg-accelerate'> /**
  79. </span> * @cfg {Boolean} accelerate
  80. * True if autorepeating should start slowly and accelerate.
  81. * &quot;interval&quot; and &quot;delay&quot; are ignored.
  82. */
  83. <span id='Ext-util-ClickRepeater-cfg-interval'> /**
  84. </span> * @cfg {Number} interval
  85. * The interval between firings of the &quot;click&quot; event (in milliseconds).
  86. */
  87. interval : 20,
  88. <span id='Ext-util-ClickRepeater-cfg-delay'> /**
  89. </span> * @cfg {Number} delay
  90. * The initial delay before the repeating event begins firing.
  91. * Similar to an autorepeat key delay.
  92. */
  93. delay: 250,
  94. <span id='Ext-util-ClickRepeater-cfg-preventDefault'> /**
  95. </span> * @cfg {Boolean} preventDefault
  96. * True to prevent the default click event
  97. */
  98. preventDefault : true,
  99. <span id='Ext-util-ClickRepeater-cfg-stopDefault'> /**
  100. </span> * @cfg {Boolean} stopDefault
  101. * True to stop the default click event
  102. */
  103. stopDefault : false,
  104. timer : 0,
  105. <span id='Ext-util-ClickRepeater-method-enable'> /**
  106. </span> * Enables the repeater and allows events to fire.
  107. */
  108. enable: function(){
  109. if(this.disabled){
  110. this.el.on('mousedown', this.handleMouseDown, this);
  111. // IE versions will detect clicks as in sequence as dblclicks
  112. // if they happen in quick succession
  113. if (Ext.isIE &amp;&amp; !(Ext.isStrict &amp;&amp; Ext.isIE9)){
  114. this.el.on('dblclick', this.handleDblClick, this);
  115. }
  116. if(this.preventDefault || this.stopDefault){
  117. this.el.on('click', this.eventOptions, this);
  118. }
  119. }
  120. this.disabled = false;
  121. },
  122. <span id='Ext-util-ClickRepeater-method-disable'> /**
  123. </span> * Disables the repeater and stops events from firing.
  124. */
  125. disable: function(/* private */ force){
  126. if(force || !this.disabled){
  127. clearTimeout(this.timer);
  128. if(this.pressedCls){
  129. this.el.removeCls(this.pressedCls);
  130. }
  131. Ext.getDoc().un('mouseup', this.handleMouseUp, this);
  132. this.el.removeAllListeners();
  133. }
  134. this.disabled = true;
  135. },
  136. <span id='Ext-util-ClickRepeater-method-setDisabled'> /**
  137. </span> * Convenience function for setting disabled/enabled by boolean.
  138. * @param {Boolean} disabled
  139. */
  140. setDisabled: function(disabled){
  141. this[disabled ? 'disable' : 'enable']();
  142. },
  143. eventOptions: function(e){
  144. if(this.preventDefault){
  145. e.preventDefault();
  146. }
  147. if(this.stopDefault){
  148. e.stopEvent();
  149. }
  150. },
  151. // private
  152. destroy : function() {
  153. this.disable(true);
  154. Ext.destroy(this.el);
  155. this.clearListeners();
  156. },
  157. handleDblClick : function(e){
  158. clearTimeout(this.timer);
  159. this.el.blur();
  160. this.fireEvent(&quot;mousedown&quot;, this, e);
  161. this.fireEvent(&quot;click&quot;, this, e);
  162. },
  163. // private
  164. handleMouseDown : function(e){
  165. clearTimeout(this.timer);
  166. this.el.blur();
  167. if(this.pressedCls){
  168. this.el.addCls(this.pressedCls);
  169. }
  170. this.mousedownTime = new Date();
  171. Ext.getDoc().on(&quot;mouseup&quot;, this.handleMouseUp, this);
  172. this.el.on(&quot;mouseout&quot;, this.handleMouseOut, this);
  173. this.fireEvent(&quot;mousedown&quot;, this, e);
  174. this.fireEvent(&quot;click&quot;, this, e);
  175. // Do not honor delay or interval if acceleration wanted.
  176. if (this.accelerate) {
  177. this.delay = 400;
  178. }
  179. // Re-wrap the event object in a non-shared object, so it doesn't lose its context if
  180. // the global shared EventObject gets a new Event put into it before the timer fires.
  181. e = new Ext.EventObjectImpl(e);
  182. this.timer = Ext.defer(this.click, this.delay || this.interval, this, [e]);
  183. },
  184. // private
  185. click : function(e){
  186. this.fireEvent(&quot;click&quot;, this, e);
  187. this.timer = Ext.defer(this.click, this.accelerate ?
  188. this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
  189. 400,
  190. -390,
  191. 12000) :
  192. this.interval, this, [e]);
  193. },
  194. easeOutExpo : function (t, b, c, d) {
  195. return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  196. },
  197. // private
  198. handleMouseOut : function(){
  199. clearTimeout(this.timer);
  200. if(this.pressedCls){
  201. this.el.removeCls(this.pressedCls);
  202. }
  203. this.el.on(&quot;mouseover&quot;, this.handleMouseReturn, this);
  204. },
  205. // private
  206. handleMouseReturn : function(){
  207. this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
  208. if(this.pressedCls){
  209. this.el.addCls(this.pressedCls);
  210. }
  211. this.click();
  212. },
  213. // private
  214. handleMouseUp : function(e){
  215. clearTimeout(this.timer);
  216. this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
  217. this.el.un(&quot;mouseout&quot;, this.handleMouseOut, this);
  218. Ext.getDoc().un(&quot;mouseup&quot;, this.handleMouseUp, this);
  219. if(this.pressedCls){
  220. this.el.removeCls(this.pressedCls);
  221. }
  222. this.fireEvent(&quot;mouseup&quot;, this, e);
  223. }
  224. });
  225. </pre>
  226. </body>
  227. </html>