projects / roojs1 / blob
? search:


76bc750afc3a1f9c6caad12d4db3f520713f4cc8
[roojs1] / docs / src / Roo_util_ClickRepeater.js.html
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">/*
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 /**
15  * @class Roo.util.ClickRepeater
16  * @extends Roo.util.Observable
17  * 
18  * A wrapper class which can be applied to any element. Fires a &quot;click&quot; event while the
19  * mouse is pressed. The interval between firings may be specified in the config but
20  * defaults to 10 milliseconds.
21  * 
22  * Optionally, a CSS class may be applied to the element during the time it is pressed.
23  * 
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 &quot;click&quot; 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  *           &quot;interval&quot; and &quot;delay&quot; are ignored. &quot;immediate&quot; is honored.
31  * @cfg {Boolean} preventDefault True to prevent the default click event
32  * @cfg {Boolean} stopDefault True to stop the default click event
33  * 
34  * @history
35  *     2007-02-02 jvs Original code contributed by Nige &quot;Animal&quot; White
36  *     2007-02-02 jvs Renamed to ClickRepeater
37  *   2007-02-03 jvs Modifications for FF Mac and Safari 
38  *
39  *  @constructor
40  * @param {String/HTMLElement/Element} el The element to listen on
41  * @param {Object} config
42  **/
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">)
44 {
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">();
47
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">);
49
50     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
51     </span><span class="jsdoc-comment">/**
52      * @event mousedown
53      * Fires when the mouse button is depressed.
54      * @param {Roo.util.ClickRepeater} this
55      */
56         </span><span class="jsdoc-string">&quot;mousedown&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
57     </span><span class="jsdoc-comment">/**
58      * @event click
59      * Fires on a specified interval during the time the element is pressed.
60      * @param {Roo.util.ClickRepeater} this
61      */
62         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
63     </span><span class="jsdoc-comment">/**
64      * @event mouseup
65      * Fires when the mouse key is released.
66      * @param {Roo.util.ClickRepeater} this
67      */
68         </span><span class="jsdoc-string">&quot;mouseup&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
69     </span><span class="jsdoc-syntax">});
70
71     </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</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">&quot;click&quot;</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">();
76             }
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">();
79             }
80         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
81     }
82
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">&quot;click&quot;</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">);
86     }
87
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">);
89 };
90
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,
97
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">);
104         }
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">();
106
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">&quot;mouseup&quot;</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">&quot;mouseout&quot;</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">);
109
110         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mousedown&quot;</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">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
112
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">);
114     },
115
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">&quot;click&quot;</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">);
120     },
121
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">;
126         }
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">&lt; 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">&lt; 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">&lt; 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">&lt; 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">&lt; 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">&lt; 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">&lt; 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;
144         }
145     },
146
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">);
152         }
153         </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;mouseover&quot;</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">);
154     },
155
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">&quot;mouseover&quot;</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">);
161         }
162         </span><span class="jsdoc-var">this.click</span><span class="jsdoc-syntax">();
163     },
164
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">&quot;mouseover&quot;</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">&quot;mouseout&quot;</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">&quot;mouseup&quot;</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">&quot;mouseup&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
173     }
174 });</span></code></body></html>
RooJS - Version 1