/** * A wrapper class which can be applied to any element. Fires a "click" event while the * mouse is pressed. The interval between firings may be specified in the config but * defaults to 20 milliseconds. * * Optionally, a CSS class may be applied to the element during the time it is pressed. */Ext.define('Ext.util.ClickRepeater', { alternateClassName: 'Ext.util.TapRepeater', mixins: [ 'Ext.mixin.Observable' ], /** * @event mousedown * Fires when the mouse button is depressed. * @param {Ext.util.ClickRepeater} this * @param {Ext.event.Event} e */ /** * @event click * Fires on a specified interval during the time the element is pressed. * @param {Ext.util.ClickRepeater} this * @param {Ext.event.Event} e */ /** * @event mouseup * Fires when the mouse key is released. * @param {Ext.util.ClickRepeater} this * @param {Ext.event.Event} e */ config: { /** * @cfg {Ext.dom.Element} [el] * The element to listen for clicks/taps on. */ el: null, /** * @cfg {Ext.Component} [target] * The Component who's encapsulating element to listen for clicks/taps on. */ target: null, disabled: null }, /** * @cfg {String/HTMLElement/Ext.dom.Element} el * The element to act as a button. */ /** * @cfg {String} pressedCls * A CSS class name to be applied to the element while pressed. */ /** * @cfg {Boolean} accelerate * True if autorepeating should start slowly and accelerate. * "interval" and "delay" are ignored. */ /** * @cfg {Number} interval * The interval between firings of the "click" event (in milliseconds). */ interval: 20, /** * @cfg {Number} delay * The initial delay before the repeating event begins firing. * Similar to an autorepeat key delay. */ delay: 250, /** * @cfg {Boolean} preventDefault * True to prevent the default click event */ preventDefault: true, /** * @cfg {Boolean} stopDefault * True to stop the default click event */ stopDefault: false, timer: 0, /** * @cfg {Function/String} handler * A function called when the menu item is clicked (can be used instead of {@link #click} event). * @cfg {Ext.util.ClickRepeater} handler.clickRepeater This ClickRepeater. * @cfg {Ext.event.Event} handler.e The underlying {@link Ext.event.Event}. * @controllable */ handler: null, /** * @cfg {Object} scope * The scope (`this` refeence) in which the configured {@link #handler} will be executed, * unless the scope is a ViewController method nmame. * @accessor */ scope: null, /** * Creates new ClickRepeater. * @param {Object} [config] Config object. */ constructor: function(config) { var me = this; // Legacy constructor. Element is first parameter if (arguments.length === 2) { me.setEl(config); config = arguments[1]; } me.mixins.observable.constructor.call(this, config); }, destroy: function() { this.setEl(null); this.callParent(); }, privates: { fireClick: function(e) { var me = this; me.fireEvent("click", me, e); Ext.callback(me.handler, me.scope, [me, e], 0, me.getTarget()); }, updateDisabled: function(disabled) { var me = this; if (disabled) { me.savedEl = me.getEl(); me.setEl(null); } else if (me.savedEl) { me.setEl(me.savedEl); } }, updateTarget: function(target) { this.setEl(target.el); }, updateEl: function(newEl, oldEl) { var me = this, elListeners; if (oldEl) { oldEl.selectable(); Ext.undefer(me.timer); if (me.pressedCls) { oldEl.removeCls(me.pressedCls); } Ext.getDoc().un('mouseup', me.handleMouseUp, me); me.elListeners = Ext.destroy(me.elListeners); } if (newEl) { newEl.unselectable(); elListeners = { mousedown: me.handleMouseDown, scope: me, destroyable: true }; if (me.preventDefault || me.stopDefault) { elListeners.click = me.eventOptions; } me.elListeners = newEl.on(elListeners); } }, eventOptions: function(e) { if (this.preventDefault) { e.preventDefault(); } if (this.stopDefault) { e.stopEvent(); } }, handleMouseDown: function(e) { var me = this, el = me.getEl(); Ext.undefer(me.timer); if (me.pressedCls) { el.addCls(me.pressedCls); } me.mousedownTime = Ext.now(); if (e.pointerType === 'mouse') { el.on("mouseout", me.handleMouseOut, me); } Ext.getDoc().on("mouseup", me.handleMouseUp, me); me.fireEvent("mousedown", me, e); me.fireClick(e); // Do not honor delay or interval if acceleration wanted. if (me.accelerate) { me.delay = 400; } me.timer = Ext.defer(me.click, me.delay || me.interval, me, [e]); if (me.mousedownPreventDefault) { e.preventDefault(); } if (me.mousedownStopEvent) { e.stopEvent(); } }, click: function(e) { var me = this; me.fireClick(e); me.timer = Ext.defer(me.click, me.accelerate ? me.easeOutExpo(Ext.now() - me.mousedownTime, 400, -390, 12000) : me.interval, me, [e]); }, easeOutExpo: function(t, b, c, d) { return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; }, handleMouseOut: function() { var me = this, el = me.getEl(); Ext.undefer(me.timer); if (me.pressedCls) { el.removeCls(me.pressedCls); } el.on("mouseover", me.handleMouseReturn, me); }, handleMouseReturn: function(e) { var me = this, el = me.getEl(); el.un("mouseover", me.handleMouseReturn, me); if (me.pressedCls) { el.addCls(me.pressedCls); } me.click(e); }, handleMouseUp: function(e) { var me = this, el = me.getEl(); Ext.undefer(me.timer); el.un("mouseover", me.handleMouseReturn, me); el.un("mouseout", me.handleMouseOut, me); Ext.getDoc().un("mouseup", me.handleMouseUp, me); if (me.pressedCls) { el.removeCls(me.pressedCls); } me.fireEvent("mouseup", me, e); } }});