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