163 lines
No EOL
6.1 KiB
HTML
163 lines
No EOL
6.1 KiB
HTML
<html><head><title>ClickRepeater.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>ClickRepeater.js</h1><pre class="highlighted"><code><i>/**
|
|
@class Ext.util.ClickRepeater
|
|
@extends Ext.util.Observable
|
|
|
|
A wrapper class which can be applied to any element. Fires a "click" event <b>while</b> the
|
|
mouse is pressed. The interval between firings may be specified <b>in</b> the config but
|
|
defaults to 10 milliseconds.
|
|
|
|
Optionally, a CSS class may be applied to the element during the time it is pressed.
|
|
|
|
@cfg {String/HTMLElement/Element} el The element to act as a button.
|
|
@cfg {Number} delay The initial delay before the repeating event begins firing.
|
|
Similar to an autorepeat key delay.
|
|
@cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
|
|
@cfg {String} pressClass A CSS class name to be applied to the element <b>while</b> pressed.
|
|
@cfg {Boolean} accelerate True <b>if</b> autorepeating should start slowly and accelerate.
|
|
"interval" and "delay" are ignored. "immediate" is honored.
|
|
@cfg {Boolean} preventDefault True to prevent the <b>default</b> click event
|
|
@cfg {Boolean} stopDefault True to stop the <b>default</b> click event
|
|
|
|
@history
|
|
2007-02-02 jvs Original code contributed by Nige "Animal" White
|
|
2007-02-02 jvs Renamed to ClickRepeater
|
|
2007-02-03 jvs Modifications <b>for</b> FF Mac and Safari
|
|
|
|
@constructor
|
|
@param {String/HTMLElement/Element} el The element to listen on
|
|
@param {Object} config
|
|
*/</i>
|
|
Ext.util.ClickRepeater = <b>function</b>(el, config)
|
|
{
|
|
<b>this</b>.el = Ext.get(el);
|
|
<b>this</b>.el.unselectable();
|
|
|
|
Ext.apply(<b>this</b>, config);
|
|
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event mousedown
|
|
* Fires when the mouse button is depressed.
|
|
* @param {Ext.util.ClickRepeater} <b>this</b>
|
|
*/</i>
|
|
"mousedown" : true,
|
|
<i>/**
|
|
* @event click
|
|
* Fires on a specified interval during the time the element is pressed.
|
|
* @param {Ext.util.ClickRepeater} <b>this</b>
|
|
*/</i>
|
|
"click" : true,
|
|
<i>/**
|
|
* @event mouseup
|
|
* Fires when the mouse key is released.
|
|
* @param {Ext.util.ClickRepeater} <b>this</b>
|
|
*/</i>
|
|
"mouseup" : true
|
|
});
|
|
|
|
<b>this</b>.el.on("mousedown", <b>this</b>.handleMouseDown, <b>this</b>);
|
|
<b>if</b>(this.preventDefault || <b>this</b>.stopDefault){
|
|
<b>this</b>.el.on("click", <b>function</b>(e){
|
|
<b>if</b>(this.preventDefault){
|
|
e.preventDefault();
|
|
}
|
|
<b>if</b>(this.stopDefault){
|
|
e.stopEvent();
|
|
}
|
|
}, <b>this</b>);
|
|
}
|
|
|
|
<i>// allow inline handler</i>
|
|
<b>if</b>(this.handler){
|
|
<b>this</b>.on("click", <b>this</b>.handler, <b>this</b>.scope || <b>this</b>);
|
|
}
|
|
|
|
Ext.util.ClickRepeater.superclass.constructor.call(<b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
|
|
interval : 20,
|
|
delay: 250,
|
|
preventDefault : true,
|
|
stopDefault : false,
|
|
timer : 0,
|
|
docEl : Ext.get(document),
|
|
|
|
<i>// private</i>
|
|
handleMouseDown : <b>function</b>(){
|
|
clearTimeout(<b>this</b>.timer);
|
|
<b>this</b>.el.blur();
|
|
<b>if</b>(this.pressClass){
|
|
<b>this</b>.el.addClass(<b>this</b>.pressClass);
|
|
}
|
|
<b>this</b>.mousedownTime = <b>new</b> Date();
|
|
|
|
<b>this</b>.docEl.on("mouseup", <b>this</b>.handleMouseUp, <b>this</b>);
|
|
<b>this</b>.el.on("mouseout", <b>this</b>.handleMouseOut, <b>this</b>);
|
|
|
|
<b>this</b>.fireEvent("mousedown", <b>this</b>);
|
|
<b>this</b>.fireEvent("click", <b>this</b>);
|
|
|
|
<b>this</b>.timer = <b>this</b>.click.defer(<b>this</b>.delay || <b>this</b>.interval, <b>this</b>);
|
|
},
|
|
|
|
<i>// private</i>
|
|
click : <b>function</b>(){
|
|
<b>this</b>.fireEvent("click", <b>this</b>);
|
|
<b>this</b>.timer = <b>this</b>.click.defer(<b>this</b>.getInterval(), <b>this</b>);
|
|
},
|
|
|
|
<i>// private</i>
|
|
getInterval: <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.accelerate){
|
|
<b>return</b> this.interval;
|
|
}
|
|
<b>var</b> pressTime = <b>this</b>.mousedownTime.getElapsed();
|
|
<b>if</b>(pressTime < 500){
|
|
<b>return</b> 400;
|
|
}<b>else</b> if(pressTime < 1700){
|
|
<b>return</b> 320;
|
|
}<b>else</b> if(pressTime < 2600){
|
|
<b>return</b> 250;
|
|
}<b>else</b> if(pressTime < 3500){
|
|
<b>return</b> 180;
|
|
}<b>else</b> if(pressTime < 4400){
|
|
<b>return</b> 140;
|
|
}<b>else</b> if(pressTime < 5300){
|
|
<b>return</b> 80;
|
|
}<b>else</b> if(pressTime < 6200){
|
|
<b>return</b> 50;
|
|
}<b>else</b>{
|
|
<b>return</b> 10;
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
handleMouseOut : <b>function</b>(){
|
|
clearTimeout(<b>this</b>.timer);
|
|
<b>if</b>(this.pressClass){
|
|
<b>this</b>.el.removeClass(<b>this</b>.pressClass);
|
|
}
|
|
<b>this</b>.el.on("mouseover", <b>this</b>.handleMouseReturn, <b>this</b>);
|
|
},
|
|
|
|
<i>// private</i>
|
|
handleMouseReturn : <b>function</b>(){
|
|
<b>this</b>.el.un("mouseover", <b>this</b>.handleMouseReturn);
|
|
<b>if</b>(this.pressClass){
|
|
<b>this</b>.el.addClass(<b>this</b>.pressClass);
|
|
}
|
|
<b>this</b>.click();
|
|
},
|
|
|
|
<i>// private</i>
|
|
handleMouseUp : <b>function</b>(){
|
|
clearTimeout(<b>this</b>.timer);
|
|
<b>this</b>.el.un("mouseover", <b>this</b>.handleMouseReturn);
|
|
<b>this</b>.el.un("mouseout", <b>this</b>.handleMouseOut);
|
|
<b>this</b>.docEl.un("mouseup", <b>this</b>.handleMouseUp);
|
|
<b>this</b>.el.removeClass(<b>this</b>.pressClass);
|
|
<b>this</b>.fireEvent("mouseup", <b>this</b>);
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |