docs/source/ClickRepeater.html

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