Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / docs / source / ClickRepeater.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.util.ClickRepeater"></div>/**
16  @class Ext.util.ClickRepeater
17  @extends Ext.util.Observable
18
19  A wrapper class which can be applied to any element. Fires a "click" 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  @cfg {Mixed} el The element to act as a button.
26  @cfg {Number} delay The initial delay before the repeating event begins firing.
27  Similar to an autorepeat key delay.
28  @cfg {Number} interval The interval between firings of the "click" event. Default 20 ms.
29  @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
30  @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
31            "interval" and "delay" are ignored.
32  @cfg {Boolean} preventDefault True to prevent the default click event
33  @cfg {Boolean} stopDefault True to stop the default click event
34
35  @history
36     2007-02-02 jvs Original code contributed by Nige "Animal" White
37     2007-02-02 jvs Renamed to ClickRepeater
38     2007-02-03 jvs Modifications for FF Mac and Safari
39
40  @constructor
41  @param {Mixed} el The element to listen on
42  @param {Object} config
43  */
44 Ext.util.ClickRepeater = Ext.extend(Ext.util.Observable, {
45     
46     constructor : function(el, config){
47         this.el = Ext.get(el);
48         this.el.unselectable();
49
50         Ext.apply(this, config);
51
52         this.addEvents(
53         /**
54          * @event mousedown
55          * Fires when the mouse button is depressed.
56          * @param {Ext.util.ClickRepeater} this
57          * @param {Ext.EventObject} e
58          */
59         "mousedown",
60         /**
61          * @event click
62          * Fires on a specified interval during the time the element is pressed.
63          * @param {Ext.util.ClickRepeater} this
64          * @param {Ext.EventObject} e
65          */
66         "click",
67         /**
68          * @event mouseup
69          * Fires when the mouse key is released.
70          * @param {Ext.util.ClickRepeater} this
71          * @param {Ext.EventObject} e
72          */
73         "mouseup"
74         );
75
76         if(!this.disabled){
77             this.disabled = true;
78             this.enable();
79         }
80
81         // allow inline handler
82         if(this.handler){
83             this.on("click", this.handler,  this.scope || this);
84         }
85
86         Ext.util.ClickRepeater.superclass.constructor.call(this);        
87     },
88     
89     interval : 20,
90     delay: 250,
91     preventDefault : true,
92     stopDefault : false,
93     timer : 0,
94
95     /**
96      * Enables the repeater and allows events to fire.
97      */
98     enable: function(){
99         if(this.disabled){
100             this.el.on('mousedown', this.handleMouseDown, this);
101             if (Ext.isIE){
102                 this.el.on('dblclick', this.handleDblClick, this);
103             }
104             if(this.preventDefault || this.stopDefault){
105                 this.el.on('click', this.eventOptions, this);
106             }
107         }
108         this.disabled = false;
109     },
110
111     /**
112      * Disables the repeater and stops events from firing.
113      */
114     disable: function(/* private */ force){
115         if(force || !this.disabled){
116             clearTimeout(this.timer);
117             if(this.pressClass){
118                 this.el.removeClass(this.pressClass);
119             }
120             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
121             this.el.removeAllListeners();
122         }
123         this.disabled = true;
124     },
125
126     /**
127      * Convenience function for setting disabled/enabled by boolean.
128      * @param {Boolean} disabled
129      */
130     setDisabled: function(disabled){
131         this[disabled ? 'disable' : 'enable']();
132     },
133
134     eventOptions: function(e){
135         if(this.preventDefault){
136             e.preventDefault();
137         }
138         if(this.stopDefault){
139             e.stopEvent();
140         }
141     },
142
143     // private
144     destroy : function() {
145         this.disable(true);
146         Ext.destroy(this.el);
147         this.purgeListeners();
148     },
149
150     handleDblClick : function(e){
151         clearTimeout(this.timer);
152         this.el.blur();
153
154         this.fireEvent("mousedown", this, e);
155         this.fireEvent("click", this, e);
156     },
157
158     // private
159     handleMouseDown : function(e){
160         clearTimeout(this.timer);
161         this.el.blur();
162         if(this.pressClass){
163             this.el.addClass(this.pressClass);
164         }
165         this.mousedownTime = new Date();
166
167         Ext.getDoc().on("mouseup", this.handleMouseUp, this);
168         this.el.on("mouseout", this.handleMouseOut, this);
169
170         this.fireEvent("mousedown", this, e);
171         this.fireEvent("click", this, e);
172
173         // Do not honor delay or interval if acceleration wanted.
174         if (this.accelerate) {
175             this.delay = 400;
176         }
177         this.timer = this.click.defer(this.delay || this.interval, this, [e]);
178     },
179
180     // private
181     click : function(e){
182         this.fireEvent("click", this, e);
183         this.timer = this.click.defer(this.accelerate ?
184             this.easeOutExpo(this.mousedownTime.getElapsed(),
185                 400,
186                 -390,
187                 12000) :
188             this.interval, this, [e]);
189     },
190
191     easeOutExpo : function (t, b, c, d) {
192         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
193     },
194
195     // private
196     handleMouseOut : function(){
197         clearTimeout(this.timer);
198         if(this.pressClass){
199             this.el.removeClass(this.pressClass);
200         }
201         this.el.on("mouseover", this.handleMouseReturn, this);
202     },
203
204     // private
205     handleMouseReturn : function(){
206         this.el.un("mouseover", this.handleMouseReturn, this);
207         if(this.pressClass){
208             this.el.addClass(this.pressClass);
209         }
210         this.click();
211     },
212
213     // private
214     handleMouseUp : function(e){
215         clearTimeout(this.timer);
216         this.el.un("mouseover", this.handleMouseReturn, this);
217         this.el.un("mouseout", this.handleMouseOut, this);
218         Ext.getDoc().un("mouseup", this.handleMouseUp, this);
219         this.el.removeClass(this.pressClass);
220         this.fireEvent("mouseup", this, e);
221     }
222 });</pre>    
223 </body>
224 </html>