src/util/ClickRepeater.js

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