git.roojs.org Git - roojs1/blob - Roo/util/ClickRepeater.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13
  14 /**
  15  * @class Roo.util.ClickRepeater
  16  * @extends Roo.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 10 milliseconds.
  21  *
  22  * Optionally, a CSS class may be applied to the element during the time it is pressed.
  23  *
  24  * @cfg {String/HTMLElement/Element} 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 10 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. "immediate" is honored.
  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 {String/HTMLElement/Element} el The element to listen on
  41  * @param {Object} config
  42  **/
  43 Roo.util.ClickRepeater = function(el, config)
  44 {
  45     this.el = Roo.get(el);
  46     this.el.unselectable();
  47
  48     Roo.apply(this, config);
  49
  50     this.addEvents({
  51     /**
  52      * @event mousedown
  53      * Fires when the mouse button is depressed.
  54      * @param {Roo.util.ClickRepeater} this
  55      */
  56         "mousedown" : true,
  57     /**
  58      * @event click
  59      * Fires on a specified interval during the time the element is pressed.
  60      * @param {Roo.util.ClickRepeater} this
  61      */
  62         "click" : true,
  63     /**
  64      * @event mouseup
  65      * Fires when the mouse key is released.
  66      * @param {Roo.util.ClickRepeater} this
  67      */
  68         "mouseup" : true
  69     });
  70
  71     this.el.on("mousedown", this.handleMouseDown, this);
  72     if(this.preventDefault || this.stopDefault){
  73         this.el.on("click", function(e){
  74             if(this.preventDefault){
  75                 e.preventDefault();
  76             }
  77             if(this.stopDefault){
  78                 e.stopEvent();
  79             }
  80         }, this);
  81     }
  82
  83     // allow inline handler
  84     if(this.handler){
  85         this.on("click", this.handler,  this.scope || this);
  86     }
  87
  88     Roo.util.ClickRepeater.superclass.constructor.call(this);
  89 };
  90
  91 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
  92     interval : 20,
  93     delay: 250,
  94     preventDefault : true,
  95     stopDefault : false,
  96     timer : 0,
  97
  98     // private
  99     handleMouseDown : function(){
 100         clearTimeout(this.timer);
 101         this.el.blur();
 102         if(this.pressClass){
 103             this.el.addClass(this.pressClass);
 104         }
 105         this.mousedownTime = new Date();
 106
 107         Roo.get(document).on("mouseup", this.handleMouseUp, this);
 108         this.el.on("mouseout", this.handleMouseOut, this);
 109
 110         this.fireEvent("mousedown", this);
 111         this.fireEvent("click", this);
 112
 113         this.timer = this.click.defer(this.delay || this.interval, this);
 114     },
 115
 116     // private
 117     click : function(){
 118         this.fireEvent("click", this);
 119         this.timer = this.click.defer(this.getInterval(), this);
 120     },
 121
 122     // private
 123     getInterval: function(){
 124         if(!this.accelerate){
 125             return this.interval;
 126         }
 127         var pressTime = this.mousedownTime.getElapsed();
 128         if(pressTime < 500){
 129             return 400;
 130         }else if(pressTime < 1700){
 131             return 320;
 132         }else if(pressTime < 2600){
 133             return 250;
 134         }else if(pressTime < 3500){
 135             return 180;
 136         }else if(pressTime < 4400){
 137             return 140;
 138         }else if(pressTime < 5300){
 139             return 80;
 140         }else if(pressTime < 6200){
 141             return 50;
 142         }else{
 143             return 10;
 144         }
 145     },
 146
 147     // private
 148     handleMouseOut : function(){
 149         clearTimeout(this.timer);
 150         if(this.pressClass){
 151             this.el.removeClass(this.pressClass);
 152         }
 153         this.el.on("mouseover", this.handleMouseReturn, this);
 154     },
 155
 156     // private
 157     handleMouseReturn : function(){
 158         this.el.un("mouseover", this.handleMouseReturn);
 159         if(this.pressClass){
 160             this.el.addClass(this.pressClass);
 161         }
 162         this.click();
 163     },
 164
 165     // private
 166     handleMouseUp : function(){
 167         clearTimeout(this.timer);
 168         this.el.un("mouseover", this.handleMouseReturn);
 169         this.el.un("mouseout", this.handleMouseOut);
 170         Roo.get(document).un("mouseup", this.handleMouseUp);
 171         this.el.removeClass(this.pressClass);
 172         this.fireEvent("mouseup", this);
 173     }
 174 });