docs/source/ClickRepeater.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-util-ClickRepeater-method-constructor'><span id='Ext-util-ClickRepeater'>/**
  19 </span></span> * @class Ext.util.ClickRepeater
  20  * @extends Ext.util.Observable
  21  *
  22  * A wrapper class which can be applied to any element. Fires a &quot;click&quot; event while the
  23  * mouse is pressed. The interval between firings may be specified in the config but
  24  * defaults to 20 milliseconds.
  25  *
  26  * Optionally, a CSS class may be applied to the element during the time it is pressed.
  27  *
  28  * @constructor
  29  * @param {Mixed} el The element to listen on
  30  * @param {Object} config
  31  */
  32
  33 Ext.define('Ext.util.ClickRepeater', {
  34     extend: 'Ext.util.Observable',
  35
  36     constructor : function(el, config){
  37         this.el = Ext.get(el);
  38         this.el.unselectable();
  39
  40         Ext.apply(this, config);
  41
  42         this.addEvents(
  43 <span id='Ext-util-ClickRepeater-event-mousedown'>        /**
  44 </span>         * @event mousedown
  45          * Fires when the mouse button is depressed.
  46          * @param {Ext.util.ClickRepeater} this
  47          * @param {Ext.EventObject} e
  48          */
  49         &quot;mousedown&quot;,
  50 <span id='Ext-util-ClickRepeater-event-click'>        /**
  51 </span>         * @event click
  52          * Fires on a specified interval during the time the element is pressed.
  53          * @param {Ext.util.ClickRepeater} this
  54          * @param {Ext.EventObject} e
  55          */
  56         &quot;click&quot;,
  57 <span id='Ext-util-ClickRepeater-event-mouseup'>        /**
  58 </span>         * @event mouseup
  59          * Fires when the mouse key is released.
  60          * @param {Ext.util.ClickRepeater} this
  61          * @param {Ext.EventObject} e
  62          */
  63         &quot;mouseup&quot;
  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(&quot;click&quot;, this.handler,  this.scope || this);
  74         }
  75
  76         this.callParent();
  77     },
  78
  79 <span id='Ext-util-ClickRepeater-cfg-el'>    /**
  80 </span>     * @cfg {Mixed} el The element to act as a button.
  81      */
  82
  83 <span id='Ext-util-ClickRepeater-cfg-pressedCls'>    /**
  84 </span>     * @cfg {String} pressedCls A CSS class name to be applied to the element while pressed.
  85      */
  86
  87 <span id='Ext-util-ClickRepeater-cfg-accelerate'>    /**
  88 </span>     * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
  89      * &quot;interval&quot; and &quot;delay&quot; are ignored.
  90      */
  91
  92 <span id='Ext-util-ClickRepeater-cfg-interval'>    /**
  93 </span>     * @cfg {Number} interval The interval between firings of the &quot;click&quot; event. Default 20 ms.
  94      */
  95     interval : 20,
  96
  97 <span id='Ext-util-ClickRepeater-cfg-delay'>    /**
  98 </span>     * @cfg {Number} delay The initial delay before the repeating event begins firing.
  99      * Similar to an autorepeat key delay.
 100      */
 101     delay: 250,
 102
 103 <span id='Ext-util-ClickRepeater-cfg-preventDefault'>    /**
 104 </span>     * @cfg {Boolean} preventDefault True to prevent the default click event
 105      */
 106     preventDefault : true,
 107 <span id='Ext-util-ClickRepeater-cfg-stopDefault'>    /**
 108 </span>     * @cfg {Boolean} stopDefault True to stop the default click event
 109      */
 110     stopDefault : false,
 111
 112     timer : 0,
 113
 114 <span id='Ext-util-ClickRepeater-method-enable'>    /**
 115 </span>     * Enables the repeater and allows events to fire.
 116      */
 117     enable: function(){
 118         if(this.disabled){
 119             this.el.on('mousedown', this.handleMouseDown, this);
 120             if (Ext.isIE){
 121                 this.el.on('dblclick', this.handleDblClick, this);
 122             }
 123             if(this.preventDefault || this.stopDefault){
 124                 this.el.on('click', this.eventOptions, this);
 125             }
 126         }
 127         this.disabled = false;
 128     },
 129
 130 <span id='Ext-util-ClickRepeater-method-disable'>    /**
 131 </span>     * Disables the repeater and stops events from firing.
 132      */
 133     disable: function(/* private */ force){
 134         if(force || !this.disabled){
 135             clearTimeout(this.timer);
 136             if(this.pressedCls){
 137                 this.el.removeCls(this.pressedCls);
 138             }
 139             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
 140             this.el.removeAllListeners();
 141         }
 142         this.disabled = true;
 143     },
 144
 145 <span id='Ext-util-ClickRepeater-method-setDisabled'>    /**
 146 </span>     * Convenience function for setting disabled/enabled by boolean.
 147      * @param {Boolean} disabled
 148      */
 149     setDisabled: function(disabled){
 150         this[disabled ? 'disable' : 'enable']();
 151     },
 152
 153     eventOptions: function(e){
 154         if(this.preventDefault){
 155             e.preventDefault();
 156         }
 157         if(this.stopDefault){
 158             e.stopEvent();
 159         }
 160     },
 161
 162     // private
 163     destroy : function() {
 164         this.disable(true);
 165         Ext.destroy(this.el);
 166         this.clearListeners();
 167     },
 168
 169     handleDblClick : function(e){
 170         clearTimeout(this.timer);
 171         this.el.blur();
 172
 173         this.fireEvent(&quot;mousedown&quot;, this, e);
 174         this.fireEvent(&quot;click&quot;, this, e);
 175     },
 176
 177     // private
 178     handleMouseDown : function(e){
 179         clearTimeout(this.timer);
 180         this.el.blur();
 181         if(this.pressedCls){
 182             this.el.addCls(this.pressedCls);
 183         }
 184         this.mousedownTime = new Date();
 185
 186         Ext.getDoc().on(&quot;mouseup&quot;, this.handleMouseUp, this);
 187         this.el.on(&quot;mouseout&quot;, this.handleMouseOut, this);
 188
 189         this.fireEvent(&quot;mousedown&quot;, this, e);
 190         this.fireEvent(&quot;click&quot;, this, e);
 191
 192         // Do not honor delay or interval if acceleration wanted.
 193         if (this.accelerate) {
 194             this.delay = 400;
 195         }
 196
 197         // Re-wrap the event object in a non-shared object, so it doesn't lose its context if
 198         // the global shared EventObject gets a new Event put into it before the timer fires.
 199         e = new Ext.EventObjectImpl(e);
 200
 201         this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
 202     },
 203
 204     // private
 205     click : function(e){
 206         this.fireEvent(&quot;click&quot;, this, e);
 207         this.timer =  Ext.defer(this.click, this.accelerate ?
 208             this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
 209                 400,
 210                 -390,
 211                 12000) :
 212             this.interval, this, [e]);
 213     },
 214
 215     easeOutExpo : function (t, b, c, d) {
 216         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 217     },
 218
 219     // private
 220     handleMouseOut : function(){
 221         clearTimeout(this.timer);
 222         if(this.pressedCls){
 223             this.el.removeCls(this.pressedCls);
 224         }
 225         this.el.on(&quot;mouseover&quot;, this.handleMouseReturn, this);
 226     },
 227
 228     // private
 229     handleMouseReturn : function(){
 230         this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
 231         if(this.pressedCls){
 232             this.el.addCls(this.pressedCls);
 233         }
 234         this.click();
 235     },
 236
 237     // private
 238     handleMouseUp : function(e){
 239         clearTimeout(this.timer);
 240         this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
 241         this.el.un(&quot;mouseout&quot;, this.handleMouseOut, this);
 242         Ext.getDoc().un(&quot;mouseup&quot;, this.handleMouseUp, this);
 243         if(this.pressedCls){
 244             this.el.removeCls(this.pressedCls);
 245         }
 246         this.fireEvent(&quot;mouseup&quot;, this, e);
 247     }
 248 });
 249 </pre>
 250 </body>
 251 </html>