Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / ClickRepeater.html
diff --git a/docs/source/ClickRepeater.html b/docs/source/ClickRepeater.html
new file mode 100644 (file)
index 0000000..f9714f1
--- /dev/null
@@ -0,0 +1,203 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.util.ClickRepeater"></div>/**
+ @class Ext.util.ClickRepeater
+ @extends Ext.util.Observable
+
+ 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.
+
+ @cfg {Mixed} 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 20 ms.
+ @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
+ @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
+           "interval" and "delay" are ignored.
+ @cfg {Boolean} preventDefault True to prevent the default click event
+ @cfg {Boolean} stopDefault True to stop the default 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 for FF Mac and Safari
+
+ @constructor
+ @param {Mixed} el The element to listen on
+ @param {Object} config
+ */
+Ext.util.ClickRepeater = function(el, config)
+{
+    this.el = Ext.get(el);
+    this.el.unselectable();
+
+    Ext.apply(this, config);
+
+    this.addEvents(
+    /**
+     * @event mousedown
+     * Fires when the mouse button is depressed.
+     * @param {Ext.util.ClickRepeater} this
+     */
+        "mousedown",
+    /**
+     * @event click
+     * Fires on a specified interval during the time the element is pressed.
+     * @param {Ext.util.ClickRepeater} this
+     */
+        "click",
+    /**
+     * @event mouseup
+     * Fires when the mouse key is released.
+     * @param {Ext.util.ClickRepeater} this
+     */
+        "mouseup"
+    );
+
+    if(!this.disabled){
+        this.disabled = true;
+        this.enable();
+    }
+
+    // allow inline handler
+    if(this.handler){
+        this.on("click", this.handler,  this.scope || this);
+    }
+
+    Ext.util.ClickRepeater.superclass.constructor.call(this);
+};
+
+Ext.extend(Ext.util.ClickRepeater, Ext.util.Observable, {
+    interval : 20,
+    delay: 250,
+    preventDefault : true,
+    stopDefault : false,
+    timer : 0,
+
+    /**
+     * Enables the repeater and allows events to fire.
+     */
+    enable: function(){
+        if(this.disabled){
+            this.el.on('mousedown', this.handleMouseDown, this);
+            if(this.preventDefault || this.stopDefault){
+                this.el.on('click', this.eventOptions, this);
+            }
+        }
+        this.disabled = false;
+    },
+    
+    /**
+     * Disables the repeater and stops events from firing.
+     */
+    disable: function(/* private */ force){
+        if(force || !this.disabled){
+            clearTimeout(this.timer);
+            if(this.pressClass){
+                this.el.removeClass(this.pressClass);
+            }
+            Ext.getDoc().un('mouseup', this.handleMouseUp, this);
+            this.el.removeAllListeners();
+        }
+        this.disabled = true;
+    },
+    
+    /**
+     * 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.purgeListeners();
+    },
+    
+    // private
+    handleMouseDown : function(){
+        clearTimeout(this.timer);
+        this.el.blur();
+        if(this.pressClass){
+            this.el.addClass(this.pressClass);
+        }
+        this.mousedownTime = new Date();
+
+        Ext.getDoc().on("mouseup", this.handleMouseUp, this);
+        this.el.on("mouseout", this.handleMouseOut, this);
+
+        this.fireEvent("mousedown", this);
+        this.fireEvent("click", this);
+
+//      Do not honor delay or interval if acceleration wanted.
+        if (this.accelerate) {
+            this.delay = 400;
+           }
+        this.timer = this.click.defer(this.delay || this.interval, this);
+    },
+
+    // private
+    click : function(){
+        this.fireEvent("click", this);
+        this.timer = this.click.defer(this.accelerate ?
+            this.easeOutExpo(this.mousedownTime.getElapsed(),
+                400,
+                -390,
+                12000) :
+            this.interval, this);
+    },
+
+    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.pressClass){
+            this.el.removeClass(this.pressClass);
+        }
+        this.el.on("mouseover", this.handleMouseReturn, this);
+    },
+
+    // private
+    handleMouseReturn : function(){
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        if(this.pressClass){
+            this.el.addClass(this.pressClass);
+        }
+        this.click();
+    },
+
+    // private
+    handleMouseUp : function(){
+        clearTimeout(this.timer);
+        this.el.un("mouseover", this.handleMouseReturn, this);
+        this.el.un("mouseout", this.handleMouseOut, this);
+        Ext.getDoc().un("mouseup", this.handleMouseUp, this);
+        this.el.removeClass(this.pressClass);
+        this.fireEvent("mouseup", this);
+    }
+});</pre>    \r
+</body>\r
+</html>
\ No newline at end of file