Upgrade to ExtJS 3.2.1 - Released 04/27/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.2.1
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 = function(el, config)
45 {
46     this.el = Ext.get(el);
47     this.el.unselectable();
48
49     Ext.apply(this, config);
50
51     this.addEvents(
52     /**
53      * @event mousedown
54      * Fires when the mouse button is depressed.
55      * @param {Ext.util.ClickRepeater} this
56      */
57         "mousedown",
58     /**
59      * @event click
60      * Fires on a specified interval during the time the element is pressed.
61      * @param {Ext.util.ClickRepeater} this
62      */
63         "click",
64     /**
65      * @event mouseup
66      * Fires when the mouse key is released.
67      * @param {Ext.util.ClickRepeater} this
68      */
69         "mouseup"
70     );
71
72     if(!this.disabled){
73         this.disabled = true;
74         this.enable();
75     }
76
77     // allow inline handler
78     if(this.handler){
79         this.on("click", this.handler,  this.scope || this);
80     }
81
82     Ext.util.ClickRepeater.superclass.constructor.call(this);
83 };
84
85 Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
86     interval : 20,
87     delay: 250,
88     preventDefault : true,
89     stopDefault : false,
90     timer : 0,
91
92     /**
93      * Enables the repeater and allows events to fire.
94      */
95     enable: function(){
96         if(this.disabled){
97             this.el.on('mousedown', this.handleMouseDown, this);
98             if (Ext.isIE){
99                 this.el.on('dblclick', this.handleDblClick, this);
100             }
101             if(this.preventDefault || this.stopDefault){
102                 this.el.on('click', this.eventOptions, this);
103             }
104         }
105         this.disabled = false;
106     },
107
108     /**
109      * Disables the repeater and stops events from firing.
110      */
111     disable: function(/* private */ force){
112         if(force || !this.disabled){
113             clearTimeout(this.timer);
114             if(this.pressClass){
115                 this.el.removeClass(this.pressClass);
116             }
117             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
118             this.el.removeAllListeners();
119         }
120         this.disabled = true;
121     },
122
123     /**
124      * Convenience function for setting disabled/enabled by boolean.
125      * @param {Boolean} disabled
126      */
127     setDisabled: function(disabled){
128         this[disabled ? 'disable' : 'enable']();
129     },
130
131     eventOptions: function(e){
132         if(this.preventDefault){
133             e.preventDefault();
134         }
135         if(this.stopDefault){
136             e.stopEvent();
137         }
138     },
139
140     // private
141     destroy : function() {
142         this.disable(true);
143         Ext.destroy(this.el);
144         this.purgeListeners();
145     },
146
147     handleDblClick : function(){
148         clearTimeout(this.timer);
149         this.el.blur();
150
151         this.fireEvent("mousedown", this);
152         this.fireEvent("click", this);
153     },
154
155     // private
156     handleMouseDown : function(){
157         clearTimeout(this.timer);
158         this.el.blur();
159         if(this.pressClass){
160             this.el.addClass(this.pressClass);
161         }
162         this.mousedownTime = new Date();
163
164         Ext.getDoc().on("mouseup", this.handleMouseUp, this);
165         this.el.on("mouseout", this.handleMouseOut, this);
166
167         this.fireEvent("mousedown", this);
168         this.fireEvent("click", this);
169
170         // Do not honor delay or interval if acceleration wanted.
171         if (this.accelerate) {
172             this.delay = 400;
173         }
174         this.timer = this.click.defer(this.delay || this.interval, this);
175     },
176
177     // private
178     click : function(){
179         this.fireEvent("click", this);
180         this.timer = this.click.defer(this.accelerate ?
181             this.easeOutExpo(this.mousedownTime.getElapsed(),
182                 400,
183                 -390,
184                 12000) :
185             this.interval, this);
186     },
187
188     easeOutExpo : function (t, b, c, d) {
189         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
190     },
191
192     // private
193     handleMouseOut : function(){
194         clearTimeout(this.timer);
195         if(this.pressClass){
196             this.el.removeClass(this.pressClass);
197         }
198         this.el.on("mouseover", this.handleMouseReturn, this);
199     },
200
201     // private
202     handleMouseReturn : function(){
203         this.el.un("mouseover", this.handleMouseReturn, this);
204         if(this.pressClass){
205             this.el.addClass(this.pressClass);
206         }
207         this.click();
208     },
209
210     // private
211     handleMouseUp : function(){
212         clearTimeout(this.timer);
213         this.el.un("mouseover", this.handleMouseReturn, this);
214         this.el.un("mouseout", this.handleMouseOut, this);
215         Ext.getDoc().un("mouseup", this.handleMouseUp, this);
216         this.el.removeClass(this.pressClass);
217         this.fireEvent("mouseup", this);
218     }
219 });</pre>    
220 </body>
221 </html>