ClickRepeater.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:6k
源码类别:

中间件编程

开发平台:

JavaScript

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