3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 @class Ext.util.ClickRepeater
9 @extends Ext.util.Observable
11 A wrapper class which can be applied to any element. Fires a "click" event while the
12 mouse is pressed. The interval between firings may be specified in the config but
13 defaults to 20 milliseconds.
15 Optionally, a CSS class may be applied to the element during the time it is pressed.
17 @cfg {Mixed} el The element to act as a button.
18 @cfg {Number} delay The initial delay before the repeating event begins firing.
19 Similar to an autorepeat key delay.
20 @cfg {Number} interval The interval between firings of the "click" event. Default 20 ms.
21 @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
22 @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
23 "interval" and "delay" are ignored.
24 @cfg {Boolean} preventDefault True to prevent the default click event
25 @cfg {Boolean} stopDefault True to stop the default click event
28 2007-02-02 jvs Original code contributed by Nige "Animal" White
29 2007-02-02 jvs Renamed to ClickRepeater
30 2007-02-03 jvs Modifications for FF Mac and Safari
33 @param {Mixed} el The element to listen on
34 @param {Object} config
36 Ext.util.ClickRepeater = Ext.extend(Ext.util.Observable, {
38 constructor : function(el, config){
39 this.el = Ext.get(el);
40 this.el.unselectable();
42 Ext.apply(this, config);
47 * Fires when the mouse button is depressed.
48 * @param {Ext.util.ClickRepeater} this
49 * @param {Ext.EventObject} e
54 * Fires on a specified interval during the time the element is pressed.
55 * @param {Ext.util.ClickRepeater} this
56 * @param {Ext.EventObject} e
61 * Fires when the mouse key is released.
62 * @param {Ext.util.ClickRepeater} this
63 * @param {Ext.EventObject} e
73 // allow inline handler
75 this.on("click", this.handler, this.scope || this);
78 Ext.util.ClickRepeater.superclass.constructor.call(this);
83 preventDefault : true,
88 * Enables the repeater and allows events to fire.
92 this.el.on('mousedown', this.handleMouseDown, this);
94 this.el.on('dblclick', this.handleDblClick, this);
96 if(this.preventDefault || this.stopDefault){
97 this.el.on('click', this.eventOptions, this);
100 this.disabled = false;
104 * Disables the repeater and stops events from firing.
106 disable: function(/* private */ force){
107 if(force || !this.disabled){
108 clearTimeout(this.timer);
110 this.el.removeClass(this.pressClass);
112 Ext.getDoc().un('mouseup', this.handleMouseUp, this);
113 this.el.removeAllListeners();
115 this.disabled = true;
119 * Convenience function for setting disabled/enabled by boolean.
120 * @param {Boolean} disabled
122 setDisabled: function(disabled){
123 this[disabled ? 'disable' : 'enable']();
126 eventOptions: function(e){
127 if(this.preventDefault){
130 if(this.stopDefault){
136 destroy : function() {
138 Ext.destroy(this.el);
139 this.purgeListeners();
142 handleDblClick : function(e){
143 clearTimeout(this.timer);
146 this.fireEvent("mousedown", this, e);
147 this.fireEvent("click", this, e);
151 handleMouseDown : function(e){
152 clearTimeout(this.timer);
155 this.el.addClass(this.pressClass);
157 this.mousedownTime = new Date();
159 Ext.getDoc().on("mouseup", this.handleMouseUp, this);
160 this.el.on("mouseout", this.handleMouseOut, this);
162 this.fireEvent("mousedown", this, e);
163 this.fireEvent("click", this, e);
165 // Do not honor delay or interval if acceleration wanted.
166 if (this.accelerate) {
169 this.timer = this.click.defer(this.delay || this.interval, this, [e]);
174 this.fireEvent("click", this, e);
175 this.timer = this.click.defer(this.accelerate ?
176 this.easeOutExpo(this.mousedownTime.getElapsed(),
180 this.interval, this, [e]);
183 easeOutExpo : function (t, b, c, d) {
184 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
188 handleMouseOut : function(){
189 clearTimeout(this.timer);
191 this.el.removeClass(this.pressClass);
193 this.el.on("mouseover", this.handleMouseReturn, this);
197 handleMouseReturn : function(){
198 this.el.un("mouseover", this.handleMouseReturn, this);
200 this.el.addClass(this.pressClass);
206 handleMouseUp : function(e){
207 clearTimeout(this.timer);
208 this.el.un("mouseover", this.handleMouseReturn, this);
209 this.el.un("mouseout", this.handleMouseOut, this);
210 Ext.getDoc().un("mouseup", this.handleMouseUp, this);
211 this.el.removeClass(this.pressClass);
212 this.fireEvent("mouseup", this, e);