1 <html><head><title>Roo/util/ClickRepeater.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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 * @class Roo.util.ClickRepeater
16 * @extends Roo.util.Observable
18 * A wrapper class which can be applied to any element. Fires a "click" event while the
19 * mouse is pressed. The interval between firings may be specified in the config but
20 * defaults to 10 milliseconds.
22 * Optionally, a CSS class may be applied to the element during the time it is pressed.
24 * @cfg {String/HTMLElement/Element} el The element to act as a button.
25 * @cfg {Number} delay The initial delay before the repeating event begins firing.
26 * Similar to an autorepeat key delay.
27 * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
28 * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
29 * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
30 * "interval" and "delay" are ignored. "immediate" is honored.
31 * @cfg {Boolean} preventDefault True to prevent the default click event
32 * @cfg {Boolean} stopDefault True to stop the default click event
35 * 2007-02-02 jvs Original code contributed by Nige "Animal" White
36 * 2007-02-02 jvs Renamed to ClickRepeater
37 * 2007-02-03 jvs Modifications for FF Mac and Safari
40 * @param {String/HTMLElement/Element} el The element to listen on
41 * @param {Object} config
43 </span><span class="jsdoc-var">Roo.util.ClickRepeater </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">config</span><span class="jsdoc-syntax">)
45 </span><span class="jsdoc-var">this.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">);
46 </span><span class="jsdoc-var">this.el.unselectable</span><span class="jsdoc-syntax">();
48 </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">);
50 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
51 </span><span class="jsdoc-comment">/**
53 * Fires when the mouse button is depressed.
54 * @param {Roo.util.ClickRepeater} this
56 </span><span class="jsdoc-string">"mousedown" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
57 </span><span class="jsdoc-comment">/**
59 * Fires on a specified interval during the time the element is pressed.
60 * @param {Roo.util.ClickRepeater} this
62 </span><span class="jsdoc-string">"click" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
63 </span><span class="jsdoc-comment">/**
65 * Fires when the mouse key is released.
66 * @param {Roo.util.ClickRepeater} this
68 </span><span class="jsdoc-string">"mouseup" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
69 </span><span class="jsdoc-syntax">});
71 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mousedown"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
72 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.preventDefault </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.stopDefault</span><span class="jsdoc-syntax">){
73 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</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">){
74 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.preventDefault</span><span class="jsdoc-syntax">){
75 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
77 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.stopDefault</span><span class="jsdoc-syntax">){
78 </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
80 }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
83 </span><span class="jsdoc-comment">// allow inline handler
84 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.handler</span><span class="jsdoc-syntax">){
85 </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handler</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">);
88 </span><span class="jsdoc-var">Roo.util.ClickRepeater.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
91 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.util.ClickRepeater</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
92 </span><span class="jsdoc-var">interval </span><span class="jsdoc-syntax">: 20,
93 </span><span class="jsdoc-var">delay</span><span class="jsdoc-syntax">: 250,
94 </span><span class="jsdoc-var">preventDefault </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
95 </span><span class="jsdoc-var">stopDefault </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
96 </span><span class="jsdoc-var">timer </span><span class="jsdoc-syntax">: 0,
98 </span><span class="jsdoc-comment">// private
99 </span><span class="jsdoc-var">handleMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
100 </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
101 </span><span class="jsdoc-var">this.el.blur</span><span class="jsdoc-syntax">();
102 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">){
103 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">);
105 </span><span class="jsdoc-var">this.mousedownTime </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">();
107 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseup"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseUp</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
108 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseout"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseOut</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
110 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mousedown"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
111 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
113 </span><span class="jsdoc-var">this.timer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.click.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.delay </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.interval</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
116 </span><span class="jsdoc-comment">// private
117 </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
118 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"click"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
119 </span><span class="jsdoc-var">this.timer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.click.defer</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getInterval</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
122 </span><span class="jsdoc-comment">// private
123 </span><span class="jsdoc-var">getInterval</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
124 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.accelerate</span><span class="jsdoc-syntax">){
125 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.interval</span><span class="jsdoc-syntax">;
127 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.mousedownTime.getElapsed</span><span class="jsdoc-syntax">();
128 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 500){
129 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">400;
130 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 1700){
131 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">320;
132 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 2600){
133 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">250;
134 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 3500){
135 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">180;
136 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 4400){
137 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">140;
138 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 5300){
139 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">80;
140 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pressTime </span><span class="jsdoc-syntax">< 6200){
141 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">50;
142 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
143 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">10;
147 </span><span class="jsdoc-comment">// private
148 </span><span class="jsdoc-var">handleMouseOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
149 </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
150 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">){
151 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">);
153 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseReturn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
156 </span><span class="jsdoc-comment">// private
157 </span><span class="jsdoc-var">handleMouseReturn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
158 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseReturn</span><span class="jsdoc-syntax">);
159 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">){
160 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">);
162 </span><span class="jsdoc-var">this.click</span><span class="jsdoc-syntax">();
165 </span><span class="jsdoc-comment">// private
166 </span><span class="jsdoc-var">handleMouseUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
167 </span><span class="jsdoc-var">clearTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
168 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseover"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseReturn</span><span class="jsdoc-syntax">);
169 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseout"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseOut</span><span class="jsdoc-syntax">);
170 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseup"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.handleMouseUp</span><span class="jsdoc-syntax">);
171 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pressClass</span><span class="jsdoc-syntax">);
172 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"mouseup"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
174 });</span></code></body></html>