<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-util-ClickRepeater'>/**
</span> * A wrapper class which can be applied to any element. Fires a "click" event while the
* mouse is pressed. The interval between firings may be specified in the config but
* defaults to 20 milliseconds.
*
* Optionally, a CSS class may be applied to the element during the time it is pressed.
*/
Ext.define('Ext.util.ClickRepeater', {
extend: 'Ext.util.Observable',
<span id='Ext-util-ClickRepeater-method-constructor'> /**
</span> * Creates new ClickRepeater.
* @param {String/HTMLElement/Ext.Element} el The element or its ID to listen on
* @param {Object} [config] Config object.
*/
constructor : function(el, config){
var me = this;
me.el = Ext.get(el);
me.el.unselectable();
Ext.apply(me, config);
me.callParent();
me.addEvents(
<span id='Ext-util-ClickRepeater-event-mousedown'> /**
</span> * @event mousedown
* Fires when the mouse button is depressed.
* @param {Ext.util.ClickRepeater} this
* @param {Ext.EventObject} e
*/
"mousedown",
<span id='Ext-util-ClickRepeater-event-click'> /**
</span> * @event click
* Fires on a specified interval during the time the element is pressed.
* @param {Ext.util.ClickRepeater} this
* @param {Ext.EventObject} e
*/
"click",
<span id='Ext-util-ClickRepeater-event-mouseup'> /**
</span> * @event mouseup
* Fires when the mouse key is released.
* @param {Ext.util.ClickRepeater} this
* @param {Ext.EventObject} e
*/
"mouseup"
);
if(!me.disabled){
me.disabled = true;
me.enable();
}
// allow inline handler
if(me.handler){
me.on("click", me.handler, me.scope || me);
}
},
<span id='Ext-util-ClickRepeater-cfg-el'> /**
</span> * @cfg {String/HTMLElement/Ext.Element} el
* The element to act as a button.
*/
<span id='Ext-util-ClickRepeater-cfg-pressedCls'> /**
</span> * @cfg {String} pressedCls
* A CSS class name to be applied to the element while pressed.
*/
<span id='Ext-util-ClickRepeater-cfg-accelerate'> /**
</span> * @cfg {Boolean} accelerate
* True if autorepeating should start slowly and accelerate.
* "interval" and "delay" are ignored.
*/
<span id='Ext-util-ClickRepeater-cfg-interval'> /**
</span> * @cfg {Number} interval
* The interval between firings of the "click" event (in milliseconds).
*/
interval : 20,
<span id='Ext-util-ClickRepeater-cfg-delay'> /**
</span> * @cfg {Number} delay
* The initial delay before the repeating event begins firing.
* Similar to an autorepeat key delay.
*/
delay: 250,
<span id='Ext-util-ClickRepeater-cfg-preventDefault'> /**
</span> * @cfg {Boolean} preventDefault
* True to prevent the default click event
*/
preventDefault : true,
<span id='Ext-util-ClickRepeater-cfg-stopDefault'> /**
</span> * @cfg {Boolean} stopDefault
* True to stop the default click event
*/
stopDefault : false,
timer : 0,
<span id='Ext-util-ClickRepeater-method-enable'> /**
</span> * Enables the repeater and allows events to fire.
*/
enable: function(){
if(this.disabled){
this.el.on('mousedown', this.handleMouseDown, this);
// IE versions will detect clicks as in sequence as dblclicks
// if they happen in quick succession
if (Ext.isIE && !(Ext.isStrict && Ext.isIE9)){
this.el.on('dblclick', this.handleDblClick, this);
}
if(this.preventDefault || this.stopDefault){
this.el.on('click', this.eventOptions, this);
}
}
this.disabled = false;
},
<span id='Ext-util-ClickRepeater-method-disable'> /**
</span> * Disables the repeater and stops events from firing.
*/
disable: function(/* private */ force){
if(force || !this.disabled){
clearTimeout(this.timer);
if(this.pressedCls){
this.el.removeCls(this.pressedCls);
}
Ext.getDoc().un('mouseup', this.handleMouseUp, this);
this.el.removeAllListeners();
}
this.disabled = true;
},
<span id='Ext-util-ClickRepeater-method-setDisabled'> /**
</span> * Convenience function for setting disabled/enabled by boolean.
* @param {Boolean} disabled
*/
setDisabled: function(disabled){
this[disabled ? 'disable' : 'enable']();
},
eventOptions: function(e){
if(this.preventDefault){
e.preventDefault();
}
if(this.stopDefault){
e.stopEvent();
}
},
// private
destroy : function() {
this.disable(true);
Ext.destroy(this.el);
this.clearListeners();
},
handleDblClick : function(e){
clearTimeout(this.timer);
this.el.blur();
this.fireEvent("mousedown", this, e);
this.fireEvent("click", this, e);
},
// private
handleMouseDown : function(e){
clearTimeout(this.timer);
this.el.blur();
if(this.pressedCls){
this.el.addCls(this.pressedCls);
}
this.mousedownTime = new Date();
Ext.getDoc().on("mouseup", this.handleMouseUp, this);
this.el.on("mouseout", this.handleMouseOut, this);
this.fireEvent("mousedown", this, e);
this.fireEvent("click", this, e);
// Do not honor delay or interval if acceleration wanted.
if (this.accelerate) {
this.delay = 400;
}
// Re-wrap the event object in a non-shared object, so it doesn't lose its context if
// the global shared EventObject gets a new Event put into it before the timer fires.
e = new Ext.EventObjectImpl(e);
this.timer = Ext.defer(this.click, this.delay || this.interval, this, [e]);
},
// private
click : function(e){
this.fireEvent("click", this, e);
this.timer = Ext.defer(this.click, this.accelerate ?
this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
400,
-390,
12000) :
this.interval, this, [e]);
},
easeOutExpo : function (t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
// private
handleMouseOut : function(){
clearTimeout(this.timer);
if(this.pressedCls){
this.el.removeCls(this.pressedCls);
}
this.el.on("mouseover", this.handleMouseReturn, this);
},
// private
handleMouseReturn : function(){
this.el.un("mouseover", this.handleMouseReturn, this);
if(this.pressedCls){
this.el.addCls(this.pressedCls);
}
this.click();
},
// private
handleMouseUp : function(e){
clearTimeout(this.timer);
this.el.un("mouseover", this.handleMouseReturn, this);
this.el.un("mouseout", this.handleMouseOut, this);
Ext.getDoc().un("mouseup", this.handleMouseUp, this);
if(this.pressedCls){
this.el.removeCls(this.pressedCls);
}
this.fireEvent("mouseup", this, e);
}
});
</pre>
</body>
</html>