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