docs/source/ClickRepeater.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.util.ClickRepeater"></div>/**
  16  @class Ext.util.ClickRepeater
  17  @extends Ext.util.Observable
  18
  19  A wrapper class which can be applied to any element. Fires a "click" event while the
  20  mouse is pressed. The interval between firings may be specified in the config but
  21  defaults to 20 milliseconds.
  22
  23  Optionally, a CSS class may be applied to the element during the time it is pressed.
  24
  25  @cfg {Mixed} el The element to act as a button.
  26  @cfg {Number} delay The initial delay before the repeating event begins firing.
  27  Similar to an autorepeat key delay.
  28  @cfg {Number} interval The interval between firings of the "click" event. Default 20 ms.
  29  @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
  30  @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
  31            "interval" and "delay" are ignored.
  32  @cfg {Boolean} preventDefault True to prevent the default click event
  33  @cfg {Boolean} stopDefault True to stop the default click event
  34
  35  @history
  36     2007-02-02 jvs Original code contributed by Nige "Animal" White
  37     2007-02-02 jvs Renamed to ClickRepeater
  38     2007-02-03 jvs Modifications for FF Mac and Safari
  39
  40  @constructor
  41  @param {Mixed} el The element to listen on
  42  @param {Object} config
  43  */
  44 Ext.util.ClickRepeater = Ext.extend(Ext.util.Observable, {
  45
  46     constructor : function(el, config){
  47         this.el = Ext.get(el);
  48         this.el.unselectable();
  49
  50         Ext.apply(this, config);
  51
  52         this.addEvents(
  53         /**
  54          * @event mousedown
  55          * Fires when the mouse button is depressed.
  56          * @param {Ext.util.ClickRepeater} this
  57          * @param {Ext.EventObject} e
  58          */
  59         "mousedown",
  60         /**
  61          * @event click
  62          * Fires on a specified interval during the time the element is pressed.
  63          * @param {Ext.util.ClickRepeater} this
  64          * @param {Ext.EventObject} e
  65          */
  66         "click",
  67         /**
  68          * @event mouseup
  69          * Fires when the mouse key is released.
  70          * @param {Ext.util.ClickRepeater} this
  71          * @param {Ext.EventObject} e
  72          */
  73         "mouseup"
  74         );
  75
  76         if(!this.disabled){
  77             this.disabled = true;
  78             this.enable();
  79         }
  80
  81         // allow inline handler
  82         if(this.handler){
  83             this.on("click", this.handler,  this.scope || this);
  84         }
  85
  86         Ext.util.ClickRepeater.superclass.constructor.call(this);
  87     },
  88
  89     interval : 20,
  90     delay: 250,
  91     preventDefault : true,
  92     stopDefault : false,
  93     timer : 0,
  94
  95     /**
  96      * Enables the repeater and allows events to fire.
  97      */
  98     enable: function(){
  99         if(this.disabled){
 100             this.el.on('mousedown', this.handleMouseDown, this);
 101             if (Ext.isIE){
 102                 this.el.on('dblclick', this.handleDblClick, this);
 103             }
 104             if(this.preventDefault || this.stopDefault){
 105                 this.el.on('click', this.eventOptions, this);
 106             }
 107         }
 108         this.disabled = false;
 109     },
 110
 111     /**
 112      * Disables the repeater and stops events from firing.
 113      */
 114     disable: function(/* private */ force){
 115         if(force || !this.disabled){
 116             clearTimeout(this.timer);
 117             if(this.pressClass){
 118                 this.el.removeClass(this.pressClass);
 119             }
 120             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
 121             this.el.removeAllListeners();
 122         }
 123         this.disabled = true;
 124     },
 125
 126     /**
 127      * Convenience function for setting disabled/enabled by boolean.
 128      * @param {Boolean} disabled
 129      */
 130     setDisabled: function(disabled){
 131         this[disabled ? 'disable' : 'enable']();
 132     },
 133
 134     eventOptions: function(e){
 135         if(this.preventDefault){
 136             e.preventDefault();
 137         }
 138         if(this.stopDefault){
 139             e.stopEvent();
 140         }
 141     },
 142
 143     // private
 144     destroy : function() {
 145         this.disable(true);
 146         Ext.destroy(this.el);
 147         this.purgeListeners();
 148     },
 149
 150     handleDblClick : function(e){
 151         clearTimeout(this.timer);
 152         this.el.blur();
 153
 154         this.fireEvent("mousedown", this, e);
 155         this.fireEvent("click", this, e);
 156     },
 157
 158     // private
 159     handleMouseDown : function(e){
 160         clearTimeout(this.timer);
 161         this.el.blur();
 162         if(this.pressClass){
 163             this.el.addClass(this.pressClass);
 164         }
 165         this.mousedownTime = new Date();
 166
 167         Ext.getDoc().on("mouseup", this.handleMouseUp, this);
 168         this.el.on("mouseout", this.handleMouseOut, this);
 169
 170         this.fireEvent("mousedown", this, e);
 171         this.fireEvent("click", this, e);
 172
 173         // Do not honor delay or interval if acceleration wanted.
 174         if (this.accelerate) {
 175             this.delay = 400;
 176         }
 177         this.timer = this.click.defer(this.delay || this.interval, this, [e]);
 178     },
 179
 180     // private
 181     click : function(e){
 182         this.fireEvent("click", this, e);
 183         this.timer = this.click.defer(this.accelerate ?
 184             this.easeOutExpo(this.mousedownTime.getElapsed(),
 185                 400,
 186                 -390,
 187                 12000) :
 188             this.interval, this, [e]);
 189     },
 190
 191     easeOutExpo : function (t, b, c, d) {
 192         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 193     },
 194
 195     // private
 196     handleMouseOut : function(){
 197         clearTimeout(this.timer);
 198         if(this.pressClass){
 199             this.el.removeClass(this.pressClass);
 200         }
 201         this.el.on("mouseover", this.handleMouseReturn, this);
 202     },
 203
 204     // private
 205     handleMouseReturn : function(){
 206         this.el.un("mouseover", this.handleMouseReturn, this);
 207         if(this.pressClass){
 208             this.el.addClass(this.pressClass);
 209         }
 210         this.click();
 211     },
 212
 213     // private
 214     handleMouseUp : function(e){
 215         clearTimeout(this.timer);
 216         this.el.un("mouseover", this.handleMouseReturn, this);
 217         this.el.un("mouseout", this.handleMouseOut, this);
 218         Ext.getDoc().un("mouseup", this.handleMouseUp, this);
 219         this.el.removeClass(this.pressClass);
 220         this.fireEvent("mouseup", this, e);
 221     }
 222 });</pre>
 223 </body>
 224 </html>