docs/source/ClickRepeater.html

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