docs/source/ClickRepeater.html

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