src/util/ClickRepeater.js

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