From 0fe72ce035869c90c0fb1ed15aa6c26c2cf5c360 Mon Sep 17 00:00:00 2001 From: "Rochmar Nicolas (DevExpress)" Date: Tue, 16 Jul 2024 18:37:58 +0800 Subject: [PATCH] Migrate events module to TypeScript --- .../devextreme/js/__internal/.eslintrc.js | 5 + .../events/core/m_emitter.feedback.ts | 288 +++-- .../js/__internal/events/core/m_emitter.ts | 154 +-- .../events/core/m_emitter_registrator.ts | 456 +++---- .../events/core/m_event_registrator.ts | 48 +- .../__internal/events/core/m_events_engine.ts | 1081 +++++++++-------- .../events/core/m_hook_touch_props.ts | 28 +- .../events/core/m_keyboard_processor.ts | 124 +- .../js/__internal/events/core/m_wheel.ts | 78 +- .../gesture/m_emitter.gesture.scroll.ts | 511 ++++---- .../events/gesture/m_emitter.gesture.ts | 387 +++--- .../__internal/events/gesture/m_swipeable.ts | 191 ++- .../js/__internal/events/m_click.ts | 188 ++- .../js/__internal/events/m_contextmenu.ts | 74 +- .../events/{dblclick.ts => m_dblclick.ts} | 0 .../devextreme/js/__internal/events/m_drag.ts | 518 ++++---- .../devextreme/js/__internal/events/m_hold.ts | 115 +- .../js/__internal/events/m_hover.ts | 135 +- .../js/__internal/events/m_pointer.ts | 132 +- .../js/__internal/events/m_remove.ts | 40 +- .../js/__internal/events/m_short.ts | 180 +-- .../js/__internal/events/m_swipe.ts | 338 +++--- .../js/__internal/events/m_transform.ts | 363 ++---- .../__internal/events/m_visibility_change.ts | 32 +- .../js/__internal/events/pointer/m_base.ts | 166 +-- .../js/__internal/events/pointer/m_mouse.ts | 78 +- .../events/pointer/m_mouse_and_touch.ts | 113 +- .../__internal/events/pointer/m_observer.ts | 116 +- .../js/__internal/events/pointer/m_touch.ts | 90 +- .../js/__internal/events/utils/index.ts | 297 ++--- .../events/utils/m_add_namespace.ts | 26 +- .../events/utils/m_event_nodes_disposing.ts | 21 +- .../__internal/events/utils/m_event_target.ts | 22 +- packages/devextreme/js/events/click.js | 8 + packages/devextreme/js/events/contextmenu.js | 8 + .../js/events/core/emitter.feedback.js | 1 + packages/devextreme/js/events/core/emitter.js | 1 + .../js/events/core/emitter_registrator.js | 1 + .../js/events/core/event_registrator.js | 1 + .../js/events/core/events_engine.js | 1 + .../js/events/core/hook_touch_props.js | 1 + .../js/events/core/keyboard_processor.js | 1 + packages/devextreme/js/events/core/wheel.js | 1 + packages/devextreme/js/events/double_click.js | 2 +- packages/devextreme/js/events/drag.js | 45 + .../js/events/gesture/emitter.gesture.js | 1 + .../events/gesture/emitter.gesture.scroll.js | 1 + .../devextreme/js/events/gesture/swipeable.js | 1 + packages/devextreme/js/events/hold.js | 8 + packages/devextreme/js/events/hover.js | 15 + packages/devextreme/js/events/pointer.js | 58 + packages/devextreme/js/events/pointer/base.js | 1 + .../devextreme/js/events/pointer/mouse.js | 1 + .../js/events/pointer/mouse_and_touch.js | 1 + .../devextreme/js/events/pointer/observer.js | 1 + .../devextreme/js/events/pointer/touch.js | 1 + packages/devextreme/js/events/remove.js | 8 + packages/devextreme/js/events/short.js | 1 + packages/devextreme/js/events/swipe.js | 25 + packages/devextreme/js/events/transform.js | 133 ++ .../js/events/utils/add_namespace.js | 1 + .../js/events/utils/event_nodes_disposing.js | 1 + .../js/events/utils/event_target.js | 1 + packages/devextreme/js/events/utils/index.js | 1 + .../devextreme/js/events/visibility_change.js | 7 + .../DevExpress.ui.events/dblclick.tests.js | 4 +- 66 files changed, 3399 insertions(+), 3338 deletions(-) rename packages/devextreme/js/__internal/events/{dblclick.ts => m_dblclick.ts} (100%) create mode 100644 packages/devextreme/js/events/click.js create mode 100644 packages/devextreme/js/events/contextmenu.js create mode 100644 packages/devextreme/js/events/core/emitter.feedback.js create mode 100644 packages/devextreme/js/events/core/emitter.js create mode 100644 packages/devextreme/js/events/core/emitter_registrator.js create mode 100644 packages/devextreme/js/events/core/event_registrator.js create mode 100644 packages/devextreme/js/events/core/events_engine.js create mode 100644 packages/devextreme/js/events/core/hook_touch_props.js create mode 100644 packages/devextreme/js/events/core/keyboard_processor.js create mode 100644 packages/devextreme/js/events/core/wheel.js create mode 100644 packages/devextreme/js/events/drag.js create mode 100644 packages/devextreme/js/events/gesture/emitter.gesture.js create mode 100644 packages/devextreme/js/events/gesture/emitter.gesture.scroll.js create mode 100644 packages/devextreme/js/events/gesture/swipeable.js create mode 100644 packages/devextreme/js/events/hold.js create mode 100644 packages/devextreme/js/events/hover.js create mode 100644 packages/devextreme/js/events/pointer.js create mode 100644 packages/devextreme/js/events/pointer/base.js create mode 100644 packages/devextreme/js/events/pointer/mouse.js create mode 100644 packages/devextreme/js/events/pointer/mouse_and_touch.js create mode 100644 packages/devextreme/js/events/pointer/observer.js create mode 100644 packages/devextreme/js/events/pointer/touch.js create mode 100644 packages/devextreme/js/events/remove.js create mode 100644 packages/devextreme/js/events/short.js create mode 100644 packages/devextreme/js/events/swipe.js create mode 100644 packages/devextreme/js/events/transform.js create mode 100644 packages/devextreme/js/events/utils/add_namespace.js create mode 100644 packages/devextreme/js/events/utils/event_nodes_disposing.js create mode 100644 packages/devextreme/js/events/utils/event_target.js create mode 100644 packages/devextreme/js/events/utils/index.js create mode 100644 packages/devextreme/js/events/visibility_change.js diff --git a/packages/devextreme/js/__internal/.eslintrc.js b/packages/devextreme/js/__internal/.eslintrc.js index 433e1d5cd23e..7e5daea6c821 100644 --- a/packages/devextreme/js/__internal/.eslintrc.js +++ b/packages/devextreme/js/__internal/.eslintrc.js @@ -66,8 +66,13 @@ module.exports = { 'no-underscore-dangle': 'off', 'no-console': ['error', { 'allow': ['warn', 'error'] }], 'class-methods-use-this': 'off', + 'spellcheck/spell-checker': 'off', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/prefer-ts-expect-error': 'off', + '@typescript-eslint/no-unsafe-return': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/no-dynamic-delete': 'off', } }, // Rules for a new TS files. diff --git a/packages/devextreme/js/__internal/events/core/m_emitter.feedback.ts b/packages/devextreme/js/__internal/events/core/m_emitter.feedback.ts index 8ec2ab5f0e8d..f82c54369798 100644 --- a/packages/devextreme/js/__internal/events/core/m_emitter.feedback.ts +++ b/packages/devextreme/js/__internal/events/core/m_emitter.feedback.ts @@ -1,11 +1,11 @@ -import Class from '../../core/class'; -import { noop, ensureDefined } from '../../core/utils/common'; -import { contains } from '../../core/utils/dom'; -import devices from '../../core/devices'; -import { isMouseEvent } from '../utils/index'; -import pointerEvents from '../pointer'; -import Emitter from './emitter'; -import registerEmitter from './emitter_registrator'; +import Class from '@js/core/class'; +import devices from '@js/core/devices'; +import { ensureDefined, noop } from '@js/core/utils/common'; +import { contains } from '@js/core/utils/dom'; +import Emitter from '@js/events/core/emitter'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import pointerEvents from '@js/events/pointer'; +import { isMouseEvent } from '@js/events/utils/index'; const ACTIVE_EVENT_NAME = 'dxactive'; const INACTIVE_EVENT_NAME = 'dxinactive'; @@ -13,169 +13,167 @@ const INACTIVE_EVENT_NAME = 'dxinactive'; const ACTIVE_TIMEOUT = 30; const INACTIVE_TIMEOUT = 400; - const FeedbackEvent = Class.inherit({ - ctor: function(timeout, fire) { - this._timeout = timeout; - this._fire = fire; - }, + ctor(timeout, fire) { + this._timeout = timeout; + this._fire = fire; + }, - start: function() { - const that = this; + start() { + const that = this; - this._schedule(function() { - that.force(); - }); - }, + this._schedule(() => { + that.force(); + }); + }, - _schedule: function(fn) { - this.stop(); - this._timer = setTimeout(fn, this._timeout); - }, + _schedule(fn) { + this.stop(); + this._timer = setTimeout(fn, this._timeout); + }, - stop: function() { - clearTimeout(this._timer); - }, + stop() { + clearTimeout(this._timer); + }, - force: function() { - if(this._fired) { - return; - } + force() { + if (this._fired) { + return; + } - this.stop(); - this._fire(); - this._fired = true; - }, + this.stop(); + this._fire(); + this._fired = true; + }, - fired: function() { - return this._fired; - } + fired() { + return this._fired; + }, }); - let activeFeedback; const FeedbackEmitter = Emitter.inherit({ - ctor: function() { - this.callBase.apply(this, arguments); - - this._active = new FeedbackEvent(0, noop); - this._inactive = new FeedbackEvent(0, noop); - }, - - configure: function(data, eventName) { - switch(eventName) { - case ACTIVE_EVENT_NAME: - data.activeTimeout = data.timeout; - break; - case INACTIVE_EVENT_NAME: - data.inactiveTimeout = data.timeout; - break; - } - - this.callBase(data); - }, - - start: function(e) { - if(activeFeedback) { - const activeChildExists = contains(this.getElement().get(0), activeFeedback.getElement().get(0)); - const childJustActivated = !activeFeedback._active.fired(); - - if(activeChildExists && childJustActivated) { - this._cancel(); - return; - } - - activeFeedback._inactive.force(); - } - activeFeedback = this; - - this._initEvents(e); - this._active.start(); - }, - - _initEvents: function(e) { - const that = this; - - const eventTarget = this._getEmitterTarget(e); - - const mouseEvent = isMouseEvent(e); - const isSimulator = devices.isSimulator(); - const deferFeedback = isSimulator || !mouseEvent; - - const activeTimeout = ensureDefined(this.activeTimeout, ACTIVE_TIMEOUT); - const inactiveTimeout = ensureDefined(this.inactiveTimeout, INACTIVE_TIMEOUT); - - this._active = new FeedbackEvent(deferFeedback ? activeTimeout : 0, function() { - that._fireEvent(ACTIVE_EVENT_NAME, e, { target: eventTarget }); - }); - this._inactive = new FeedbackEvent(deferFeedback ? inactiveTimeout : 0, function() { - that._fireEvent(INACTIVE_EVENT_NAME, e, { target: eventTarget }); - activeFeedback = null; - }); - }, - - cancel: function(e) { - this.end(e); - }, - - end: function(e) { - const skipTimers = e.type !== pointerEvents.up; - - if(skipTimers) { - this._active.stop(); - } else { - this._active.force(); - } - - this._inactive.start(); - - if(skipTimers) { - this._inactive.force(); - } - }, - - dispose: function() { - this._active.stop(); - this._inactive.stop(); - - if(activeFeedback === this) { - activeFeedback = null; - } - - this.callBase(); - }, - - lockInactive: function() { - this._active.force(); - this._inactive.stop(); - activeFeedback = null; + ctor() { + this.callBase.apply(this, arguments); + + this._active = new FeedbackEvent(0, noop); + this._inactive = new FeedbackEvent(0, noop); + }, + + /* eslint-disable default-case */ + configure(data, eventName) { + switch (eventName) { + case ACTIVE_EVENT_NAME: + data.activeTimeout = data.timeout; + break; + case INACTIVE_EVENT_NAME: + data.inactiveTimeout = data.timeout; + break; + } + + this.callBase(data); + }, + + start(e) { + if (activeFeedback) { + const activeChildExists = contains(this.getElement().get(0), activeFeedback.getElement().get(0)); + const childJustActivated = !activeFeedback._active.fired(); + + if (activeChildExists && childJustActivated) { this._cancel(); + return; + } + + activeFeedback._inactive.force(); + } + activeFeedback = this; + + this._initEvents(e); + this._active.start(); + }, + + _initEvents(e) { + const that = this; + + const eventTarget = this._getEmitterTarget(e); + + const mouseEvent = isMouseEvent(e); + const isSimulator = devices.isSimulator(); + const deferFeedback = isSimulator || !mouseEvent; - return this._inactive.force.bind(this._inactive); + const activeTimeout = ensureDefined(this.activeTimeout, ACTIVE_TIMEOUT); + const inactiveTimeout = ensureDefined(this.inactiveTimeout, INACTIVE_TIMEOUT); + + this._active = new FeedbackEvent(deferFeedback ? activeTimeout : 0, () => { + that._fireEvent(ACTIVE_EVENT_NAME, e, { target: eventTarget }); + }); + this._inactive = new FeedbackEvent(deferFeedback ? inactiveTimeout : 0, () => { + that._fireEvent(INACTIVE_EVENT_NAME, e, { target: eventTarget }); + activeFeedback = null; + }); + }, + + cancel(e) { + this.end(e); + }, + + end(e) { + const skipTimers = e.type !== pointerEvents.up; + + if (skipTimers) { + this._active.stop(); + } else { + this._active.force(); + } + + this._inactive.start(); + + if (skipTimers) { + this._inactive.force(); } + }, + + dispose() { + this._active.stop(); + this._inactive.stop(); + + if (activeFeedback === this) { + activeFeedback = null; + } + + this.callBase(); + }, + + lockInactive() { + this._active.force(); + this._inactive.stop(); + activeFeedback = null; + this._cancel(); + + return this._inactive.force.bind(this._inactive); + }, }); -FeedbackEmitter.lock = function(deferred) { - const lockInactive = activeFeedback ? activeFeedback.lockInactive() : noop; +(FeedbackEmitter as any).lock = function (deferred) { + const lockInactive = activeFeedback ? activeFeedback.lockInactive() : noop; - deferred.done(lockInactive); + deferred.done(lockInactive); }; - registerEmitter({ - emitter: FeedbackEmitter, - events: [ - ACTIVE_EVENT_NAME, - INACTIVE_EVENT_NAME - ] + emitter: FeedbackEmitter, + events: [ + ACTIVE_EVENT_NAME, + INACTIVE_EVENT_NAME, + ], }); -export const lock = FeedbackEmitter.lock; +export const { lock } = (FeedbackEmitter as any); export { - ACTIVE_EVENT_NAME as active, - INACTIVE_EVENT_NAME as inactive + ACTIVE_EVENT_NAME as active, + INACTIVE_EVENT_NAME as inactive, }; diff --git a/packages/devextreme/js/__internal/events/core/m_emitter.ts b/packages/devextreme/js/__internal/events/core/m_emitter.ts index 5405d560c360..65d31a3b7aa6 100644 --- a/packages/devextreme/js/__internal/events/core/m_emitter.ts +++ b/packages/devextreme/js/__internal/events/core/m_emitter.ts @@ -1,105 +1,105 @@ -import $ from '../../core/renderer'; -import { noop } from '../../core/utils/common'; -import Class from '../../core/class'; -import Callbacks from '../../core/utils/callbacks'; -import { extend } from '../../core/utils/extend'; -import { isDxMouseWheelEvent, hasTouches, fireEvent } from '../utils/index'; +import Class from '@js/core/class'; +import $ from '@js/core/renderer'; +import Callbacks from '@js/core/utils/callbacks'; +import { noop } from '@js/core/utils/common'; +import { extend } from '@js/core/utils/extend'; +import { fireEvent, hasTouches, isDxMouseWheelEvent } from '@js/events/utils/index'; const Emitter = Class.inherit({ - ctor: function(element) { - this._$element = $(element); + ctor(element) { + this._$element = $(element); - this._cancelCallback = Callbacks(); - this._acceptCallback = Callbacks(); - }, + this._cancelCallback = Callbacks(); + this._acceptCallback = Callbacks(); + }, - getElement: function() { - return this._$element; - }, + getElement() { + return this._$element; + }, - validate: function(e) { - return !isDxMouseWheelEvent(e); - }, + validate(e) { + return !isDxMouseWheelEvent(e); + }, - validatePointers: function(e) { - return hasTouches(e) === 1; - }, + validatePointers(e) { + return hasTouches(e) === 1; + }, - allowInterruptionByMouseWheel: function() { - return true; - }, + allowInterruptionByMouseWheel() { + return true; + }, - configure: function(data) { - extend(this, data); - }, + configure(data) { + extend(this, data); + }, - addCancelCallback: function(callback) { - this._cancelCallback.add(callback); - }, + addCancelCallback(callback) { + this._cancelCallback.add(callback); + }, - removeCancelCallback: function() { - this._cancelCallback.empty(); - }, + removeCancelCallback() { + this._cancelCallback.empty(); + }, - _cancel: function(e) { - this._cancelCallback.fire(this, e); - }, + _cancel(e) { + this._cancelCallback.fire(this, e); + }, - addAcceptCallback: function(callback) { - this._acceptCallback.add(callback); - }, + addAcceptCallback(callback) { + this._acceptCallback.add(callback); + }, - removeAcceptCallback: function() { - this._acceptCallback.empty(); - }, + removeAcceptCallback() { + this._acceptCallback.empty(); + }, - _accept: function(e) { - this._acceptCallback.fire(this, e); - }, + _accept(e) { + this._acceptCallback.fire(this, e); + }, - _requestAccept: function(e) { - this._acceptRequestEvent = e; - }, + _requestAccept(e) { + this._acceptRequestEvent = e; + }, - _forgetAccept: function() { - this._accept(this._acceptRequestEvent); - this._acceptRequestEvent = null; - }, + _forgetAccept() { + this._accept(this._acceptRequestEvent); + this._acceptRequestEvent = null; + }, - start: noop, - move: noop, - end: noop, + start: noop, + move: noop, + end: noop, - cancel: noop, - reset: function() { - if(this._acceptRequestEvent) { - this._accept(this._acceptRequestEvent); - } - }, + cancel: noop, + reset() { + if (this._acceptRequestEvent) { + this._accept(this._acceptRequestEvent); + } + }, - _fireEvent: function(eventName, e, params) { - const eventData = extend({ - type: eventName, - originalEvent: e, - target: this._getEmitterTarget(e), - delegateTarget: this.getElement().get(0) - }, params); + _fireEvent(eventName, e, params) { + const eventData = extend({ + type: eventName, + originalEvent: e, + target: this._getEmitterTarget(e), + delegateTarget: this.getElement().get(0), + }, params); - e = fireEvent(eventData); + e = fireEvent(eventData); - if(e.cancel) { - this._cancel(e); - } + if (e.cancel) { + this._cancel(e); + } - return e; - }, + return e; + }, - _getEmitterTarget: function(e) { - return (this.delegateSelector ? $(e.target).closest(this.delegateSelector) : this.getElement()).get(0); - }, + _getEmitterTarget(e) { + return (this.delegateSelector ? $(e.target).closest(this.delegateSelector) : this.getElement()).get(0); + }, - dispose: noop + dispose: noop, }); diff --git a/packages/devextreme/js/__internal/events/core/m_emitter_registrator.ts b/packages/devextreme/js/__internal/events/core/m_emitter_registrator.ts index ccfbbfb4797f..99f9ba67e1fc 100644 --- a/packages/devextreme/js/__internal/events/core/m_emitter_registrator.ts +++ b/packages/devextreme/js/__internal/events/core/m_emitter_registrator.ts @@ -1,297 +1,297 @@ -import $ from '../../core/renderer'; -import readyCallbacks from '../../core/utils/ready_callbacks'; -import domAdapter from '../../core/dom_adapter'; -import eventsEngine from '../../events/core/events_engine'; -import { data as elementData } from '../../core/element_data'; -import Class from '../../core/class'; -import { extend } from '../../core/utils/extend'; -import { each } from '../../core/utils/iterator'; -import registerEvent from './event_registrator'; -import { addNamespace, isMouseEvent } from '../utils/index'; -import pointerEvents from '../pointer'; -import { name as wheelEventName } from './wheel'; +import Class from '@js/core/class'; +import domAdapter from '@js/core/dom_adapter'; +import { data as elementData } from '@js/core/element_data'; +import $ from '@js/core/renderer'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import readyCallbacks from '@js/core/utils/ready_callbacks'; +import registerEvent from '@js/events/core/event_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import { name as wheelEventName } from '@js/events/core/wheel'; +import pointerEvents from '@js/events/pointer'; +import { addNamespace, isMouseEvent } from '@js/events/utils/index'; const MANAGER_EVENT = 'dxEventManager'; const EMITTER_DATA = 'dxEmitter'; const EventManager = Class.inherit({ - ctor: function() { - this._attachHandlers(); - this.reset(); - - this._proxiedCancelHandler = this._cancelHandler.bind(this); - this._proxiedAcceptHandler = this._acceptHandler.bind(this); - }, - - _attachHandlers: function() { - readyCallbacks.add(function() { - const document = domAdapter.getDocument(); - eventsEngine.subscribeGlobal(document, addNamespace(pointerEvents.down, MANAGER_EVENT), this._pointerDownHandler.bind(this)); - eventsEngine.subscribeGlobal(document, addNamespace(pointerEvents.move, MANAGER_EVENT), this._pointerMoveHandler.bind(this)); - eventsEngine.subscribeGlobal(document, addNamespace([pointerEvents.up, pointerEvents.cancel].join(' '), MANAGER_EVENT), this._pointerUpHandler.bind(this)); - eventsEngine.subscribeGlobal(document, addNamespace(wheelEventName, MANAGER_EVENT), this._mouseWheelHandler.bind(this)); - }.bind(this)); - }, - - _eachEmitter: function(callback) { - const activeEmitters = this._activeEmitters || []; - let i = 0; - - while(activeEmitters.length > i) { - const emitter = activeEmitters[i]; - if(callback(emitter) === false) { - break; - } - - if(activeEmitters[i] === emitter) { - i++; - } - } - }, + ctor() { + this._attachHandlers(); + this.reset(); + + this._proxiedCancelHandler = this._cancelHandler.bind(this); + this._proxiedAcceptHandler = this._acceptHandler.bind(this); + }, + + _attachHandlers() { + readyCallbacks.add(() => { + const document = domAdapter.getDocument(); + (eventsEngine as any).subscribeGlobal(document, addNamespace(pointerEvents.down, MANAGER_EVENT), this._pointerDownHandler.bind(this)); + (eventsEngine as any).subscribeGlobal(document, addNamespace(pointerEvents.move, MANAGER_EVENT), this._pointerMoveHandler.bind(this)); + (eventsEngine as any).subscribeGlobal(document, addNamespace([pointerEvents.up, pointerEvents.cancel].join(' '), MANAGER_EVENT), this._pointerUpHandler.bind(this)); + (eventsEngine as any).subscribeGlobal(document, addNamespace(wheelEventName, MANAGER_EVENT), this._mouseWheelHandler.bind(this)); + }); + }, - _applyToEmitters: function(method, arg) { - this._eachEmitter(function(emitter) { - emitter[method].call(emitter, arg); - }); - }, + _eachEmitter(callback) { + const activeEmitters = this._activeEmitters || []; + let i = 0; - reset: function() { - this._eachEmitter(this._proxiedCancelHandler); - this._activeEmitters = []; - }, + while (activeEmitters.length > i) { + const emitter = activeEmitters[i]; + if (callback(emitter) === false) { + break; + } - resetEmitter: function(emitter) { - this._proxiedCancelHandler(emitter); - }, + if (activeEmitters[i] === emitter) { + i++; + } + } + }, - _pointerDownHandler: function(e) { - if(isMouseEvent(e) && e.which > 1) { - return; - } + _applyToEmitters(method, arg) { + this._eachEmitter((emitter) => { + emitter[method].call(emitter, arg); + }); + }, - this._updateEmitters(e); - }, + reset() { + this._eachEmitter(this._proxiedCancelHandler); + this._activeEmitters = []; + }, - _updateEmitters: function(e) { - if(!this._isSetChanged(e)) { - return; - } + resetEmitter(emitter) { + this._proxiedCancelHandler(emitter); + }, - this._cleanEmitters(e); - this._fetchEmitters(e); - }, + _pointerDownHandler(e) { + if (isMouseEvent(e) && e.which > 1) { + return; + } - _isSetChanged: function(e) { - const currentSet = this._closestEmitter(e); - const previousSet = this._emittersSet || []; + this._updateEmitters(e); + }, - let setChanged = currentSet.length !== previousSet.length; + _updateEmitters(e) { + if (!this._isSetChanged(e)) { + return; + } - each(currentSet, function(index, emitter) { - setChanged = setChanged || previousSet[index] !== emitter; - return !setChanged; - }); + this._cleanEmitters(e); + this._fetchEmitters(e); + }, - this._emittersSet = currentSet; + _isSetChanged(e) { + const currentSet = this._closestEmitter(e); + const previousSet = this._emittersSet || []; - return setChanged; - }, + let setChanged = currentSet.length !== previousSet.length; - _closestEmitter: function(e) { - const that = this; + each(currentSet, (index, emitter) => { + setChanged = setChanged || previousSet[index] !== emitter; + return !setChanged; + }); - const result = []; - let $element = $(e.target); + this._emittersSet = currentSet; - function handleEmitter(_, emitter) { - if(!!emitter && emitter.validatePointers(e) && emitter.validate(e)) { - emitter.addCancelCallback(that._proxiedCancelHandler); - emitter.addAcceptCallback(that._proxiedAcceptHandler); - result.push(emitter); - } - } + return setChanged; + }, - while($element.length) { - const emitters = elementData($element.get(0), EMITTER_DATA) || []; - each(emitters, handleEmitter); - $element = $element.parent(); - } + _closestEmitter(e) { + const that = this; - return result; - }, + const result: any = []; + let $element = $(e.target); - _acceptHandler: function(acceptedEmitter, e) { - const that = this; + function handleEmitter(_, emitter) { + if (!!emitter && emitter.validatePointers(e) && emitter.validate(e)) { + emitter.addCancelCallback(that._proxiedCancelHandler); + emitter.addAcceptCallback(that._proxiedAcceptHandler); + result.push(emitter); + } + } - this._eachEmitter(function(emitter) { - if(emitter !== acceptedEmitter) { - that._cancelEmitter(emitter, e); - } - }); - }, + while ($element.length) { + const emitters = elementData($element.get(0), EMITTER_DATA) || []; + each(emitters, handleEmitter); + $element = $element.parent(); + } - _cancelHandler: function(canceledEmitter, e) { - this._cancelEmitter(canceledEmitter, e); - }, + return result; + }, - _cancelEmitter: function(emitter, e) { - const activeEmitters = this._activeEmitters; + _acceptHandler(acceptedEmitter, e) { + const that = this; - if(e) { - emitter.cancel(e); - } else { - emitter.reset(); - } + this._eachEmitter((emitter) => { + if (emitter !== acceptedEmitter) { + that._cancelEmitter(emitter, e); + } + }); + }, - emitter.removeCancelCallback(); - emitter.removeAcceptCallback(); + _cancelHandler(canceledEmitter, e) { + this._cancelEmitter(canceledEmitter, e); + }, - const emitterIndex = activeEmitters.indexOf(emitter); - if(emitterIndex > -1) { - activeEmitters.splice(emitterIndex, 1); - } - }, + _cancelEmitter(emitter, e) { + const activeEmitters = this._activeEmitters; - _cleanEmitters: function(e) { - this._applyToEmitters('end', e); - this.reset(e); - }, + if (e) { + emitter.cancel(e); + } else { + emitter.reset(); + } - _fetchEmitters: function(e) { - this._activeEmitters = this._emittersSet.slice(); - this._applyToEmitters('start', e); - }, + emitter.removeCancelCallback(); + emitter.removeAcceptCallback(); - _pointerMoveHandler: function(e) { - this._applyToEmitters('move', e); - }, + const emitterIndex = activeEmitters.indexOf(emitter); + if (emitterIndex > -1) { + activeEmitters.splice(emitterIndex, 1); + } + }, - _pointerUpHandler: function(e) { - this._updateEmitters(e); - }, + _cleanEmitters(e) { + this._applyToEmitters('end', e); + this.reset(e); + }, - _mouseWheelHandler: function(e) { - if(!this._allowInterruptionByMouseWheel()) { - return; - } + _fetchEmitters(e) { + this._activeEmitters = this._emittersSet.slice(); + this._applyToEmitters('start', e); + }, - e.pointers = [null]; - this._pointerDownHandler(e); + _pointerMoveHandler(e) { + this._applyToEmitters('move', e); + }, - this._adjustWheelEvent(e); + _pointerUpHandler(e) { + this._updateEmitters(e); + }, - this._pointerMoveHandler(e); - e.pointers = []; - this._pointerUpHandler(e); - }, + _mouseWheelHandler(e) { + if (!this._allowInterruptionByMouseWheel()) { + return; + } - _allowInterruptionByMouseWheel: function() { - let allowInterruption = true; - this._eachEmitter(function(emitter) { - allowInterruption = emitter.allowInterruptionByMouseWheel() && allowInterruption; - return allowInterruption; - }); - return allowInterruption; - }, - - _adjustWheelEvent: function(e) { - let closestGestureEmitter = null; - - this._eachEmitter(function(emitter) { - if(!(emitter.gesture)) { - return; - } - - const direction = emitter.getDirection(e); - if(direction !== 'horizontal' && !e.shiftKey || direction !== 'vertical' && e.shiftKey) { - closestGestureEmitter = emitter; - return false; - } - }); + e.pointers = [null]; + this._pointerDownHandler(e); - if(!closestGestureEmitter) { - return; - } + this._adjustWheelEvent(e); - const direction = closestGestureEmitter.getDirection(e); - const verticalGestureDirection = direction === 'both' && !e.shiftKey || direction === 'vertical'; - const prop = verticalGestureDirection ? 'pageY' : 'pageX'; + this._pointerMoveHandler(e); + e.pointers = []; + this._pointerUpHandler(e); + }, - e[prop] += e.delta; - }, + _allowInterruptionByMouseWheel() { + let allowInterruption = true; + this._eachEmitter((emitter) => { + allowInterruption = emitter.allowInterruptionByMouseWheel() && allowInterruption; + return allowInterruption; + }); + return allowInterruption; + }, + + _adjustWheelEvent(e) { + let closestGestureEmitter: any = null; + // @ts-expect-error + this._eachEmitter((emitter) => { + if (!emitter.gesture) { + return; + } + + const direction = emitter.getDirection(e); + if (direction !== 'horizontal' && !e.shiftKey || direction !== 'vertical' && e.shiftKey) { + closestGestureEmitter = emitter; + return false; + } + }); - isActive: function(element) { - let result = false; - this._eachEmitter(function(emitter) { - result = result || emitter.getElement().is(element); - }); - return result; + if (!closestGestureEmitter) { + return; } + + const direction = closestGestureEmitter.getDirection(e); + const verticalGestureDirection = direction === 'both' && !e.shiftKey || direction === 'vertical'; + const prop = verticalGestureDirection ? 'pageY' : 'pageX'; + + e[prop] += e.delta; + }, + + isActive(element) { + let result = false; + this._eachEmitter((emitter) => { + result = result || emitter.getElement().is(element); + }); + return result; + }, }); const eventManager = new EventManager(); const EMITTER_SUBSCRIPTION_DATA = 'dxEmitterSubscription'; -const registerEmitter = function(emitterConfig) { - const emitterClass = emitterConfig.emitter; - const emitterName = emitterConfig.events[0]; - const emitterEvents = emitterConfig.events; +const registerEmitter = function (emitterConfig) { + const EmitterClass = emitterConfig.emitter; + const emitterName = emitterConfig.events[0]; + const emitterEvents = emitterConfig.events; - each(emitterEvents, function(_, eventName) { - registerEvent(eventName, { + each(emitterEvents, (_, eventName) => { + registerEvent(eventName, { - noBubble: !emitterConfig.bubble, + noBubble: !emitterConfig.bubble, - setup: function(element) { - const subscriptions = elementData(element, EMITTER_SUBSCRIPTION_DATA) || {}; + setup(element) { + const subscriptions = elementData(element, EMITTER_SUBSCRIPTION_DATA) || {}; - const emitters = elementData(element, EMITTER_DATA) || {}; - const emitter = emitters[emitterName] || new emitterClass(element); + const emitters = elementData(element, EMITTER_DATA) || {}; + const emitter = emitters[emitterName] || new EmitterClass(element); - subscriptions[eventName] = true; - emitters[emitterName] = emitter; + subscriptions[eventName] = true; + emitters[emitterName] = emitter; - elementData(element, EMITTER_DATA, emitters); - elementData(element, EMITTER_SUBSCRIPTION_DATA, subscriptions); - }, + elementData(element, EMITTER_DATA, emitters); + elementData(element, EMITTER_SUBSCRIPTION_DATA, subscriptions); + }, - add: function(element, handleObj) { - const emitters = elementData(element, EMITTER_DATA); - const emitter = emitters[emitterName]; + add(element, handleObj) { + const emitters = elementData(element, EMITTER_DATA); + const emitter = emitters[emitterName]; - emitter.configure(extend({ - delegateSelector: handleObj.selector - }, handleObj.data), handleObj.type); - }, + emitter.configure(extend({ + delegateSelector: handleObj.selector, + }, handleObj.data), handleObj.type); + }, - teardown: function(element) { - const subscriptions = elementData(element, EMITTER_SUBSCRIPTION_DATA); + teardown(element) { + const subscriptions = elementData(element, EMITTER_SUBSCRIPTION_DATA); - const emitters = elementData(element, EMITTER_DATA); - const emitter = emitters[emitterName]; + const emitters = elementData(element, EMITTER_DATA); + const emitter = emitters[emitterName]; - delete subscriptions[eventName]; + delete subscriptions[eventName]; - let disposeEmitter = true; - each(emitterEvents, function(_, eventName) { - disposeEmitter = disposeEmitter && !subscriptions[eventName]; - return disposeEmitter; - }); + let disposeEmitter = true; + each(emitterEvents, (_, eventName) => { + disposeEmitter = disposeEmitter && !subscriptions[eventName]; + return disposeEmitter; + }); - if(disposeEmitter) { - if(eventManager.isActive(element)) { - eventManager.resetEmitter(emitter); - } + if (disposeEmitter) { + if ((eventManager as any).isActive(element)) { + (eventManager as any).resetEmitter(emitter); + } - emitter && emitter.dispose(); - delete emitters[emitterName]; - } - } + emitter && emitter.dispose(); + delete emitters[emitterName]; + } + }, - }); }); + }); }; export default registerEmitter; diff --git a/packages/devextreme/js/__internal/events/core/m_event_registrator.ts b/packages/devextreme/js/__internal/events/core/m_event_registrator.ts index f15717cc1523..1300b04f4577 100644 --- a/packages/devextreme/js/__internal/events/core/m_event_registrator.ts +++ b/packages/devextreme/js/__internal/events/core/m_event_registrator.ts @@ -1,34 +1,34 @@ -import { each } from '../../core/utils/iterator'; -import callbacks from './event_registrator_callbacks'; +import { each } from '@js/core/utils/iterator'; +import callbacks from '@js/events/core/event_registrator_callbacks'; -const registerEvent = function(name, eventObject) { - const strategy = {}; +const registerEvent = function (name, eventObject) { + const strategy: any = {}; - if('noBubble' in eventObject) { - strategy.noBubble = eventObject.noBubble; - } + if ('noBubble' in eventObject) { + strategy.noBubble = eventObject.noBubble; + } - if('bindType' in eventObject) { - strategy.bindType = eventObject.bindType; - } + if ('bindType' in eventObject) { + strategy.bindType = eventObject.bindType; + } - if('delegateType' in eventObject) { - strategy.delegateType = eventObject.delegateType; - } + if ('delegateType' in eventObject) { + strategy.delegateType = eventObject.delegateType; + } - each(['setup', 'teardown', 'add', 'remove', 'trigger', 'handle', '_default', 'dispose'], function(_, methodName) { - if(!eventObject[methodName]) { - return; - } + each(['setup', 'teardown', 'add', 'remove', 'trigger', 'handle', '_default', 'dispose'], (_, methodName) => { + if (!eventObject[methodName]) { + return; + } - strategy[methodName] = function() { - const args = [].slice.call(arguments); - args.unshift(this); - return eventObject[methodName].apply(eventObject, args); - }; - }); + strategy[methodName] = function () { + const args: any = [].slice.call(arguments); + args.unshift(this); + return eventObject[methodName].apply(eventObject, args); + }; + }); - callbacks.fire(name, strategy); + callbacks.fire(name, strategy); }; registerEvent.callbacks = callbacks; diff --git a/packages/devextreme/js/__internal/events/core/m_events_engine.ts b/packages/devextreme/js/__internal/events/core/m_events_engine.ts index 853c9d5cee3b..ea89ad34137b 100644 --- a/packages/devextreme/js/__internal/events/core/m_events_engine.ts +++ b/packages/devextreme/js/__internal/events/core/m_events_engine.ts @@ -1,685 +1,694 @@ -import registerEventCallbacks from './event_registrator_callbacks'; -import { extend } from '../../core/utils/extend'; -import { getEventTarget } from '../utils/event_target'; -import domAdapter from '../../core/dom_adapter'; -import { getWindow, hasWindow } from '../../core/utils/window'; +/* eslint-disable guard-for-in */ +/* eslint-disable no-restricted-syntax */ +import domAdapter from '@js/core/dom_adapter'; +import errors from '@js/core/errors'; +import callOnce from '@js/core/utils/call_once'; +import Callbacks from '@js/core/utils/callbacks'; +import injector from '@js/core/utils/dependency_injector'; +import { extend } from '@js/core/utils/extend'; +import { + isFunction, isObject, isString, isWindow, +} from '@js/core/utils/type'; +import { getWindow, hasWindow } from '@js/core/utils/window'; +import registerEventCallbacks from '@js/events/core/event_registrator_callbacks'; +import hookTouchProps from '@js/events/core/hook_touch_props'; +import { getEventTarget } from '@js/events/utils/event_target'; + const window = getWindow(); -import injector from '../../core/utils/dependency_injector'; -import { isWindow, isFunction, isString, isObject } from '../../core/utils/type'; -import Callbacks from '../../core/utils/callbacks'; -import errors from '../../core/errors'; -import hookTouchProps from '../../events/core/hook_touch_props'; -import callOnce from '../../core/utils/call_once'; const EMPTY_EVENT_NAME = 'dxEmptyEventType'; const NATIVE_EVENTS_TO_SUBSCRIBE = { - 'mouseenter': 'mouseover', - 'mouseleave': 'mouseout', - 'pointerenter': 'pointerover', - 'pointerleave': 'pointerout' + mouseenter: 'mouseover', + mouseleave: 'mouseout', + pointerenter: 'pointerover', + pointerleave: 'pointerout', }; const NATIVE_EVENTS_TO_TRIGGER = { - 'focusin': 'focus', - 'focusout': 'blur' + focusin: 'focus', + focusout: 'blur', }; const NO_BUBBLE_EVENTS = ['blur', 'focus', 'load']; const forcePassiveFalseEventNames = ['touchmove', 'wheel', 'mousewheel', 'touchstart']; const EVENT_PROPERTIES = [ - 'target', - 'relatedTarget', - 'delegateTarget', - 'altKey', - 'bubbles', - 'cancelable', - 'changedTouches', - 'ctrlKey', - 'detail', - 'eventPhase', - 'metaKey', - 'shiftKey', - 'view', - 'char', - 'code', - 'charCode', - 'key', - 'keyCode', - 'button', - 'buttons', - 'offsetX', - 'offsetY', - 'pointerId', - 'pointerType', - 'targetTouches', - 'toElement', - 'touches' + 'target', + 'relatedTarget', + 'delegateTarget', + 'altKey', + 'bubbles', + 'cancelable', + 'changedTouches', + 'ctrlKey', + 'detail', + 'eventPhase', + 'metaKey', + 'shiftKey', + 'view', + 'char', + 'code', + 'charCode', + 'key', + 'keyCode', + 'button', + 'buttons', + 'offsetX', + 'offsetY', + 'pointerId', + 'pointerType', + 'targetTouches', + 'toElement', + 'touches', ]; function matchesSafe(target, selector) { - return !isWindow(target) && target.nodeName !== '#document' && domAdapter.elementMatches(target, selector); + return !isWindow(target) && target.nodeName !== '#document' && (domAdapter as any).elementMatches(target, selector); } const elementDataMap = new WeakMap(); let guid = 0; let skipEvent; -const special = (function() { - const specialData = {}; - - registerEventCallbacks.add(function(eventName, eventObject) { - specialData[eventName] = eventObject; - }); - - return { - getField: function(eventName, field) { - return specialData[eventName] && specialData[eventName][field]; - }, - callMethod: function(eventName, methodName, context, args) { - return specialData[eventName] && specialData[eventName][methodName] && specialData[eventName][methodName].apply(context, args); - } - }; +const special = (function () { + const specialData = {}; + + registerEventCallbacks.add((eventName, eventObject) => { + specialData[eventName] = eventObject; + }); + + return { + getField(eventName, field) { + return specialData[eventName] && specialData[eventName][field]; + }, + callMethod(eventName, methodName, context, args) { + return specialData[eventName] && specialData[eventName][methodName] && specialData[eventName][methodName].apply(context, args); + }, + }; }()); const eventsEngine = injector({ - on: getHandler(normalizeOnArguments(iterate(function(element, eventName, selector, data, handler) { - const handlersController = getHandlersController(element, eventName); - handlersController.addHandler(handler, selector, data); - }))), - - one: getHandler(normalizeOnArguments(function(element, eventName, selector, data, handler) { - const oneTimeHandler = function() { - eventsEngine.off(element, eventName, selector, oneTimeHandler); - handler.apply(this, arguments); - }; - - eventsEngine.on(element, eventName, selector, data, oneTimeHandler); - })), - - off: getHandler(normalizeOffArguments(iterate(function(element, eventName, selector, handler) { - const handlersController = getHandlersController(element, eventName); - handlersController.removeHandler(handler, selector); - }))), - - trigger: getHandler(normalizeTriggerArguments(function(element, event, extraParameters) { - const eventName = event.type; - const handlersController = getHandlersController(element, event.type); - - special.callMethod(eventName, 'trigger', element, [ event, extraParameters ]); - handlersController.callHandlers(event, extraParameters); - - const noBubble = special.getField(eventName, 'noBubble') - || event.isPropagationStopped() - || NO_BUBBLE_EVENTS.indexOf(eventName) !== -1; - - if(!noBubble) { - const parents = []; - const getParents = function(element) { - const parent = element.parentNode - ?? (isObject(element.host) ? element.host : null); - if(parent) { - parents.push(parent); - getParents(parent); - } - }; - getParents(element); - parents.push(window); - - let i = 0; - - while(parents[i] && !event.isPropagationStopped()) { - const parentDataByEvent = getHandlersController(parents[i], event.type); - parentDataByEvent.callHandlers(extend(event, { currentTarget: parents[i] }), extraParameters); - i++; - } - } + on: getHandler(normalizeOnArguments(iterate((element, eventName, selector, data, handler) => { + const handlersController = getHandlersController(element, eventName); + handlersController.addHandler(handler, selector, data); + }))), + + one: getHandler(normalizeOnArguments((element, eventName, selector, data, handler) => { + const oneTimeHandler = function () { + eventsEngine.off(element, eventName, selector, oneTimeHandler); + handler.apply(this, arguments); + }; - if(element.nodeType || isWindow(element)) { - special.callMethod(eventName, '_default', element, [ event, extraParameters ]); - callNativeMethod(eventName, element); + eventsEngine.on(element, eventName, selector, data, oneTimeHandler); + })), + + off: getHandler(normalizeOffArguments(iterate((element, eventName, selector, handler) => { + const handlersController = getHandlersController(element, eventName); + handlersController.removeHandler(handler, selector); + }))), + + trigger: getHandler(normalizeTriggerArguments((element, event, extraParameters) => { + const eventName = event.type; + const handlersController = getHandlersController(element, event.type); + + special.callMethod(eventName, 'trigger', element, [event, extraParameters]); + handlersController.callHandlers(event, extraParameters); + + const noBubble = special.getField(eventName, 'noBubble') + || event.isPropagationStopped() + || NO_BUBBLE_EVENTS.includes(eventName); + + if (!noBubble) { + const parents: any = []; + const getParents = function (element) { + const parent = element.parentNode + ?? (isObject(element.host) ? element.host : null); + if (parent) { + parents.push(parent); + getParents(parent); } - })), + }; + getParents(element); + parents.push(window); - triggerHandler: getHandler(normalizeTriggerArguments(function(element, event, extraParameters) { - const handlersController = getHandlersController(element, event.type); - handlersController.callHandlers(event, extraParameters); - })) + let i = 0; + + while (parents[i] && !event.isPropagationStopped()) { + const parentDataByEvent = getHandlersController(parents[i], event.type); + parentDataByEvent.callHandlers(extend(event, { currentTarget: parents[i] }), extraParameters); + i++; + } + } + + if (element.nodeType || isWindow(element)) { + special.callMethod(eventName, '_default', element, [event, extraParameters]); + callNativeMethod(eventName, element); + } + })), + + triggerHandler: getHandler(normalizeTriggerArguments((element, event, extraParameters) => { + const handlersController = getHandlersController(element, event.type); + handlersController.callHandlers(event, extraParameters); + })), }); function applyForEach(args, method) { - const element = args[0]; + const element = args[0]; - if(!element) { - return; - } + if (!element) { + return; + } - if(domAdapter.isNode(element) || isWindow(element)) { - method.apply(eventsEngine, args); - } else if(!isString(element) && 'length' in element) { - const itemArgs = Array.prototype.slice.call(args, 0); + if (domAdapter.isNode(element) || isWindow(element)) { + method.apply(eventsEngine, args); + } else if (!isString(element) && 'length' in element) { + const itemArgs = Array.prototype.slice.call(args, 0); - Array.prototype.forEach.call(element, function(itemElement) { - itemArgs[0] = itemElement; - applyForEach(itemArgs, method); - }); - } else { - throw errors.Error('E0025'); - } + Array.prototype.forEach.call(element, (itemElement) => { + itemArgs[0] = itemElement; + applyForEach(itemArgs, method); + }); + } else { + throw errors.Error('E0025'); + } } function getHandler(method) { - return function() { - applyForEach(arguments, method); - }; + return function () { + applyForEach(arguments, method); + }; } function detectPassiveEventHandlersSupport() { - let isSupported = false; - - try { - const options = Object.defineProperty({ }, 'passive', { - get: function() { - isSupported = true; - return true; - } - }); + let isSupported = false; + + try { + const options = Object.defineProperty({}, 'passive', { + get() { + isSupported = true; + return true; + }, + }); - window.addEventListener('test', null, options); - } catch(e) { } + (window as any).addEventListener('test', null, options); + } catch (e) { + // + } - return isSupported; + return isSupported; } const passiveEventHandlersSupported = callOnce(detectPassiveEventHandlersSupport); const contains = (container, element) => { - if(isWindow(container)) { - return contains(container.document, element); - } + if (isWindow(container)) { + return contains(container.document, element); + } - return container.contains - ? container.contains(element) - : !!(element.compareDocumentPosition(container) & element.DOCUMENT_POSITION_CONTAINS); + return container.contains + ? container.contains(element) + : !!(element.compareDocumentPosition(container) & element.DOCUMENT_POSITION_CONTAINS); }; function getHandlersController(element, eventName) { - let elementData = elementDataMap.get(element); + let elementData = elementDataMap.get(element); - eventName = eventName || ''; + eventName = eventName || ''; - const eventNameParts = eventName.split('.'); - const namespaces = eventNameParts.slice(1); - const eventNameIsDefined = !!eventNameParts[0]; + const eventNameParts = eventName.split('.'); + const namespaces = eventNameParts.slice(1); + const eventNameIsDefined = !!eventNameParts[0]; - eventName = eventNameParts[0] || EMPTY_EVENT_NAME; + eventName = eventNameParts[0] || EMPTY_EVENT_NAME; - if(!elementData) { - elementData = {}; - elementDataMap.set(element, elementData); - } + if (!elementData) { + elementData = {}; + elementDataMap.set(element, elementData); + } - if(!elementData[eventName]) { - elementData[eventName] = { - handleObjects: [], - nativeHandler: null - }; - } + if (!elementData[eventName]) { + elementData[eventName] = { + handleObjects: [], + nativeHandler: null, + }; + } - const eventData = elementData[eventName]; - - return { - addHandler: function(handler, selector, data) { - const callHandler = function(e, extraParameters) { - const handlerArgs = [e]; - const target = e.currentTarget; - const relatedTarget = e.relatedTarget; - let secondaryTargetIsInside; - let result; - - if(eventName in NATIVE_EVENTS_TO_SUBSCRIBE) { - secondaryTargetIsInside = relatedTarget && target && (relatedTarget === target || contains(target, relatedTarget)); - } - - if(extraParameters !== undefined) { - handlerArgs.push(extraParameters); - } - - special.callMethod(eventName, 'handle', element, [ e, data ]); - - if(!secondaryTargetIsInside) { - result = handler.apply(target, handlerArgs); - } - - if(result === false) { - e.preventDefault(); - e.stopPropagation(); - } - }; - - const wrappedHandler = function(e, extraParameters) { - if(skipEvent && e.type === skipEvent) { - return; - } - - e.data = data; - e.delegateTarget = element; - - if(selector) { - let currentTarget = e.target; - - while(currentTarget && currentTarget !== element) { - if(matchesSafe(currentTarget, selector)) { - e.currentTarget = currentTarget; - callHandler(e, extraParameters); - } - currentTarget = currentTarget.parentNode; - } - } else { - e.currentTarget = e.delegateTarget || e.target; - - const isTargetInShadowDOM = Boolean(e.target?.shadowRoot); - if(isTargetInShadowDOM) { - const target = getEventTarget(e); - e.target = target; - } - - callHandler(e, extraParameters); - } - }; - - const handleObject = { - handler: handler, - wrappedHandler: wrappedHandler, - selector: selector, - type: eventName, - data: data, - namespace: namespaces.join('.'), - namespaces: namespaces, - guid: ++guid - }; - - eventData.handleObjects.push(handleObject); - - const firstHandlerForTheType = eventData.handleObjects.length === 1; - let shouldAddNativeListener = firstHandlerForTheType && eventNameIsDefined; - let nativeListenerOptions; - - if(shouldAddNativeListener) { - shouldAddNativeListener = !special.callMethod(eventName, 'setup', element, [ data, namespaces, handler ]); - } + const eventData = elementData[eventName]; - if(shouldAddNativeListener) { - eventData.nativeHandler = getNativeHandler(eventName); + return { + addHandler(handler, selector, data) { + const callHandler = function (e, extraParameters) { + const handlerArgs = [e]; + const target = e.currentTarget; + const { relatedTarget } = e; + let secondaryTargetIsInside; + let result; - if(passiveEventHandlersSupported() && forcePassiveFalseEventNames.indexOf(eventName) > -1) { - nativeListenerOptions = { - passive: false - }; - } + if (eventName in NATIVE_EVENTS_TO_SUBSCRIBE) { + secondaryTargetIsInside = relatedTarget && target && (relatedTarget === target || contains(target, relatedTarget)); + } - eventData.removeListener = domAdapter.listen(element, NATIVE_EVENTS_TO_SUBSCRIBE[eventName] || eventName, eventData.nativeHandler, nativeListenerOptions); - } + if (extraParameters !== undefined) { + handlerArgs.push(extraParameters); + } - special.callMethod(eventName, 'add', element, [ handleObject ]); - }, - - removeHandler: function(handler, selector) { - const removeByEventName = function(eventName) { - const eventData = elementData[eventName]; - - if(!eventData.handleObjects.length) { - delete elementData[eventName]; - return; - } - let removedHandler; - - eventData.handleObjects = eventData.handleObjects.filter(function(handleObject) { - const skip = namespaces.length && !isSubset(handleObject.namespaces, namespaces) - || handler && handleObject.handler !== handler - || selector && handleObject.selector !== selector; - - if(!skip) { - removedHandler = handleObject.handler; - special.callMethod(eventName, 'remove', element, [ handleObject ]); - } - - return skip; - }); - - const lastHandlerForTheType = !eventData.handleObjects.length; - const shouldRemoveNativeListener = lastHandlerForTheType && eventName !== EMPTY_EVENT_NAME; - - if(shouldRemoveNativeListener) { - special.callMethod(eventName, 'teardown', element, [ namespaces, removedHandler ]); - if(eventData.nativeHandler) { - eventData.removeListener(); - } - delete elementData[eventName]; - } - }; - - if(eventNameIsDefined) { - removeByEventName(eventName); - } else { - for(const name in elementData) { - removeByEventName(name); - } - } + special.callMethod(eventName, 'handle', element, [e, data]); - const elementDataIsEmpty = Object.keys(elementData).length === 0; + if (!secondaryTargetIsInside) { + result = handler.apply(target, handlerArgs); + } - if(elementDataIsEmpty) { - elementDataMap.delete(element); - } - }, + if (result === false) { + e.preventDefault(); + e.stopPropagation(); + } + }; - callHandlers: function(event, extraParameters) { - let forceStop = false; + const wrappedHandler = function (e, extraParameters) { + if (skipEvent && e.type === skipEvent) { + return; + } - const handleCallback = function(handleObject) { - if(forceStop) { - return; - } + e.data = data; + e.delegateTarget = element; - if(!namespaces.length || isSubset(handleObject.namespaces, namespaces)) { - handleObject.wrappedHandler(event, extraParameters); - forceStop = event.isImmediatePropagationStopped(); - } - }; + if (selector) { + let currentTarget = e.target; - eventData.handleObjects.forEach(handleCallback); - if(namespaces.length && elementData[EMPTY_EVENT_NAME]) { - elementData[EMPTY_EVENT_NAME].handleObjects.forEach(handleCallback); + while (currentTarget && currentTarget !== element) { + if (matchesSafe(currentTarget, selector)) { + e.currentTarget = currentTarget; + callHandler(e, extraParameters); } + currentTarget = currentTarget.parentNode; + } + } else { + e.currentTarget = e.delegateTarget || e.target; + + const isTargetInShadowDOM = Boolean(e.target?.shadowRoot); + if (isTargetInShadowDOM) { + const target = getEventTarget(e); + e.target = target; + } + + callHandler(e, extraParameters); } - }; + }; + + const handleObject = { + handler, + wrappedHandler, + selector, + type: eventName, + data, + namespace: namespaces.join('.'), + namespaces, + guid: ++guid, + }; + + eventData.handleObjects.push(handleObject); + + const firstHandlerForTheType = eventData.handleObjects.length === 1; + let shouldAddNativeListener = firstHandlerForTheType && eventNameIsDefined; + let nativeListenerOptions; + + if (shouldAddNativeListener) { + shouldAddNativeListener = !special.callMethod(eventName, 'setup', element, [data, namespaces, handler]); + } + + if (shouldAddNativeListener) { + eventData.nativeHandler = getNativeHandler(eventName); + + if (passiveEventHandlersSupported() && forcePassiveFalseEventNames.includes(eventName)) { + nativeListenerOptions = { + passive: false, + }; + } + + eventData.removeListener = (domAdapter as any).listen(element, NATIVE_EVENTS_TO_SUBSCRIBE[eventName] || eventName, eventData.nativeHandler, nativeListenerOptions); + } + + special.callMethod(eventName, 'add', element, [handleObject]); + }, + + removeHandler(handler, selector) { + const removeByEventName = function (eventName) { + const eventData = elementData[eventName]; + + if (!eventData.handleObjects.length) { + delete elementData[eventName]; + return; + } + let removedHandler; + + eventData.handleObjects = eventData.handleObjects.filter((handleObject) => { + const skip = namespaces.length && !isSubset(handleObject.namespaces, namespaces) + || handler && handleObject.handler !== handler + || selector && handleObject.selector !== selector; + + if (!skip) { + removedHandler = handleObject.handler; + special.callMethod(eventName, 'remove', element, [handleObject]); + } + + return skip; + }); + + const lastHandlerForTheType = !eventData.handleObjects.length; + const shouldRemoveNativeListener = lastHandlerForTheType && eventName !== EMPTY_EVENT_NAME; + + if (shouldRemoveNativeListener) { + special.callMethod(eventName, 'teardown', element, [namespaces, removedHandler]); + if (eventData.nativeHandler) { + eventData.removeListener(); + } + delete elementData[eventName]; + } + }; + + if (eventNameIsDefined) { + removeByEventName(eventName); + } else { + for (const name in elementData) { + removeByEventName(name); + } + } + + const elementDataIsEmpty = Object.keys(elementData).length === 0; + + if (elementDataIsEmpty) { + elementDataMap.delete(element); + } + }, + + callHandlers(event, extraParameters) { + let forceStop = false; + + const handleCallback = function (handleObject) { + if (forceStop) { + return; + } + + if (!namespaces.length || isSubset(handleObject.namespaces, namespaces)) { + handleObject.wrappedHandler(event, extraParameters); + forceStop = event.isImmediatePropagationStopped(); + } + }; + + eventData.handleObjects.forEach(handleCallback); + if (namespaces.length && elementData[EMPTY_EVENT_NAME]) { + elementData[EMPTY_EVENT_NAME].handleObjects.forEach(handleCallback); + } + }, + }; } function getNativeHandler(subscribeName) { - return function(event, extraParameters) { - const handlersController = getHandlersController(this, subscribeName); - event = eventsEngine.Event(event); - handlersController.callHandlers(event, extraParameters); - }; + return function (event, extraParameters) { + const handlersController = getHandlersController(this, subscribeName); + event = eventsEngine.Event(event); + handlersController.callHandlers(event, extraParameters); + }; } function isSubset(original, checked) { - for(let i = 0; i < checked.length; i++) { - if(original.indexOf(checked[i]) < 0) return false; - } - return true; + for (let i = 0; i < checked.length; i++) { + if (original.indexOf(checked[i]) < 0) return false; + } + return true; } function normalizeOnArguments(callback) { - return function(element, eventName, selector, data, handler) { - if(!handler) { - handler = data; - data = undefined; - } - if(typeof selector !== 'string') { - data = selector; - selector = undefined; - } + return function (element, eventName, selector, data, handler) { + if (!handler) { + handler = data; + data = undefined; + } + if (typeof selector !== 'string') { + data = selector; + selector = undefined; + } - if(!handler && typeof eventName === 'string') { - handler = data || selector; - selector = undefined; - data = undefined; - } + if (!handler && typeof eventName === 'string') { + handler = data || selector; + selector = undefined; + data = undefined; + } - callback(element, eventName, selector, data, handler); - }; + callback(element, eventName, selector, data, handler); + }; } function normalizeOffArguments(callback) { - return function(element, eventName, selector, handler) { - if(typeof selector === 'function') { - handler = selector; - selector = undefined; - } + return function (element, eventName, selector, handler) { + if (typeof selector === 'function') { + handler = selector; + selector = undefined; + } - callback(element, eventName, selector, handler); - }; + callback(element, eventName, selector, handler); + }; } function normalizeTriggerArguments(callback) { - return function(element, src, extraParameters) { - if(typeof src === 'string') { - src = { - type: src - }; - } + return function (element, src, extraParameters) { + if (typeof src === 'string') { + src = { + type: src, + }; + } - if(!src.target) { - src.target = element; - } + if (!src.target) { + src.target = element; + } - src.currentTarget = element; + src.currentTarget = element; - if(!src.delegateTarget) { - src.delegateTarget = element; - } + if (!src.delegateTarget) { + src.delegateTarget = element; + } - if(!src.type && src.originalEvent) { - src.type = src.originalEvent.type; - } + if (!src.type && src.originalEvent) { + src.type = src.originalEvent.type; + } - callback(element, (src instanceof eventsEngine.Event) ? src : eventsEngine.Event(src), extraParameters); - }; + callback(element, src instanceof eventsEngine.Event ? src : eventsEngine.Event(src), extraParameters); + }; } function normalizeEventArguments(callback) { - eventsEngine.Event = function(src, config) { - if(!(this instanceof eventsEngine.Event)) { - return new eventsEngine.Event(src, config); - } - - if(!src) { - src = {}; - } + eventsEngine.Event = function (src, config) { + if (!(this instanceof eventsEngine.Event)) { + return new eventsEngine.Event(src, config); + } - if(typeof src === 'string') { - src = { - type: src - }; - } + if (!src) { + src = {}; + } - if(!config) { - config = {}; - } + if (typeof src === 'string') { + src = { + type: src, + }; + } - callback.call(this, src, config); - }; - Object.assign(eventsEngine.Event.prototype, { - _propagationStopped: false, - _immediatePropagationStopped: false, - _defaultPrevented: false, - isPropagationStopped: function() { - return !!(this._propagationStopped || this.originalEvent && this.originalEvent.propagationStopped); - }, - stopPropagation: function() { - this._propagationStopped = true; - this.originalEvent && this.originalEvent.stopPropagation(); - }, - isImmediatePropagationStopped: function() { - return this._immediatePropagationStopped; - }, - stopImmediatePropagation: function() { - this.stopPropagation(); - this._immediatePropagationStopped = true; - this.originalEvent && this.originalEvent.stopImmediatePropagation(); - }, - isDefaultPrevented: function() { - return !!(this._defaultPrevented || this.originalEvent && this.originalEvent.defaultPrevented); - }, - preventDefault: function() { - this._defaultPrevented = true; - this.originalEvent && this.originalEvent.preventDefault(); - } + if (!config) { + config = {}; + } - }); - return eventsEngine.Event; + callback.call(this, src, config); + }; + Object.assign(eventsEngine.Event.prototype, { + _propagationStopped: false, + _immediatePropagationStopped: false, + _defaultPrevented: false, + isPropagationStopped() { + return !!(this._propagationStopped || this.originalEvent && this.originalEvent.propagationStopped); + }, + stopPropagation() { + this._propagationStopped = true; + this.originalEvent && this.originalEvent.stopPropagation(); + }, + isImmediatePropagationStopped() { + return this._immediatePropagationStopped; + }, + stopImmediatePropagation() { + this.stopPropagation(); + this._immediatePropagationStopped = true; + this.originalEvent && this.originalEvent.stopImmediatePropagation(); + }, + isDefaultPrevented() { + return !!(this._defaultPrevented || this.originalEvent && this.originalEvent.defaultPrevented); + }, + preventDefault() { + this._defaultPrevented = true; + this.originalEvent && this.originalEvent.preventDefault(); + }, + + }); + return eventsEngine.Event; } function iterate(callback) { - const iterateEventNames = function(element, eventName) { - if(eventName && eventName.indexOf(' ') > -1) { - const args = Array.prototype.slice.call(arguments, 0); - eventName.split(' ').forEach(function(eventName) { - args[1] = eventName; - callback.apply(this, args); - }); - } else { - callback.apply(this, arguments); - } - }; + const iterateEventNames = function (element, eventName) { + if (eventName && eventName.indexOf(' ') > -1) { + const args = Array.prototype.slice.call(arguments, 0); + eventName.split(' ').forEach(function (eventName) { + args[1] = eventName; + callback.apply(this, args); + }); + } else { + callback.apply(this, arguments); + } + }; - return function(element, eventName) { - if(typeof eventName === 'object') { - const args = Array.prototype.slice.call(arguments, 0); + return function (element, eventName) { + if (typeof eventName === 'object') { + const args: any = Array.prototype.slice.call(arguments, 0); - for(const name in eventName) { - args[1] = name; - args[args.length - 1] = eventName[name]; - iterateEventNames.apply(this, args); - } - } else { - iterateEventNames.apply(this, arguments); - } - }; + for (const name in eventName) { + args[1] = name; + args[args.length - 1] = eventName[name]; + iterateEventNames.apply(this, args); + } + } else { + iterateEventNames.apply(this, arguments as any); + } + }; } function callNativeMethod(eventName, element) { - const nativeMethodName = NATIVE_EVENTS_TO_TRIGGER[eventName] || eventName; + const nativeMethodName = NATIVE_EVENTS_TO_TRIGGER[eventName] || eventName; - const isLinkClickEvent = function(eventName, element) { - return eventName === 'click' && element.localName === 'a'; - }; + const isLinkClickEvent = function (eventName, element) { + return eventName === 'click' && element.localName === 'a'; + }; - if(isLinkClickEvent(eventName, element)) return; + if (isLinkClickEvent(eventName, element)) return; - if(isFunction(element[nativeMethodName])) { - skipEvent = eventName; - element[nativeMethodName](); - skipEvent = undefined; - } + if (isFunction(element[nativeMethodName])) { + skipEvent = eventName; + element[nativeMethodName](); + skipEvent = undefined; + } } function calculateWhich(event) { - const setForMouseEvent = function(event) { - const mouseEventRegex = /^(?:mouse|pointer|contextmenu|drag|drop)|click/; - return !event.which && event.button !== undefined && mouseEventRegex.test(event.type); + const setForMouseEvent = function (event) { + const mouseEventRegex = /^(?:mouse|pointer|contextmenu|drag|drop)|click/; + return !event.which && event.button !== undefined && mouseEventRegex.test(event.type); + }; + + const setForKeyEvent = function (event) { + return event.which == null && event.type.indexOf('key') === 0; + }; + + if (setForKeyEvent(event)) { + return event.charCode != null ? event.charCode : event.keyCode; + } + + if (setForMouseEvent(event)) { + const whichByButton = { + 1: 1, 2: 3, 3: 1, 4: 2, }; + return whichByButton[event.button]; + } - const setForKeyEvent = function(event) { - return event.which == null && event.type.indexOf('key') === 0; - }; - - if(setForKeyEvent(event)) { - return event.charCode != null ? event.charCode : event.keyCode; - } - - if(setForMouseEvent(event)) { - const whichByButton = { 1: 1, 2: 3, 3: 1, 4: 2 }; - return whichByButton[event.button]; - } - - return event.which; + return event.which; } function initEvent(EventClass) { - if(EventClass) { - eventsEngine.Event = EventClass; - eventsEngine.Event.prototype = EventClass.prototype; - } + if (EventClass) { + eventsEngine.Event = EventClass; + eventsEngine.Event.prototype = EventClass.prototype; + } } -initEvent(normalizeEventArguments(function(src, config) { - const srcIsEvent = src instanceof eventsEngine.Event - || (hasWindow() && src instanceof window.Event) - || (src.view?.Event && src instanceof src.view.Event); - - if(srcIsEvent) { - this.originalEvent = src; - this.type = src.type; - this.currentTarget = undefined; - if(Object.prototype.hasOwnProperty.call(src, 'isTrusted')) { - this.isTrusted = src.isTrusted; - } - this.timeStamp = src.timeStamp || Date.now(); - } else { - Object.assign(this, src); +initEvent(normalizeEventArguments(function (src, config) { + const srcIsEvent = src instanceof eventsEngine.Event + || (hasWindow() && src instanceof (window as any).Event) + || (src.view?.Event && src instanceof src.view.Event); + + if (srcIsEvent) { + this.originalEvent = src; + this.type = src.type; + this.currentTarget = undefined; + if (Object.prototype.hasOwnProperty.call(src, 'isTrusted')) { + this.isTrusted = src.isTrusted; } + this.timeStamp = src.timeStamp || Date.now(); + } else { + Object.assign(this, src); + } - addProperty('which', calculateWhich, this); + addProperty('which', calculateWhich, this); - if(src.type.indexOf('touch') === 0) { - delete config.pageX; - delete config.pageY; - } + if (src.type.indexOf('touch') === 0) { + delete config.pageX; + delete config.pageY; + } - Object.assign(this, config); + Object.assign(this, config); - this.guid = ++guid; + this.guid = ++guid; })); function addProperty(propName, hook, eventInstance) { - Object.defineProperty(eventInstance || eventsEngine.Event.prototype, propName, { + Object.defineProperty(eventInstance || eventsEngine.Event.prototype, propName, { + enumerable: true, + configurable: true, + + get() { + return this.originalEvent && hook(this.originalEvent); + }, + + set(value) { + Object.defineProperty(this, propName, { enumerable: true, configurable: true, - - get: function() { - return this.originalEvent && hook(this.originalEvent); - }, - - set: function(value) { - Object.defineProperty(this, propName, { - enumerable: true, - configurable: true, - writable: true, - value: value - }); - } - }); + writable: true, + value, + }); + }, + }); } - -EVENT_PROPERTIES.forEach(prop => addProperty(prop, (event) => (event[prop]))); +// @ts-expect-error +EVENT_PROPERTIES.forEach((prop) => addProperty(prop, (event) => event[prop])); hookTouchProps(addProperty); const beforeSetStrategy = Callbacks(); const afterSetStrategy = Callbacks(); -eventsEngine.set = function(engine) { - beforeSetStrategy.fire(); - eventsEngine.inject(engine); - initEvent(engine.Event); - afterSetStrategy.fire(); +eventsEngine.set = function (engine) { + beforeSetStrategy.fire(); + eventsEngine.inject(engine); + initEvent(engine.Event); + afterSetStrategy.fire(); }; -eventsEngine.subscribeGlobal = function() { - applyForEach(arguments, normalizeOnArguments(function() { - const args = arguments; +eventsEngine.subscribeGlobal = function () { + applyForEach(arguments, normalizeOnArguments(function () { + const args = arguments; - eventsEngine.on.apply(this, args); + eventsEngine.on.apply(this, args); - beforeSetStrategy.add(function() { - const offArgs = Array.prototype.slice.call(args, 0); - offArgs.splice(3, 1); - eventsEngine.off.apply(this, offArgs); - }); + beforeSetStrategy.add(function () { + const offArgs = Array.prototype.slice.call(args, 0); + offArgs.splice(3, 1); + eventsEngine.off.apply(this, offArgs); + }); - afterSetStrategy.add(function() { - eventsEngine.on.apply(this, args); - }); - })); + afterSetStrategy.add(function () { + eventsEngine.on.apply(this, args); + }); + })); }; eventsEngine.forcePassiveFalseEventNames = forcePassiveFalseEventNames; eventsEngine.passiveEventHandlersSupported = passiveEventHandlersSupported; -///#DEBUG +/// #DEBUG eventsEngine.elementDataMap = elementDataMap; eventsEngine.detectPassiveEventHandlersSupport = detectPassiveEventHandlersSupport; -///#ENDDEBUG +/// #ENDDEBUG export default eventsEngine; diff --git a/packages/devextreme/js/__internal/events/core/m_hook_touch_props.ts b/packages/devextreme/js/__internal/events/core/m_hook_touch_props.ts index fec9f76a8e75..8099d17c4fbd 100644 --- a/packages/devextreme/js/__internal/events/core/m_hook_touch_props.ts +++ b/packages/devextreme/js/__internal/events/core/m_hook_touch_props.ts @@ -1,21 +1,19 @@ const touchPropsToHook = ['pageX', 'pageY', 'screenX', 'screenY', 'clientX', 'clientY']; -const touchPropHook = function(name, event) { - if(event[name] && !event.touches || !event.touches) { - return event[name]; - } +const touchPropHook = function (name, event) { + if (event[name] && !event.touches || !event.touches) { + return event[name]; + } - const touches = event.touches.length ? event.touches : event.changedTouches; - if(!touches.length) { - return; - } + const touches = event.touches.length ? event.touches : event.changedTouches; + if (!touches.length) { + return; + } - return touches[0][name]; + return touches[0][name]; }; -export default function(callback) { - touchPropsToHook.forEach(function(name) { - callback(name, function(event) { - return touchPropHook(name, event); - }); - }, this); +export default function (callback) { + touchPropsToHook.forEach((name) => { + callback(name, (event) => touchPropHook(name, event)); + }, this); } diff --git a/packages/devextreme/js/__internal/events/core/m_keyboard_processor.ts b/packages/devextreme/js/__internal/events/core/m_keyboard_processor.ts index ad018beb86c9..774ed33cf7b3 100644 --- a/packages/devextreme/js/__internal/events/core/m_keyboard_processor.ts +++ b/packages/devextreme/js/__internal/events/core/m_keyboard_processor.ts @@ -1,82 +1,80 @@ -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import Class from '../../core/class'; -import { addNamespace, normalizeKeyName } from '../../events/utils/index'; +import Class from '@js/core/class'; +import $ from '@js/core/renderer'; +import eventsEngine from '@js/events/core/events_engine'; +import { addNamespace, normalizeKeyName } from '@js/events/utils/index'; const COMPOSITION_START_EVENT = 'compositionstart'; const COMPOSITION_END_EVENT = 'compositionend'; const KEYDOWN_EVENT = 'keydown'; const NAMESPACE = 'KeyboardProcessor'; -const createKeyDownOptions = (e) => { - return { - keyName: normalizeKeyName(e), - key: e.key, - code: e.code, - ctrl: e.ctrlKey, - location: e.location, - metaKey: e.metaKey, - shift: e.shiftKey, - alt: e.altKey, - which: e.which, - originalEvent: e - }; -}; +const createKeyDownOptions = (e) => ({ + keyName: normalizeKeyName(e), + key: e.key, + code: e.code, + ctrl: e.ctrlKey, + location: e.location, + metaKey: e.metaKey, + shift: e.shiftKey, + alt: e.altKey, + which: e.which, + originalEvent: e, +}); const KeyboardProcessor = Class.inherit({ - _keydown: addNamespace(KEYDOWN_EVENT, NAMESPACE), - _compositionStart: addNamespace(COMPOSITION_START_EVENT, NAMESPACE), - _compositionEnd: addNamespace(COMPOSITION_END_EVENT, NAMESPACE), - - ctor: function(options) { - options = options || {}; - if(options.element) { - this._element = $(options.element); - } - if(options.focusTarget) { - this._focusTarget = options.focusTarget; - } - this._handler = options.handler; - - if(this._element) { - this._processFunction = (e) => { - const focusTargets = $(this._focusTarget).toArray(); - const isNotFocusTarget = this._focusTarget && this._focusTarget !== e.target && !focusTargets.includes(e.target); - const shouldSkipProcessing = this._isComposingJustFinished && e.which === 229 || this._isComposing || isNotFocusTarget; + _keydown: addNamespace(KEYDOWN_EVENT, NAMESPACE), + _compositionStart: addNamespace(COMPOSITION_START_EVENT, NAMESPACE), + _compositionEnd: addNamespace(COMPOSITION_END_EVENT, NAMESPACE), - this._isComposingJustFinished = false; - if(!shouldSkipProcessing) { - this.process(e); - } - }; - this._toggleProcessingWithContext = this.toggleProcessing.bind(this); + ctor(options) { + options = options || {}; + if (options.element) { + this._element = $(options.element); + } + if (options.focusTarget) { + this._focusTarget = options.focusTarget; + } + this._handler = options.handler; - eventsEngine.on(this._element, this._keydown, this._processFunction); - eventsEngine.on(this._element, this._compositionStart, this._toggleProcessingWithContext); - eventsEngine.on(this._element, this._compositionEnd, this._toggleProcessingWithContext); - } - }, + if (this._element) { + this._processFunction = (e) => { + const focusTargets = $(this._focusTarget).toArray(); + const isNotFocusTarget = this._focusTarget && this._focusTarget !== e.target && !focusTargets.includes(e.target); + const shouldSkipProcessing = this._isComposingJustFinished && e.which === 229 || this._isComposing || isNotFocusTarget; - dispose: function() { - if(this._element) { - eventsEngine.off(this._element, this._keydown, this._processFunction); - eventsEngine.off(this._element, this._compositionStart, this._toggleProcessingWithContext); - eventsEngine.off(this._element, this._compositionEnd, this._toggleProcessingWithContext); + this._isComposingJustFinished = false; + if (!shouldSkipProcessing) { + this.process(e); } - this._element = undefined; - this._handler = undefined; - }, + }; + this._toggleProcessingWithContext = this.toggleProcessing.bind(this); - process: function(e) { - this._handler(createKeyDownOptions(e)); - }, + eventsEngine.on(this._element, this._keydown, this._processFunction); + eventsEngine.on(this._element, this._compositionStart, this._toggleProcessingWithContext); + eventsEngine.on(this._element, this._compositionEnd, this._toggleProcessingWithContext); + } + }, - toggleProcessing: function({ type }) { - this._isComposing = type === COMPOSITION_START_EVENT; - this._isComposingJustFinished = !this._isComposing; + dispose() { + if (this._element) { + eventsEngine.off(this._element, this._keydown, this._processFunction); + eventsEngine.off(this._element, this._compositionStart, this._toggleProcessingWithContext); + eventsEngine.off(this._element, this._compositionEnd, this._toggleProcessingWithContext); } + this._element = undefined; + this._handler = undefined; + }, + + process(e) { + this._handler(createKeyDownOptions(e)); + }, + + toggleProcessing({ type }) { + this._isComposing = type === COMPOSITION_START_EVENT; + this._isComposingJustFinished = !this._isComposing; + }, }); -KeyboardProcessor.createKeyDownOptions = createKeyDownOptions; +(KeyboardProcessor as any).createKeyDownOptions = createKeyDownOptions; export default KeyboardProcessor; diff --git a/packages/devextreme/js/__internal/events/core/m_wheel.ts b/packages/devextreme/js/__internal/events/core/m_wheel.ts index 4e99c61d5b6d..60e28f3995c7 100644 --- a/packages/devextreme/js/__internal/events/core/m_wheel.ts +++ b/packages/devextreme/js/__internal/events/core/m_wheel.ts @@ -1,8 +1,7 @@ -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import registerEvent from './event_registrator'; -import { addNamespace, fireEvent } from '../utils/index'; - +import $ from '@js/core/renderer'; +import registerEvent from '@js/events/core/event_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import { addNamespace, fireEvent } from '@js/events/utils/index'; const EVENT_NAME = 'dxmousewheel'; const EVENT_NAMESPACE = 'dxWheel'; @@ -12,41 +11,42 @@ const PIXEL_MODE = 0; const DELTA_MUTLIPLIER = 30; const wheel = { - setup: function(element) { - const $element = $(element); - eventsEngine.on($element, addNamespace(NATIVE_EVENT_NAME, EVENT_NAMESPACE), wheel._wheelHandler.bind(wheel)); - }, - - teardown: function(element) { - eventsEngine.off(element, `.${EVENT_NAMESPACE}`); - }, - - _wheelHandler: function(e) { - const { deltaMode, deltaY, deltaX, deltaZ } = e.originalEvent; - - fireEvent({ - type: EVENT_NAME, - originalEvent: e, - delta: this._normalizeDelta(deltaY, deltaMode), - deltaX, - deltaY, - deltaZ, - deltaMode, - pointerType: 'mouse' - }); - - e.stopPropagation(); - }, - - _normalizeDelta(delta, deltaMode = PIXEL_MODE) { - if(deltaMode === PIXEL_MODE) { - return -delta; - } else { - // Use multiplier to get rough delta value in px for the LINE or PAGE mode - // https://bugzilla.mozilla.org/show_bug.cgi?id=1392460 - return -DELTA_MUTLIPLIER * delta; - } + setup(element) { + const $element = $(element); + eventsEngine.on($element, addNamespace(NATIVE_EVENT_NAME, EVENT_NAMESPACE), wheel._wheelHandler.bind(wheel)); + }, + + teardown(element) { + eventsEngine.off(element, `.${EVENT_NAMESPACE}`); + }, + + _wheelHandler(e) { + const { + deltaMode, deltaY, deltaX, deltaZ, + } = e.originalEvent; + + fireEvent({ + type: EVENT_NAME, + originalEvent: e, + delta: this._normalizeDelta(deltaY, deltaMode), + deltaX, + deltaY, + deltaZ, + deltaMode, + pointerType: 'mouse', + } as any); + + e.stopPropagation(); + }, + + _normalizeDelta(delta, deltaMode = PIXEL_MODE) { + if (deltaMode === PIXEL_MODE) { + return -delta; } + // Use multiplier to get rough delta value in px for the LINE or PAGE mode + // https://bugzilla.mozilla.org/show_bug.cgi?id=1392460 + return -DELTA_MUTLIPLIER * delta; + }, }; registerEvent(EVENT_NAME, wheel); diff --git a/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.scroll.ts b/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.scroll.ts index 68848097870c..60bdd27b0c76 100644 --- a/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.scroll.ts +++ b/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.scroll.ts @@ -1,11 +1,14 @@ -import eventsEngine from '../../events/core/events_engine'; -import Class from '../../core/class'; -const abstract = Class.abstract; -import { addNamespace, isDxMouseWheelEvent, isMouseEvent, eventData, eventDelta } from '../../events/utils/index'; -import GestureEmitter from '../../events/gesture/emitter.gesture'; -import registerEmitter from '../../events/core/emitter_registrator'; -import { requestAnimationFrame, cancelAnimationFrame } from '../../animation/frame'; -import devices from '../../core/devices'; +import { cancelAnimationFrame, requestAnimationFrame } from '@js/animation/frame'; +import Class from '@js/core/class'; +import devices from '@js/core/devices'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import GestureEmitter from '@js/events/gesture/emitter.gesture'; +import { + addNamespace, eventData, eventDelta, isDxMouseWheelEvent, isMouseEvent, +} from '@js/events/utils/index'; + +const { abstract } = Class; const realDevice = devices.real(); @@ -17,339 +20,321 @@ const SCROLL_END_EVENT = 'dxscrollend'; const SCROLL_STOP_EVENT = 'dxscrollstop'; const SCROLL_CANCEL_EVENT = 'dxscrollcancel'; +const Locker = Class.inherit((function () { + const NAMESPACED_SCROLL_EVENT = addNamespace(SCROLL_EVENT, 'dxScrollEmitter'); -const Locker = Class.inherit((function() { + return { - const NAMESPACED_SCROLL_EVENT = addNamespace(SCROLL_EVENT, 'dxScrollEmitter'); + ctor(element) { + this._element = element; - return { - - ctor: function(element) { - this._element = element; - - this._locked = false; - - this._proxiedScroll = (e) => { - if(!this._disposed) { - this._scroll(e); - } - }; - eventsEngine.on(this._element, NAMESPACED_SCROLL_EVENT, this._proxiedScroll); - }, + this._locked = false; - _scroll: abstract, - - check: function(e, callback) { - if(this._locked) { - callback(); - } - }, - - dispose: function() { - this._disposed = true; - eventsEngine.off(this._element, NAMESPACED_SCROLL_EVENT, this._proxiedScroll); + this._proxiedScroll = (e) => { + if (!this._disposed) { + this._scroll(e); } + }; + eventsEngine.on(this._element, NAMESPACED_SCROLL_EVENT, this._proxiedScroll); + }, - }; - -})()); - - -const TimeoutLocker = Locker.inherit((function() { - - return { + _scroll: abstract, - ctor: function(element, timeout) { - this.callBase(element); + check(e, callback) { + if (this._locked) { + callback(); + } + }, - this._timeout = timeout; - }, - - _scroll: function() { - this._prepare(); - this._forget(); - }, - - _prepare: function() { - if(this._timer) { - this._clearTimer(); - } - this._locked = true; - }, - - _clearTimer: function() { - clearTimeout(this._timer); - this._locked = false; - this._timer = null; - }, - - _forget: function() { - const that = this; - - this._timer = setTimeout(function() { - that._clearTimer(); - }, this._timeout); - }, - - dispose: function() { - this.callBase(); - - this._clearTimer(); - } - - }; + dispose() { + this._disposed = true; + eventsEngine.off(this._element, NAMESPACED_SCROLL_EVENT, this._proxiedScroll); + }, + }; })()); +const TimeoutLocker = Locker.inherit((function () { + return { -const WheelLocker = TimeoutLocker.inherit((function() { - - const WHEEL_UNLOCK_TIMEOUT = 400; - - return { + ctor(element, timeout) { + this.callBase(element); - ctor: function(element) { - this.callBase(element, WHEEL_UNLOCK_TIMEOUT); + this._timeout = timeout; + }, - this._lastWheelDirection = null; - }, + _scroll() { + this._prepare(); + this._forget(); + }, - check: function(e, callback) { - this._checkDirectionChanged(e); + _prepare() { + if (this._timer) { + this._clearTimer(); + } + this._locked = true; + }, - this.callBase(e, callback); - }, + _clearTimer() { + clearTimeout(this._timer); + this._locked = false; + this._timer = null; + }, - _checkDirectionChanged: function(e) { - if(!isDxMouseWheelEvent(e)) { - this._lastWheelDirection = null; - return; - } + _forget() { + const that = this; - const direction = e.shiftKey || false; - const directionChange = this._lastWheelDirection !== null && direction !== this._lastWheelDirection; - this._lastWheelDirection = direction; + this._timer = setTimeout(() => { + that._clearTimer(); + }, this._timeout); + }, - this._locked = this._locked && !directionChange; - } + dispose() { + this.callBase(); - }; + this._clearTimer(); + }, + }; })()); +const WheelLocker = TimeoutLocker.inherit((function () { + const WHEEL_UNLOCK_TIMEOUT = 400; -let PointerLocker = TimeoutLocker.inherit((function() { + return { - const POINTER_UNLOCK_TIMEOUT = 400; + ctor(element) { + this.callBase(element, WHEEL_UNLOCK_TIMEOUT); - return { + this._lastWheelDirection = null; + }, - ctor: function(element) { - this.callBase(element, POINTER_UNLOCK_TIMEOUT); - } + check(e, callback) { + this._checkDirectionChanged(e); - }; + this.callBase(e, callback); + }, -})()); - -(function() { - const { ios: isIos, android: isAndroid } = realDevice; - - if(!(isIos || isAndroid)) { + _checkDirectionChanged(e) { + if (!isDxMouseWheelEvent(e)) { + this._lastWheelDirection = null; return; - } - - PointerLocker = Locker.inherit((function() { - - return { - - _scroll: function() { - this._locked = true; - - const that = this; - cancelAnimationFrame(this._scrollFrame); - this._scrollFrame = requestAnimationFrame(function() { - that._locked = false; - }); - }, + } - check: function(e, callback) { - cancelAnimationFrame(this._scrollFrame); - cancelAnimationFrame(this._checkFrame); + const direction = e.shiftKey || false; + const directionChange = this._lastWheelDirection !== null && direction !== this._lastWheelDirection; + this._lastWheelDirection = direction; - const that = this; - const callBase = this.callBase; - this._checkFrame = requestAnimationFrame(function() { - callBase.call(that, e, callback); + this._locked = this._locked && !directionChange; + }, - that._locked = false; - }); - }, - - dispose: function() { - this.callBase(); - - cancelAnimationFrame(this._scrollFrame); - cancelAnimationFrame(this._checkFrame); - } + }; +})()); - }; +let PointerLocker = TimeoutLocker.inherit((function () { + const POINTER_UNLOCK_TIMEOUT = 400; - })()); + return { -})(); + ctor(element) { + this.callBase(element, POINTER_UNLOCK_TIMEOUT); + }, + }; +})()); -const ScrollEmitter = GestureEmitter.inherit((function() { +(function () { + const { ios: isIos, android: isAndroid } = realDevice; - const INERTIA_TIMEOUT = 100; - const VELOCITY_CALC_TIMEOUT = 200; - const FRAME_DURATION = Math.round(1000 / 60); + if (!(isIos || isAndroid)) { + return; + } + PointerLocker = Locker.inherit((function () { return { - ctor: function(element) { - this.callBase.apply(this, arguments); - this.direction = 'both'; + _scroll() { + this._locked = true; + + const that = this; + cancelAnimationFrame(this._scrollFrame); + this._scrollFrame = requestAnimationFrame(() => { + that._locked = false; + }); + }, - this._pointerLocker = new PointerLocker(element); - this._wheelLocker = new WheelLocker(element); - }, + check(e, callback) { + cancelAnimationFrame(this._scrollFrame); + cancelAnimationFrame(this._checkFrame); - validate: function() { - return true; - }, + const that = this; + const { callBase } = this; + this._checkFrame = requestAnimationFrame(() => { + callBase.call(that, e, callback); - configure: function(data) { - if(data.scrollTarget) { - this._pointerLocker.dispose(); - this._wheelLocker.dispose(); - this._pointerLocker = new PointerLocker(data.scrollTarget); - this._wheelLocker = new WheelLocker(data.scrollTarget); - } + that._locked = false; + }); + }, - this.callBase(data); - }, + dispose() { + this.callBase(); - _init: function(e) { - this._wheelLocker.check(e, function() { - if(isDxMouseWheelEvent(e)) { - this._accept(e); - } - }.bind(this)); + cancelAnimationFrame(this._scrollFrame); + cancelAnimationFrame(this._checkFrame); + }, - this._pointerLocker.check(e, function() { - const skipCheck = this.isNative && isMouseEvent(e); - if(!isDxMouseWheelEvent(e) && !skipCheck) { - this._accept(e); - } - }.bind(this)); + }; + })()); +}()); + +const ScrollEmitter = GestureEmitter.inherit((function () { + const INERTIA_TIMEOUT = 100; + const VELOCITY_CALC_TIMEOUT = 200; + const FRAME_DURATION = Math.round(1000 / 60); + + return { + + ctor(element) { + this.callBase.apply(this, arguments); + this.direction = 'both'; + + this._pointerLocker = new PointerLocker(element); + this._wheelLocker = new WheelLocker(element); + }, + + validate() { + return true; + }, + + configure(data) { + if (data.scrollTarget) { + this._pointerLocker.dispose(); + this._wheelLocker.dispose(); + this._pointerLocker = new PointerLocker(data.scrollTarget); + this._wheelLocker = new WheelLocker(data.scrollTarget); + } + + this.callBase(data); + }, + + _init(e) { + this._wheelLocker.check(e, () => { + if (isDxMouseWheelEvent(e)) { + this._accept(e); + } + }); - this._fireEvent(SCROLL_INIT_EVENT, e); + this._pointerLocker.check(e, () => { + const skipCheck = this.isNative && isMouseEvent(e); + if (!isDxMouseWheelEvent(e) && !skipCheck) { + this._accept(e); + } + }); - this._prevEventData = eventData(e); - }, + this._fireEvent(SCROLL_INIT_EVENT, e); - move: function(e) { - this.callBase.apply(this, arguments); + this._prevEventData = eventData(e); + }, - e.isScrollingEvent = this.isNative || e.isScrollingEvent; - }, + move(e) { + this.callBase.apply(this, arguments); - _start: function(e) { - this._savedEventData = eventData(e); + e.isScrollingEvent = this.isNative || e.isScrollingEvent; + }, - this._fireEvent(SCROLL_START_EVENT, e); + _start(e) { + this._savedEventData = eventData(e); - this._prevEventData = eventData(e); - }, + this._fireEvent(SCROLL_START_EVENT, e); - _move: function(e) { - const currentEventData = eventData(e); + this._prevEventData = eventData(e); + }, - this._fireEvent(SCROLL_MOVE_EVENT, e, { - delta: eventDelta(this._prevEventData, currentEventData) - }); + _move(e) { + const currentEventData: any = eventData(e); - const delta = eventDelta(this._savedEventData, currentEventData); - if(delta.time > VELOCITY_CALC_TIMEOUT) { - this._savedEventData = this._prevEventData; - } + this._fireEvent(SCROLL_MOVE_EVENT, e, { + delta: eventDelta(this._prevEventData, currentEventData), + }); - this._prevEventData = eventData(e); - }, + const delta = eventDelta(this._savedEventData, currentEventData); + if (delta.time > VELOCITY_CALC_TIMEOUT) { + this._savedEventData = this._prevEventData; + } - _end: function(e) { - const endEventDelta = eventDelta(this._prevEventData, eventData(e)); - let velocity = { x: 0, y: 0 }; + this._prevEventData = eventData(e); + }, - if(!isDxMouseWheelEvent(e) && endEventDelta.time < INERTIA_TIMEOUT) { - const delta = eventDelta(this._savedEventData, this._prevEventData); - const velocityMultiplier = FRAME_DURATION / delta.time; + _end(e) { + const endEventDelta = eventDelta(this._prevEventData, eventData(e) as any); + let velocity = { x: 0, y: 0 }; - velocity = { x: delta.x * velocityMultiplier, y: delta.y * velocityMultiplier }; - } + if (!isDxMouseWheelEvent(e) && endEventDelta.time < INERTIA_TIMEOUT) { + const delta = eventDelta(this._savedEventData, this._prevEventData); + const velocityMultiplier = FRAME_DURATION / delta.time; - this._fireEvent(SCROLL_END_EVENT, e, { - velocity: velocity - }); - }, + velocity = { x: delta.x * velocityMultiplier, y: delta.y * velocityMultiplier }; + } - _stop: function(e) { - this._fireEvent(SCROLL_STOP_EVENT, e); - }, + this._fireEvent(SCROLL_END_EVENT, e, { + velocity, + }); + }, - cancel: function(e) { - this.callBase.apply(this, arguments); + _stop(e) { + this._fireEvent(SCROLL_STOP_EVENT, e); + }, - this._fireEvent(SCROLL_CANCEL_EVENT, e); - }, + cancel(e) { + this.callBase.apply(this, arguments); - dispose: function() { - this.callBase.apply(this, arguments); + this._fireEvent(SCROLL_CANCEL_EVENT, e); + }, - this._pointerLocker.dispose(); - this._wheelLocker.dispose(); - }, + dispose() { + this.callBase.apply(this, arguments); - _clearSelection: function() { - if(this.isNative) { - return; - } + this._pointerLocker.dispose(); + this._wheelLocker.dispose(); + }, - return this.callBase.apply(this, arguments); - }, + _clearSelection() { + if (this.isNative) { + return; + } - _toggleGestureCover: function() { - if(this.isNative) { - return; - } + return this.callBase.apply(this, arguments); + }, - return this.callBase.apply(this, arguments); - } + _toggleGestureCover() { + if (this.isNative) { + return; + } - }; + return this.callBase.apply(this, arguments); + }, + }; })()); registerEmitter({ - emitter: ScrollEmitter, - events: [ - SCROLL_INIT_EVENT, - SCROLL_START_EVENT, - SCROLL_MOVE_EVENT, - SCROLL_END_EVENT, - SCROLL_STOP_EVENT, - SCROLL_CANCEL_EVENT - ] + emitter: ScrollEmitter, + events: [ + SCROLL_INIT_EVENT, + SCROLL_START_EVENT, + SCROLL_MOVE_EVENT, + SCROLL_END_EVENT, + SCROLL_STOP_EVENT, + SCROLL_CANCEL_EVENT, + ], }); export default { - init: SCROLL_INIT_EVENT, - start: SCROLL_START_EVENT, - move: SCROLL_MOVE_EVENT, - end: SCROLL_END_EVENT, - stop: SCROLL_STOP_EVENT, - cancel: SCROLL_CANCEL_EVENT, - scroll: SCROLL_EVENT + init: SCROLL_INIT_EVENT, + start: SCROLL_START_EVENT, + move: SCROLL_MOVE_EVENT, + end: SCROLL_END_EVENT, + stop: SCROLL_STOP_EVENT, + cancel: SCROLL_CANCEL_EVENT, + scroll: SCROLL_EVENT, }; diff --git a/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.ts b/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.ts index bbf8c1a2146a..5160915bcd5d 100644 --- a/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.ts +++ b/packages/devextreme/js/__internal/events/gesture/m_emitter.gesture.ts @@ -1,17 +1,20 @@ -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import devices from '../../core/devices'; -import { styleProp } from '../../core/utils/style'; -import callOnce from '../../core/utils/call_once'; -import { resetActiveElement, clearSelection } from '../../core/utils/dom'; -import readyCallbacks from '../../core/utils/ready_callbacks'; +import devices from '@js/core/devices'; +import $ from '@js/core/renderer'; +import callOnce from '@js/core/utils/call_once'; +import { noop } from '@js/core/utils/common'; +import { clearSelection, resetActiveElement } from '@js/core/utils/dom'; +import { sign } from '@js/core/utils/math'; +import readyCallbacks from '@js/core/utils/ready_callbacks'; +import { styleProp } from '@js/core/utils/style'; +import { isDefined } from '@js/core/utils/type'; +import Emitter from '@js/events/core/emitter'; +import eventsEngine from '@js/events/core/events_engine'; +import { + createEvent, eventData, eventDelta, isDxMouseWheelEvent, isTouchEvent, needSkipEvent, +} from '@js/events/utils/index'; + const ready = readyCallbacks.add; -import { sign } from '../../core/utils/math'; -import { noop } from '../../core/utils/common'; -import { isDefined } from '../../core/utils/type'; -import { needSkipEvent, createEvent, eventData, isDxMouseWheelEvent, eventDelta, isTouchEvent } from '../utils/index'; -import Emitter from '../core/emitter'; -const abs = Math.abs; +const { abs } = Math; const SLEEP = 0; const INITED = 1; @@ -21,216 +24,216 @@ let TOUCH_BOUNDARY = 10; const IMMEDIATE_TOUCH_BOUNDARY = 0; const IMMEDIATE_TIMEOUT = 180; -const supportPointerEvents = function() { - return styleProp('pointer-events'); +const supportPointerEvents = function () { + return styleProp('pointer-events'); }; -const setGestureCover = callOnce(function() { - const GESTURE_COVER_CLASS = 'dx-gesture-cover'; +const setGestureCover = callOnce(() => { + const GESTURE_COVER_CLASS = 'dx-gesture-cover'; - const isDesktop = devices.real().deviceType === 'desktop'; + const isDesktop = devices.real().deviceType === 'desktop'; - if(!supportPointerEvents() || !isDesktop) { - return noop; - } + if (!supportPointerEvents() || !isDesktop) { + return noop; + } - const $cover = $('
') - .addClass(GESTURE_COVER_CLASS) - .css('pointerEvents', 'none'); + const $cover = $('
') + .addClass(GESTURE_COVER_CLASS) + .css('pointerEvents', 'none'); - eventsEngine.subscribeGlobal($cover, 'dxmousewheel', function(e) { - e.preventDefault(); - }); + (eventsEngine as any).subscribeGlobal($cover, 'dxmousewheel', (e) => { + e.preventDefault(); + }); - ready(function() { - $cover.appendTo('body'); - }); + ready(() => { + $cover.appendTo('body' as any); + }); - return function(toggle, cursor) { - $cover.css('pointerEvents', toggle ? 'all' : 'none'); - toggle && $cover.css('cursor', cursor); - }; + return function (toggle, cursor) { + $cover.css('pointerEvents', toggle ? 'all' : 'none'); + toggle && $cover.css('cursor', cursor); + }; }); -const gestureCover = function(toggle, cursor) { - const gestureCoverStrategy = setGestureCover(); - gestureCoverStrategy(toggle, cursor); +const gestureCover = function (toggle, cursor) { + const gestureCoverStrategy = setGestureCover(); + gestureCoverStrategy(toggle, cursor); }; const GestureEmitter = Emitter.inherit({ - gesture: true, + gesture: true, - configure: function(data) { - this.getElement().css('msTouchAction', data.immediate ? 'pinch-zoom' : ''); + configure(data) { + this.getElement().css('msTouchAction', data.immediate ? 'pinch-zoom' : ''); - this.callBase(data); - }, + this.callBase(data); + }, - allowInterruptionByMouseWheel: function() { - return this._stage !== STARTED; - }, + allowInterruptionByMouseWheel() { + return this._stage !== STARTED; + }, - getDirection: function() { - return this.direction; - }, + getDirection() { + return this.direction; + }, - _cancel: function() { - this.callBase.apply(this, arguments); + _cancel() { + this.callBase.apply(this, arguments); - this._toggleGestureCover(false); - this._stage = SLEEP; - }, + this._toggleGestureCover(false); + this._stage = SLEEP; + }, - start: function(e) { - if(e._needSkipEvent || needSkipEvent(e)) { - this._cancel(e); - return; - } + start(e) { + if (e._needSkipEvent || needSkipEvent(e)) { + this._cancel(e); + return; + } - this._startEvent = createEvent(e); - this._startEventData = eventData(e); + this._startEvent = createEvent(e); + this._startEventData = eventData(e); - this._stage = INITED; - this._init(e); - - this._setupImmediateTimer(); - }, + this._stage = INITED; + this._init(e); - _setupImmediateTimer: function() { - clearTimeout(this._immediateTimer); - this._immediateAccepted = false; + this._setupImmediateTimer(); + }, - if(!this.immediate) { - return; - } + _setupImmediateTimer() { + clearTimeout(this._immediateTimer); + this._immediateAccepted = false; - if(this.immediateTimeout === 0) { - this._immediateAccepted = true; - return; - } + if (!this.immediate) { + return; + } - this._immediateTimer = setTimeout((function() { - this._immediateAccepted = true; - }).bind(this), this.immediateTimeout ?? IMMEDIATE_TIMEOUT); - }, - - move: function(e) { - if(this._stage === INITED && this._directionConfirmed(e)) { - this._stage = STARTED; - - this._resetActiveElement(); - this._toggleGestureCover(true); - this._clearSelection(e); - - this._adjustStartEvent(e); - this._start(this._startEvent); - - if(this._stage === SLEEP) { - return; - } - - this._requestAccept(e); - this._move(e); - this._forgetAccept(); - } else if(this._stage === STARTED) { - this._clearSelection(e); - this._move(e); - } - }, - - _directionConfirmed: function(e) { - const touchBoundary = this._getTouchBoundary(e); - const delta = eventDelta(this._startEventData, eventData(e)); - const deltaX = abs(delta.x); - const deltaY = abs(delta.y); - - const horizontalMove = this._validateMove(touchBoundary, deltaX, deltaY); - const verticalMove = this._validateMove(touchBoundary, deltaY, deltaX); - - const direction = this.getDirection(e); - const bothAccepted = direction === 'both' && (horizontalMove || verticalMove); - const horizontalAccepted = direction === 'horizontal' && horizontalMove; - const verticalAccepted = direction === 'vertical' && verticalMove; - - return bothAccepted || horizontalAccepted || verticalAccepted || this._immediateAccepted; - }, - - _validateMove: function(touchBoundary, mainAxis, crossAxis) { - return mainAxis && mainAxis >= touchBoundary && (this.immediate ? mainAxis >= crossAxis : true); - }, - - _getTouchBoundary: function(e) { - return (this.immediate || isDxMouseWheelEvent(e)) ? IMMEDIATE_TOUCH_BOUNDARY : TOUCH_BOUNDARY; - }, - - _adjustStartEvent: function(e) { - const touchBoundary = this._getTouchBoundary(e); - const delta = eventDelta(this._startEventData, eventData(e)); - - this._startEvent.pageX += sign(delta.x) * touchBoundary; - this._startEvent.pageY += sign(delta.y) * touchBoundary; - }, - - _resetActiveElement: function() { - if(devices.real().platform === 'ios' && this.getElement().find(':focus').length) { - resetActiveElement(); - } - }, - - _toggleGestureCover: function(toggle) { - this._toggleGestureCoverImpl(toggle); - }, - - _toggleGestureCoverImpl: function(toggle) { - const isStarted = this._stage === STARTED; - - if(isStarted) { - gestureCover(toggle, this.getElement().css('cursor')); - } - }, - - _clearSelection: function(e) { - if(isDxMouseWheelEvent(e) || isTouchEvent(e)) { - return; - } - - clearSelection(); - }, - - end: function(e) { - this._toggleGestureCover(false); - - if(this._stage === STARTED) { - this._end(e); - } else if(this._stage === INITED) { - this._stop(e); - } - - this._stage = SLEEP; - }, - - dispose: function() { - clearTimeout(this._immediateTimer); - this.callBase.apply(this, arguments); - this._toggleGestureCover(false); - }, - - _init: noop, - _start: noop, - _move: noop, - _stop: noop, - _end: noop + if (this.immediateTimeout === 0) { + this._immediateAccepted = true; + return; + } -}); -GestureEmitter.initialTouchBoundary = TOUCH_BOUNDARY; -GestureEmitter.touchBoundary = function(newBoundary) { - if(isDefined(newBoundary)) { - TOUCH_BOUNDARY = newBoundary; + this._immediateTimer = setTimeout(() => { + this._immediateAccepted = true; + }, this.immediateTimeout ?? IMMEDIATE_TIMEOUT); + }, + + move(e) { + if (this._stage === INITED && this._directionConfirmed(e)) { + this._stage = STARTED; + + this._resetActiveElement(); + this._toggleGestureCover(true); + this._clearSelection(e); + + this._adjustStartEvent(e); + this._start(this._startEvent); + + if (this._stage === SLEEP) { return; + } + + this._requestAccept(e); + this._move(e); + this._forgetAccept(); + } else if (this._stage === STARTED) { + this._clearSelection(e); + this._move(e); + } + }, + + _directionConfirmed(e) { + const touchBoundary = this._getTouchBoundary(e); + const delta = eventDelta(this._startEventData, eventData(e) as any); + const deltaX = abs(delta.x); + const deltaY = abs(delta.y); + + const horizontalMove = this._validateMove(touchBoundary, deltaX, deltaY); + const verticalMove = this._validateMove(touchBoundary, deltaY, deltaX); + + const direction = this.getDirection(e); + const bothAccepted = direction === 'both' && (horizontalMove || verticalMove); + const horizontalAccepted = direction === 'horizontal' && horizontalMove; + const verticalAccepted = direction === 'vertical' && verticalMove; + + return bothAccepted || horizontalAccepted || verticalAccepted || this._immediateAccepted; + }, + + _validateMove(touchBoundary, mainAxis, crossAxis) { + return mainAxis && mainAxis >= touchBoundary && (this.immediate ? mainAxis >= crossAxis : true); + }, + + _getTouchBoundary(e) { + return this.immediate || isDxMouseWheelEvent(e) ? IMMEDIATE_TOUCH_BOUNDARY : TOUCH_BOUNDARY; + }, + + _adjustStartEvent(e) { + const touchBoundary = this._getTouchBoundary(e); + const delta = eventDelta(this._startEventData, eventData(e) as any); + + this._startEvent.pageX += sign(delta.x) * touchBoundary; + this._startEvent.pageY += sign(delta.y) * touchBoundary; + }, + + _resetActiveElement() { + if (devices.real().platform === 'ios' && this.getElement().find(':focus').length) { + resetActiveElement(); + } + }, + + _toggleGestureCover(toggle) { + this._toggleGestureCoverImpl(toggle); + }, + + _toggleGestureCoverImpl(toggle) { + const isStarted = this._stage === STARTED; + + if (isStarted) { + gestureCover(toggle, this.getElement().css('cursor')); + } + }, + + _clearSelection(e) { + if (isDxMouseWheelEvent(e) || isTouchEvent(e)) { + return; } - return TOUCH_BOUNDARY; + clearSelection(); + }, + + end(e) { + this._toggleGestureCover(false); + + if (this._stage === STARTED) { + this._end(e); + } else if (this._stage === INITED) { + this._stop(e); + } + + this._stage = SLEEP; + }, + + dispose() { + clearTimeout(this._immediateTimer); + this.callBase.apply(this, arguments); + this._toggleGestureCover(false); + }, + + _init: noop, + _start: noop, + _move: noop, + _stop: noop, + _end: noop, + +}); +(GestureEmitter as any).initialTouchBoundary = TOUCH_BOUNDARY; +(GestureEmitter as any).touchBoundary = function (newBoundary) { + if (isDefined(newBoundary)) { + TOUCH_BOUNDARY = newBoundary; + return; + } + + return TOUCH_BOUNDARY; }; export default GestureEmitter; diff --git a/packages/devextreme/js/__internal/events/gesture/m_swipeable.ts b/packages/devextreme/js/__internal/events/gesture/m_swipeable.ts index 622880a7168f..5238f91aa273 100644 --- a/packages/devextreme/js/__internal/events/gesture/m_swipeable.ts +++ b/packages/devextreme/js/__internal/events/gesture/m_swipeable.ts @@ -1,111 +1,108 @@ +import DOMComponent from '@js/core/dom_component'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import { name } from '@js/core/utils/public_component'; +import eventsEngine from '@js/events/core/events_engine'; import { - start as swipeEventStart, - swipe as swipeEventSwipe, - end as swipeEventEnd -} from '../swipe'; -import eventsEngine from '../../events/core/events_engine'; -import DOMComponent from '../../core/dom_component'; -import { each } from '../../core/utils/iterator'; -import { addNamespace } from '../utils/index'; -import { extend } from '../../core/utils/extend'; -import { name } from '../../core/utils/public_component'; + end as swipeEventEnd, + start as swipeEventStart, + swipe as swipeEventSwipe, +} from '@js/events/swipe'; +import { addNamespace } from '@js/events/utils/index'; const DX_SWIPEABLE = 'dxSwipeable'; const SWIPEABLE_CLASS = 'dx-swipeable'; const ACTION_TO_EVENT_MAP = { - 'onStart': swipeEventStart, - 'onUpdated': swipeEventSwipe, - 'onEnd': swipeEventEnd, - 'onCancel': 'dxswipecancel' + onStart: swipeEventStart, + onUpdated: swipeEventSwipe, + onEnd: swipeEventEnd, + onCancel: 'dxswipecancel', }; const IMMEDIATE_TIMEOUT = 180; -const Swipeable = DOMComponent.inherit({ - - _getDefaultOptions: function() { - return extend(this.callBase(), { - elastic: true, - immediate: false, - immediateTimeout: IMMEDIATE_TIMEOUT, - direction: 'horizontal', - itemSizeFunc: null, - onStart: null, - onUpdated: null, - onEnd: null, - onCancel: null - }); - }, - - _render: function() { - this.callBase(); - - this.$element().addClass(SWIPEABLE_CLASS); - this._attachEventHandlers(); - }, - - _attachEventHandlers: function() { +const Swipeable = (DOMComponent as any).inherit({ + + _getDefaultOptions() { + return extend(this.callBase(), { + elastic: true, + immediate: false, + immediateTimeout: IMMEDIATE_TIMEOUT, + direction: 'horizontal', + itemSizeFunc: null, + onStart: null, + onUpdated: null, + onEnd: null, + onCancel: null, + }); + }, + + _render() { + this.callBase(); + + this.$element().addClass(SWIPEABLE_CLASS); + this._attachEventHandlers(); + }, + + _attachEventHandlers() { + this._detachEventHandlers(); + + if (this.option('disabled')) { + return; + } + + const { NAME } = this; + + this._createEventData(); + + each(ACTION_TO_EVENT_MAP, (actionName, eventName) => { + const action = this._createActionByOption(actionName, { context: this }); + + eventName = addNamespace(eventName, NAME); + + eventsEngine.on(this.$element(), eventName, this._eventData, (e) => action({ event: e })); + }); + }, + + _createEventData() { + this._eventData = { + elastic: this.option('elastic'), + itemSizeFunc: this.option('itemSizeFunc'), + direction: this.option('direction'), + immediate: this.option('immediate'), + immediateTimeout: this.option('immediateTimeout'), + }; + }, + + _detachEventHandlers() { + eventsEngine.off(this.$element(), `.${DX_SWIPEABLE}`); + }, + + _optionChanged(args) { + switch (args.name) { + case 'disabled': + case 'onStart': + case 'onUpdated': + case 'onEnd': + case 'onCancel': + case 'elastic': + case 'immediate': + case 'itemSizeFunc': + case 'direction': this._detachEventHandlers(); - - if(this.option('disabled')) { - return; - } - - const NAME = this.NAME; - - this._createEventData(); - - each(ACTION_TO_EVENT_MAP, (function(actionName, eventName) { - const action = this._createActionByOption(actionName, { context: this }); - - eventName = addNamespace(eventName, NAME); - - eventsEngine.on(this.$element(), eventName, this._eventData, function(e) { - return action({ event: e }); - }); - }).bind(this)); - }, - - _createEventData: function() { - this._eventData = { - elastic: this.option('elastic'), - itemSizeFunc: this.option('itemSizeFunc'), - direction: this.option('direction'), - immediate: this.option('immediate'), - immediateTimeout: this.option('immediateTimeout'), - }; - }, - - _detachEventHandlers: function() { - eventsEngine.off(this.$element(), '.' + DX_SWIPEABLE); - }, - - _optionChanged: function(args) { - switch(args.name) { - case 'disabled': - case 'onStart': - case 'onUpdated': - case 'onEnd': - case 'onCancel': - case 'elastic': - case 'immediate': - case 'itemSizeFunc': - case 'direction': - this._detachEventHandlers(); - this._attachEventHandlers(); - break; - case 'rtlEnabled': - break; - default: - this.callBase(args); - } - - }, - - _useTemplates: function() { - return false; - }, + this._attachEventHandlers(); + break; + case 'rtlEnabled': + break; + default: + this.callBase(args); + } + }, + + _useTemplates() { + return false; + }, }); name(Swipeable, DX_SWIPEABLE); diff --git a/packages/devextreme/js/__internal/events/m_click.ts b/packages/devextreme/js/__internal/events/m_click.ts index 155d2e4abbe8..adbe5737fb8c 100644 --- a/packages/devextreme/js/__internal/events/m_click.ts +++ b/packages/devextreme/js/__internal/events/m_click.ts @@ -1,128 +1,122 @@ -import $ from '../core/renderer'; -import eventsEngine from '../events/core/events_engine'; -import devices from '../core/devices'; -import domAdapter from '../core/dom_adapter'; -import { resetActiveElement } from '../core/utils/dom'; -import { requestAnimationFrame, cancelAnimationFrame } from '../animation/frame'; -import { addNamespace, fireEvent } from './utils/index'; -import { subscribeNodesDisposing, unsubscribeNodesDisposing } from './utils/event_nodes_disposing'; -import { getEventTarget } from './utils/event_target'; -import pointerEvents from './pointer'; -import Emitter from './core/emitter'; -import registerEmitter from './core/emitter_registrator'; +import { cancelAnimationFrame, requestAnimationFrame } from '@js/animation/frame'; +import devices from '@js/core/devices'; +import domAdapter from '@js/core/dom_adapter'; +import $ from '@js/core/renderer'; +import { resetActiveElement } from '@js/core/utils/dom'; +import Emitter from '@js/events/core/emitter'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import pointerEvents from '@js/events/pointer'; +import { subscribeNodesDisposing, unsubscribeNodesDisposing } from '@js/events/utils/event_nodes_disposing'; +import { getEventTarget } from '@js/events/utils/event_target'; +import { addNamespace, fireEvent } from '@js/events/utils/index'; const CLICK_EVENT_NAME = 'dxclick'; const misc = { requestAnimationFrame, cancelAnimationFrame }; -let prevented = null; +let prevented: boolean | null = null; let lastFiredEvent = null; const onNodeRemove = () => { - lastFiredEvent = null; + lastFiredEvent = null; }; -const clickHandler = function(e) { - const originalEvent = e.originalEvent; - const eventAlreadyFired = lastFiredEvent === originalEvent || originalEvent && originalEvent.DXCLICK_FIRED; - const leftButton = !e.which || e.which === 1; +const clickHandler = function (e) { + const { originalEvent } = e; + const eventAlreadyFired = lastFiredEvent === originalEvent || originalEvent && originalEvent.DXCLICK_FIRED; + const leftButton = !e.which || e.which === 1; - if(leftButton && !prevented && !eventAlreadyFired) { - if(originalEvent) { - originalEvent.DXCLICK_FIRED = true; - } + if (leftButton && !prevented && !eventAlreadyFired) { + if (originalEvent) { + originalEvent.DXCLICK_FIRED = true; + } - unsubscribeNodesDisposing(lastFiredEvent, onNodeRemove); - lastFiredEvent = originalEvent; - subscribeNodesDisposing(lastFiredEvent, onNodeRemove); + unsubscribeNodesDisposing(lastFiredEvent, onNodeRemove); + lastFiredEvent = originalEvent; + subscribeNodesDisposing(lastFiredEvent, onNodeRemove); - fireEvent({ - type: CLICK_EVENT_NAME, - originalEvent: e - }); - } + fireEvent({ + type: CLICK_EVENT_NAME, + originalEvent: e, + }); + } }; const ClickEmitter = Emitter.inherit({ - ctor: function(element) { - this.callBase(element); - eventsEngine.on(this.getElement(), 'click', clickHandler); - }, + ctor(element) { + this.callBase(element); + eventsEngine.on(this.getElement(), 'click', clickHandler); + }, - start: function(e) { - prevented = null; - }, + start() { + prevented = null; + }, - cancel: function() { - prevented = true; - }, + cancel() { + prevented = true; + }, - dispose: function() { - eventsEngine.off(this.getElement(), 'click', clickHandler); - } + dispose() { + eventsEngine.off(this.getElement(), 'click', clickHandler); + }, }); - // NOTE: fixes native click blur on slow devices -(function() { - const desktopDevice = devices.real().generic; - - if(!desktopDevice) { - let startTarget = null; - let blurPrevented = false; - - const isInput = function(element) { - return $(element).is('input, textarea, select, button ,:focus, :focus *'); - }; - - const pointerDownHandler = function(e) { - startTarget = e.target; - blurPrevented = e.isDefaultPrevented(); - }; - - const getTarget = function(e) { - const target = getEventTarget(e); - return $(target); - }; - - const clickHandler = function(e) { - const $target = getTarget(e); - - if(!blurPrevented && startTarget && !$target.is(startTarget) && !$(startTarget).is('label') && isInput($target)) { - resetActiveElement(); - } - - startTarget = null; - blurPrevented = false; - }; - - const NATIVE_CLICK_FIXER_NAMESPACE = 'NATIVE_CLICK_FIXER'; - const document = domAdapter.getDocument(); - eventsEngine.subscribeGlobal(document, addNamespace(pointerEvents.down, NATIVE_CLICK_FIXER_NAMESPACE), pointerDownHandler); - eventsEngine.subscribeGlobal(document, addNamespace('click', NATIVE_CLICK_FIXER_NAMESPACE), clickHandler); - } -})(); - +(function () { + const desktopDevice = devices.real().generic; + + if (!desktopDevice) { + let startTarget = null; + let blurPrevented = false; + + const isInput = function (element) { + return $(element).is('input, textarea, select, button ,:focus, :focus *'); + }; + + const pointerDownHandler = function (e) { + startTarget = e.target; + blurPrevented = e.isDefaultPrevented(); + }; + + const getTarget = function (e) { + const target = getEventTarget(e); + return $(target); + }; + + const clickHandler = function (e) { + const $target = getTarget(e); + + if (!blurPrevented && startTarget && !$target.is(startTarget) && !$(startTarget).is('label') && isInput($target)) { + resetActiveElement(); + } + + startTarget = null; + blurPrevented = false; + }; + + const NATIVE_CLICK_FIXER_NAMESPACE = 'NATIVE_CLICK_FIXER'; + const document = domAdapter.getDocument(); + // @ts-expect-error + eventsEngine.subscribeGlobal(document, addNamespace(pointerEvents.down, NATIVE_CLICK_FIXER_NAMESPACE), pointerDownHandler); + // @ts-expect-error + eventsEngine.subscribeGlobal(document, addNamespace('click', NATIVE_CLICK_FIXER_NAMESPACE), clickHandler); + } +}()); -/** - * @name UI Events.dxclick - * @type eventType - * @type_function_param1 event:event - * @module events/click -*/ registerEmitter({ - emitter: ClickEmitter, - bubble: true, - events: [ - CLICK_EVENT_NAME - ] + emitter: ClickEmitter, + bubble: true, + events: [ + CLICK_EVENT_NAME, + ], }); export { CLICK_EVENT_NAME as name }; -///#DEBUG +/// #DEBUG export { - misc + misc, }; -///#ENDDEBUG +/// #ENDDEBUG diff --git a/packages/devextreme/js/__internal/events/m_contextmenu.ts b/packages/devextreme/js/__internal/events/m_contextmenu.ts index 88dd9290add1..958534cfd4d8 100644 --- a/packages/devextreme/js/__internal/events/m_contextmenu.ts +++ b/packages/devextreme/js/__internal/events/m_contextmenu.ts @@ -1,11 +1,11 @@ -import $ from '../core/renderer'; -import eventsEngine from '../events/core/events_engine'; -import { touch } from '../core/utils/support'; -import devices from '../core/devices'; -import Class from '../core/class'; -import registerEvent from './core/event_registrator'; -import { addNamespace, fireEvent, isMouseEvent } from './utils/index'; -import holdEvent from './hold'; +import Class from '@js/core/class'; +import devices from '@js/core/devices'; +import $ from '@js/core/renderer'; +import { touch } from '@js/core/utils/support'; +import registerEvent from '@js/events/core/event_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import holdEvent from '@js/events/hold'; +import { addNamespace, fireEvent, isMouseEvent } from '@js/events/utils/index'; const CONTEXTMENU_NAMESPACE = 'dxContexMenu'; @@ -14,51 +14,43 @@ const HOLD_NAMESPACED_EVENT_NAME = addNamespace(holdEvent.name, CONTEXTMENU_NAME const CONTEXTMENU_EVENT_NAME = 'dxcontextmenu'; - const ContextMenu = Class.inherit({ - setup: function(element) { - const $element = $(element); + setup(element) { + const $element = $(element); - eventsEngine.on($element, CONTEXTMENU_NAMESPACED_EVENT_NAME, this._contextMenuHandler.bind(this)); + eventsEngine.on($element, CONTEXTMENU_NAMESPACED_EVENT_NAME, this._contextMenuHandler.bind(this)); - if(touch || devices.isSimulator()) { - eventsEngine.on($element, HOLD_NAMESPACED_EVENT_NAME, this._holdHandler.bind(this)); - } - }, + if (touch || devices.isSimulator()) { + eventsEngine.on($element, HOLD_NAMESPACED_EVENT_NAME, this._holdHandler.bind(this)); + } + }, - _holdHandler: function(e) { - if(isMouseEvent(e) && !devices.isSimulator()) { - return; - } + _holdHandler(e) { + if (isMouseEvent(e) && !devices.isSimulator()) { + return; + } - this._fireContextMenu(e); - }, + this._fireContextMenu(e); + }, - _contextMenuHandler: function(e) { - this._fireContextMenu(e); - }, + _contextMenuHandler(e) { + this._fireContextMenu(e); + }, - _fireContextMenu: function(e) { - return fireEvent({ - type: CONTEXTMENU_EVENT_NAME, - originalEvent: e - }); - }, + _fireContextMenu(e) { + return fireEvent({ + type: CONTEXTMENU_EVENT_NAME, + originalEvent: e, + }); + }, - teardown: function(element) { - eventsEngine.off(element, '.' + CONTEXTMENU_NAMESPACE); - } + teardown(element) { + eventsEngine.off(element, `.${CONTEXTMENU_NAMESPACE}`); + }, }); -/** - * @name UI Events.dxcontextmenu - * @type eventType - * @type_function_param1 event:event - * @module events/contextmenu -*/ - registerEvent(CONTEXTMENU_EVENT_NAME, new ContextMenu()); export const name = CONTEXTMENU_EVENT_NAME; diff --git a/packages/devextreme/js/__internal/events/dblclick.ts b/packages/devextreme/js/__internal/events/m_dblclick.ts similarity index 100% rename from packages/devextreme/js/__internal/events/dblclick.ts rename to packages/devextreme/js/__internal/events/m_dblclick.ts diff --git a/packages/devextreme/js/__internal/events/m_drag.ts b/packages/devextreme/js/__internal/events/m_drag.ts index ceed272dd460..952dd4b7f624 100644 --- a/packages/devextreme/js/__internal/events/m_drag.ts +++ b/packages/devextreme/js/__internal/events/m_drag.ts @@ -1,13 +1,12 @@ -import $ from '../core/renderer'; -import { data as elementData, removeData } from '../core/element_data'; -import { wrapToArray } from '../core/utils/array'; -import * as iteratorUtils from '../core/utils/iterator'; -import { contains } from '../core/utils/dom'; -import registerEvent from './core/event_registrator'; -import { eventData as eData, fireEvent } from './utils/index'; -import GestureEmitter from './gesture/emitter.gesture'; -import registerEmitter from './core/emitter_registrator'; - +import { data as elementData, removeData } from '@js/core/element_data'; +import $ from '@js/core/renderer'; +import { wrapToArray } from '@js/core/utils/array'; +import { contains } from '@js/core/utils/dom'; +import * as iteratorUtils from '@js/core/utils/iterator'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import registerEvent from '@js/events/core/event_registrator'; +import GestureEmitter from '@js/events/gesture/emitter.gesture'; +import { eventData as eData, fireEvent } from '@js/events/utils/index'; const DRAG_START_EVENT = 'dxdragstart'; const DRAG_EVENT = 'dxdrag'; @@ -19,343 +18,294 @@ const DROP_EVENT = 'dxdrop'; const DX_DRAG_EVENTS_COUNT_KEY = 'dxDragEventsCount'; - -const knownDropTargets = []; -const knownDropTargetSelectors = []; -const knownDropTargetConfigs = []; +const knownDropTargets: Element[] = []; +const knownDropTargetSelectors: any[] = []; +const knownDropTargetConfigs: any[] = []; const dropTargetRegistration = { - setup: function(element, data) { - const knownDropTarget = knownDropTargets.includes(element); - if(!knownDropTarget) { - knownDropTargets.push(element); - knownDropTargetSelectors.push([]); - knownDropTargetConfigs.push(data || {}); - } - }, + setup(element, data) { + const knownDropTarget = knownDropTargets.includes(element); + if (!knownDropTarget) { + knownDropTargets.push(element); + knownDropTargetSelectors.push([]); + knownDropTargetConfigs.push(data || {}); + } + }, - add: function(element, handleObj) { - const index = knownDropTargets.indexOf(element); - this.updateEventsCounter(element, handleObj.type, 1); + add(element, handleObj) { + const index = knownDropTargets.indexOf(element); + this.updateEventsCounter(element, handleObj.type, 1); - const selector = handleObj.selector; - if(!knownDropTargetSelectors[index].includes(selector)) { - knownDropTargetSelectors[index].push(selector); - } - }, + const { selector } = handleObj; + if (!knownDropTargetSelectors[index].includes(selector)) { + knownDropTargetSelectors[index].push(selector); + } + }, - updateEventsCounter: function(element, event, value) { - if([DRAG_ENTER_EVENT, DRAG_LEAVE_EVENT, DROP_EVENT].indexOf(event) > -1) { - const eventsCount = elementData(element, DX_DRAG_EVENTS_COUNT_KEY) || 0; - elementData(element, DX_DRAG_EVENTS_COUNT_KEY, Math.max(0, eventsCount + value)); - } - }, - - remove: function(element, handleObj) { - this.updateEventsCounter(element, handleObj.type, -1); - }, - - teardown: function(element) { - const handlersCount = elementData(element, DX_DRAG_EVENTS_COUNT_KEY); - if(!handlersCount) { - const index = knownDropTargets.indexOf(element); - knownDropTargets.splice(index, 1); - knownDropTargetSelectors.splice(index, 1); - knownDropTargetConfigs.splice(index, 1); - removeData(element, DX_DRAG_EVENTS_COUNT_KEY); - } + updateEventsCounter(element, event, value) { + if ([DRAG_ENTER_EVENT, DRAG_LEAVE_EVENT, DROP_EVENT].includes(event)) { + const eventsCount = elementData(element, DX_DRAG_EVENTS_COUNT_KEY) || 0; + elementData(element, DX_DRAG_EVENTS_COUNT_KEY, Math.max(0, eventsCount + value)); } + }, + + remove(element, handleObj) { + this.updateEventsCounter(element, handleObj.type, -1); + }, + + teardown(element) { + const handlersCount = elementData(element, DX_DRAG_EVENTS_COUNT_KEY); + if (!handlersCount) { + const index = knownDropTargets.indexOf(element); + knownDropTargets.splice(index, 1); + knownDropTargetSelectors.splice(index, 1); + knownDropTargetConfigs.splice(index, 1); + removeData(element, DX_DRAG_EVENTS_COUNT_KEY); + } + }, }; -/** -* @name UI Events.dxdragenter -* @type eventType -* @type_function_param1 event:event -* @type_function_param1_field1 draggingElement:Element -* @module events/drag -*/ -/** -* @name UI Events.dxdrop -* @type eventType -* @type_function_param1 event:event -* @type_function_param1_field1 draggingElement:Element -* @module events/drag -*/ -/** -* @name UI Events.dxdragleave -* @type eventType -* @type_function_param1 event:event -* @type_function_param1_field1 draggingElement:Element -* @module events/drag -*/ - registerEvent(DRAG_ENTER_EVENT, dropTargetRegistration); registerEvent(DRAG_LEAVE_EVENT, dropTargetRegistration); registerEvent(DROP_EVENT, dropTargetRegistration); -const getItemDelegatedTargets = function($element) { - const dropTargetIndex = knownDropTargets.indexOf($element.get(0)); - const dropTargetSelectors = knownDropTargetSelectors[dropTargetIndex].filter((selector) => selector); +const getItemDelegatedTargets = function ($element) { + const dropTargetIndex = knownDropTargets.indexOf($element.get(0)); + const dropTargetSelectors = knownDropTargetSelectors[dropTargetIndex].filter((selector) => selector); - let $delegatedTargets = $element.find(dropTargetSelectors.join(', ')); - if(knownDropTargetSelectors[dropTargetIndex].includes(undefined)) { - $delegatedTargets = $delegatedTargets.add($element); - } - return $delegatedTargets; + let $delegatedTargets = $element.find(dropTargetSelectors.join(', ')); + if (knownDropTargetSelectors[dropTargetIndex].includes(undefined)) { + $delegatedTargets = $delegatedTargets.add($element); + } + return $delegatedTargets; }; -const getItemConfig = function($element) { - const dropTargetIndex = knownDropTargets.indexOf($element.get(0)); - return knownDropTargetConfigs[dropTargetIndex]; +const getItemConfig = function ($element) { + const dropTargetIndex = knownDropTargets.indexOf($element.get(0)); + return knownDropTargetConfigs[dropTargetIndex]; }; -const getItemPosition = function(dropTargetConfig, $element) { - if(dropTargetConfig.itemPositionFunc) { - return dropTargetConfig.itemPositionFunc($element); - } else { - return $element.offset(); - } +const getItemPosition = function (dropTargetConfig, $element) { + if (dropTargetConfig.itemPositionFunc) { + return dropTargetConfig.itemPositionFunc($element); + } + return $element.offset(); }; -const getItemSize = function(dropTargetConfig, $element) { - if(dropTargetConfig.itemSizeFunc) { - return dropTargetConfig.itemSizeFunc($element); - } +const getItemSize = function (dropTargetConfig, $element) { + if (dropTargetConfig.itemSizeFunc) { + return dropTargetConfig.itemSizeFunc($element); + } - return { - width: $element.get(0).getBoundingClientRect().width, - height: $element.get(0).getBoundingClientRect().height - }; + return { + width: $element.get(0).getBoundingClientRect().width, + height: $element.get(0).getBoundingClientRect().height, + }; }; const DragEmitter = GestureEmitter.inherit({ - ctor: function(element) { - this.callBase(element); + ctor(element) { + this.callBase(element); - this.direction = 'both'; - }, + this.direction = 'both'; + }, - _init: function(e) { - this._initEvent = e; - }, + _init(e) { + this._initEvent = e; + }, - _start: function(e) { - e = this._fireEvent(DRAG_START_EVENT, this._initEvent); + _start(e) { + e = this._fireEvent(DRAG_START_EVENT, this._initEvent); - this._maxLeftOffset = e.maxLeftOffset; - this._maxRightOffset = e.maxRightOffset; - this._maxTopOffset = e.maxTopOffset; - this._maxBottomOffset = e.maxBottomOffset; + this._maxLeftOffset = e.maxLeftOffset; + this._maxRightOffset = e.maxRightOffset; + this._maxTopOffset = e.maxTopOffset; + this._maxBottomOffset = e.maxBottomOffset; - if(e.targetElements || e.targetElements === null) { - const dropTargets = wrapToArray(e.targetElements || []); - this._dropTargets = iteratorUtils.map(dropTargets, function(element) { return $(element).get(0); }); - } else { - this._dropTargets = knownDropTargets; - } - }, + if (e.targetElements || e.targetElements === null) { + const dropTargets = wrapToArray(e.targetElements || []); + this._dropTargets = iteratorUtils.map(dropTargets, (element) => $(element).get(0)); + } else { + this._dropTargets = knownDropTargets; + } + }, - _move: function(e) { - const eventData = eData(e); - const dragOffset = this._calculateOffset(eventData); + _move(e) { + const eventData = eData(e); + const dragOffset = this._calculateOffset(eventData); - e = this._fireEvent(DRAG_EVENT, e, { - offset: dragOffset - }); + e = this._fireEvent(DRAG_EVENT, e, { + offset: dragOffset, + }); - this._processDropTargets(e); + this._processDropTargets(e); - if(!e._cancelPreventDefault) { - e.preventDefault(); - } - }, + if (!e._cancelPreventDefault) { + e.preventDefault(); + } + }, - _calculateOffset: function(eventData) { - return { - x: this._calculateXOffset(eventData), - y: this._calculateYOffset(eventData) - }; - }, + _calculateOffset(eventData) { + return { + x: this._calculateXOffset(eventData), + y: this._calculateYOffset(eventData), + }; + }, - _calculateXOffset: function(eventData) { - if(this.direction !== 'vertical') { - const offset = eventData.x - this._startEventData.x; + _calculateXOffset(eventData) { + if (this.direction !== 'vertical') { + const offset = eventData.x - this._startEventData.x; - return this._fitOffset(offset, this._maxLeftOffset, this._maxRightOffset); - } - return 0; - }, + return this._fitOffset(offset, this._maxLeftOffset, this._maxRightOffset); + } + return 0; + }, - _calculateYOffset: function(eventData) { - if(this.direction !== 'horizontal') { - const offset = eventData.y - this._startEventData.y; + _calculateYOffset(eventData) { + if (this.direction !== 'horizontal') { + const offset = eventData.y - this._startEventData.y; - return this._fitOffset(offset, this._maxTopOffset, this._maxBottomOffset); - } - return 0; - }, + return this._fitOffset(offset, this._maxTopOffset, this._maxBottomOffset); + } + return 0; + }, - _fitOffset: function(offset, minOffset, maxOffset) { - if(minOffset != null) { - offset = Math.max(offset, -minOffset); - } - if(maxOffset != null) { - offset = Math.min(offset, maxOffset); - } + _fitOffset(offset, minOffset, maxOffset) { + if (minOffset != null) { + offset = Math.max(offset, -minOffset); + } + if (maxOffset != null) { + offset = Math.min(offset, maxOffset); + } - return offset; - }, + return offset; + }, - _processDropTargets: function(e) { - const target = this._findDropTarget(e); - const sameTarget = target === this._currentDropTarget; + _processDropTargets(e) { + const target = this._findDropTarget(e); + const sameTarget = target === this._currentDropTarget; - if(!sameTarget) { - this._fireDropTargetEvent(e, DRAG_LEAVE_EVENT); - this._currentDropTarget = target; - this._fireDropTargetEvent(e, DRAG_ENTER_EVENT); - } - }, + if (!sameTarget) { + this._fireDropTargetEvent(e, DRAG_LEAVE_EVENT); + this._currentDropTarget = target; + this._fireDropTargetEvent(e, DRAG_ENTER_EVENT); + } + }, - _fireDropTargetEvent: function(event, eventName) { - if(!this._currentDropTarget) { - return; - } + _fireDropTargetEvent(event, eventName) { + if (!this._currentDropTarget) { + return; + } - const eventData = { - type: eventName, - originalEvent: event, - draggingElement: this._$element.get(0), - target: this._currentDropTarget - }; - - fireEvent(eventData); - }, - - _findDropTarget: function(e) { - const that = this; - let result; - - iteratorUtils.each(knownDropTargets, function(_, target) { - if(!that._checkDropTargetActive(target)) { - return; - } - - const $target = $(target); - iteratorUtils.each(getItemDelegatedTargets($target), function(_, delegatedTarget) { - const $delegatedTarget = $(delegatedTarget); - if(that._checkDropTarget(getItemConfig($target), $delegatedTarget, $(result), e)) { - result = delegatedTarget; - } - }); - }); - - return result; - }, - - _checkDropTargetActive: function(target) { - let active = false; - - iteratorUtils.each(this._dropTargets, function(_, activeTarget) { - active = active || activeTarget === target || contains(activeTarget, target); - return !active; - }); - - return active; - }, - - _checkDropTarget: function(config, $target, $prevTarget, e) { - const isDraggingElement = $target.get(0) === $(e.target).get(0); - if(isDraggingElement) { - return false; - } + const eventData = { + type: eventName, + originalEvent: event, + draggingElement: this._$element.get(0), + target: this._currentDropTarget, + }; - const targetPosition = getItemPosition(config, $target); - if(e.pageX < targetPosition.left) { - return false; - } - if(e.pageY < targetPosition.top) { - return false; - } + fireEvent(eventData); + }, - const targetSize = getItemSize(config, $target); - if(e.pageX > targetPosition.left + targetSize.width) { - return false; - } - if(e.pageY > targetPosition.top + targetSize.height) { - return false; - } + _findDropTarget(e) { + const that = this; + let result; - if($prevTarget.length && $prevTarget.closest($target).length) { - return false; - } + iteratorUtils.each(knownDropTargets, (_, target) => { + if (!that._checkDropTargetActive(target)) { + return; + } - if(config.checkDropTarget && !config.checkDropTarget($target, e)) { - return false; + const $target = $(target); + iteratorUtils.each(getItemDelegatedTargets($target), (_, delegatedTarget) => { + const $delegatedTarget = $(delegatedTarget); + if (that._checkDropTarget(getItemConfig($target), $delegatedTarget, $(result), e)) { + result = delegatedTarget; } + }); + }); - return $target; - }, + return result; + }, - _end: function(e) { - const eventData = eData(e); + _checkDropTargetActive(target) { + let active = false; - this._fireEvent(DRAG_END_EVENT, e, { - offset: this._calculateOffset(eventData) - }); + iteratorUtils.each(this._dropTargets, (_, activeTarget) => { + active = active || activeTarget === target || contains(activeTarget, target); + return !active; + }); - this._fireDropTargetEvent(e, DROP_EVENT); - delete this._currentDropTarget; + return active; + }, + + _checkDropTarget(config, $target, $prevTarget, e) { + const isDraggingElement = $target.get(0) === $(e.target).get(0); + if (isDraggingElement) { + return false; } -}); + const targetPosition = getItemPosition(config, $target); + if (e.pageX < targetPosition.left) { + return false; + } + if (e.pageY < targetPosition.top) { + return false; + } -/** - * @name UI Events.dxdragstart - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 cancel:boolean - * @module events/drag -*/ -/** - * @name UI Events.dxdrag - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 offset:number - * @type_function_param1_field2 cancel:boolean - * @module events/drag -*/ -/** - * @name UI Events.dxdragend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 offset:number - * @type_function_param1_field2 cancel:boolean - * @module events/drag -*/ + const targetSize = getItemSize(config, $target); + if (e.pageX > targetPosition.left + targetSize.width) { + return false; + } + if (e.pageY > targetPosition.top + targetSize.height) { + return false; + } + + if ($prevTarget.length && $prevTarget.closest($target).length) { + return false; + } + + if (config.checkDropTarget && !config.checkDropTarget($target, e)) { + return false; + } + + return $target; + }, + + _end(e) { + const eventData = eData(e); + + this._fireEvent(DRAG_END_EVENT, e, { + offset: this._calculateOffset(eventData), + }); + + this._fireDropTargetEvent(e, DROP_EVENT); + delete this._currentDropTarget; + }, -registerEmitter({ - emitter: DragEmitter, - events: [ - DRAG_START_EVENT, - DRAG_EVENT, - DRAG_END_EVENT - ] }); +registerEmitter({ + emitter: DragEmitter, + events: [ + DRAG_START_EVENT, + DRAG_EVENT, + DRAG_END_EVENT, + ], +}); -///#DEBUG +/// #DEBUG export { knownDropTargets as dropTargets }; -///#ENDDEBUG +/// #ENDDEBUG export { - DRAG_EVENT as move, - DRAG_START_EVENT as start, - DRAG_END_EVENT as end, - DRAG_ENTER_EVENT as enter, - DRAG_LEAVE_EVENT as leave, - DROP_EVENT as drop + DROP_EVENT as drop, + DRAG_END_EVENT as end, + DRAG_ENTER_EVENT as enter, + DRAG_LEAVE_EVENT as leave, + DRAG_EVENT as move, + DRAG_START_EVENT as start, }; diff --git a/packages/devextreme/js/__internal/events/m_hold.ts b/packages/devextreme/js/__internal/events/m_hold.ts index 2459cb62976b..47d4691b4feb 100644 --- a/packages/devextreme/js/__internal/events/m_hold.ts +++ b/packages/devextreme/js/__internal/events/m_hold.ts @@ -1,77 +1,70 @@ -import { eventData, eventDelta } from './utils/index'; -import Emitter from './core/emitter'; -import registerEmitter from './core/emitter_registrator'; -const abs = Math.abs; +import Emitter from '@js/events/core/emitter'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import { eventData, eventDelta } from '@js/events/utils/index'; + +const { abs } = Math; const HOLD_EVENT_NAME = 'dxhold'; const HOLD_TIMEOUT = 750; const TOUCH_BOUNDARY = 5; - const HoldEmitter = Emitter.inherit({ - start: function(e) { - this._startEventData = eventData(e); - - this._startTimer(e); - }, - - _startTimer: function(e) { - const holdTimeout = ('timeout' in this) ? this.timeout : HOLD_TIMEOUT; - this._holdTimer = setTimeout((function() { - this._requestAccept(e); - this._fireEvent(HOLD_EVENT_NAME, e, { - target: e.target - }); - this._forgetAccept(); - }).bind(this), holdTimeout); - }, - - move: function(e) { - if(this._touchWasMoved(e)) { - this._cancel(e); - } - }, - - _touchWasMoved: function(e) { - const delta = eventDelta(this._startEventData, eventData(e)); - - return abs(delta.x) > TOUCH_BOUNDARY || abs(delta.y) > TOUCH_BOUNDARY; - }, - - end: function() { - this._stopTimer(); - }, - - _stopTimer: function() { - clearTimeout(this._holdTimer); - }, - - cancel: function() { - this._stopTimer(); - }, - - dispose: function() { - this._stopTimer(); + start(e) { + this._startEventData = eventData(e); + + this._startTimer(e); + }, + + _startTimer(e) { + const holdTimeout = 'timeout' in this ? this.timeout : HOLD_TIMEOUT; + this._holdTimer = setTimeout(() => { + this._requestAccept(e); + this._fireEvent(HOLD_EVENT_NAME, e, { + target: e.target, + }); + this._forgetAccept(); + }, holdTimeout); + }, + + move(e) { + if (this._touchWasMoved(e)) { + this._cancel(e); } + }, -}); + _touchWasMoved(e) { + const delta = eventDelta(this._startEventData, eventData(e) as any); + + return abs(delta.x) > TOUCH_BOUNDARY || abs(delta.y) > TOUCH_BOUNDARY; + }, + + end() { + this._stopTimer(); + }, -/** - * @name UI Events.dxhold - * @type eventType - * @type_function_param1 event:event - * @module events/hold -*/ + _stopTimer() { + clearTimeout(this._holdTimer); + }, + + cancel() { + this._stopTimer(); + }, + + dispose() { + this._stopTimer(); + }, + +}); registerEmitter({ - emitter: HoldEmitter, - bubble: true, - events: [ - HOLD_EVENT_NAME - ] + emitter: HoldEmitter, + bubble: true, + events: [ + HOLD_EVENT_NAME, + ], }); export default { - name: HOLD_EVENT_NAME + name: HOLD_EVENT_NAME, }; diff --git a/packages/devextreme/js/__internal/events/m_hover.ts b/packages/devextreme/js/__internal/events/m_hover.ts index b75977591040..d28353334c2b 100644 --- a/packages/devextreme/js/__internal/events/m_hover.ts +++ b/packages/devextreme/js/__internal/events/m_hover.ts @@ -1,10 +1,10 @@ -import eventsEngine from '../events/core/events_engine'; -import { removeData, data as elementData } from '../core/element_data'; -import Class from '../core/class'; -import devices from '../core/devices'; -import registerEvent from './core/event_registrator'; -import { addNamespace, isTouchEvent, fireEvent } from './utils/index'; -import pointerEvents from './pointer'; +import Class from '@js/core/class'; +import devices from '@js/core/devices'; +import { data as elementData, removeData } from '@js/core/element_data'; +import registerEvent from '@js/events/core/event_registrator'; +import eventsEngine from '@js/events/core/events_engine'; +import pointerEvents from '@js/events/pointer'; +import { addNamespace, fireEvent, isTouchEvent } from '@js/events/utils/index'; const HOVERSTART_NAMESPACE = 'dxHoverStart'; const HOVERSTART = 'dxhoverstart'; @@ -14,100 +14,85 @@ const HOVEREND_NAMESPACE = 'dxHoverEnd'; const HOVEREND = 'dxhoverend'; const POINTERLEAVE_NAMESPACED_EVENT_NAME = addNamespace(pointerEvents.leave, HOVEREND_NAMESPACE); - const Hover = Class.inherit({ - noBubble: true, - - ctor: function() { - this._handlerArrayKeyPath = this._eventNamespace + '_HandlerStore'; - }, + noBubble: true, - setup: function(element) { - elementData(element, this._handlerArrayKeyPath, {}); - }, + ctor() { + this._handlerArrayKeyPath = `${this._eventNamespace}_HandlerStore`; + }, - add: function(element, handleObj) { - const that = this; - const handler = function(e) { - that._handler(e); - }; + setup(element) { + elementData(element, this._handlerArrayKeyPath, {}); + }, - eventsEngine.on(element, this._originalEventName, handleObj.selector, handler); - elementData(element, this._handlerArrayKeyPath)[handleObj.guid] = handler; - }, + add(element, handleObj) { + const that = this; + const handler = function (e) { + that._handler(e); + }; - _handler: function(e) { - if(isTouchEvent(e) || devices.isSimulator()) { - return; - } + eventsEngine.on(element, this._originalEventName, handleObj.selector, handler); + elementData(element, this._handlerArrayKeyPath)[handleObj.guid] = handler; + }, - fireEvent({ - type: this._eventName, - originalEvent: e, - delegateTarget: e.delegateTarget - }); - }, + _handler(e) { + if (isTouchEvent(e) || devices.isSimulator()) { + return; + } - remove: function(element, handleObj) { - const handler = elementData(element, this._handlerArrayKeyPath)[handleObj.guid]; + fireEvent({ + type: this._eventName, + originalEvent: e, + delegateTarget: e.delegateTarget, + }); + }, - eventsEngine.off(element, this._originalEventName, handleObj.selector, handler); - }, + remove(element, handleObj) { + const handler = elementData(element, this._handlerArrayKeyPath)[handleObj.guid]; + // @ts-expect-error + eventsEngine.off(element, this._originalEventName, handleObj.selector, handler); + }, - teardown: function(element) { - removeData(element, this._handlerArrayKeyPath); - } + teardown(element) { + removeData(element, this._handlerArrayKeyPath); + }, }); const HoverStart = Hover.inherit({ - ctor: function() { - this._eventNamespace = HOVERSTART_NAMESPACE; - this._eventName = HOVERSTART; - this._originalEventName = POINTERENTER_NAMESPACED_EVENT_NAME; - this.callBase(); - }, - - _handler: function(e) { - const pointers = e.pointers || []; - if(!pointers.length) { - this.callBase(e); - } + ctor() { + this._eventNamespace = HOVERSTART_NAMESPACE; + this._eventName = HOVERSTART; + this._originalEventName = POINTERENTER_NAMESPACED_EVENT_NAME; + this.callBase(); + }, + + _handler(e) { + const pointers = e.pointers || []; + if (!pointers.length) { + this.callBase(e); } + }, }); const HoverEnd = Hover.inherit({ - ctor: function() { - this._eventNamespace = HOVEREND_NAMESPACE; - this._eventName = HOVEREND; - this._originalEventName = POINTERLEAVE_NAMESPACED_EVENT_NAME; - this.callBase(); - } + ctor() { + this._eventNamespace = HOVEREND_NAMESPACE; + this._eventName = HOVEREND; + this._originalEventName = POINTERLEAVE_NAMESPACED_EVENT_NAME; + this.callBase(); + }, }); -/** - * @name UI Events.dxhoverstart - * @type eventType - * @type_function_param1 event:event - * @module events/hover -*/ - -/** - * @name UI Events.dxhoverend - * @type eventType - * @type_function_param1 event:event - * @module events/hover -*/ - registerEvent(HOVERSTART, new HoverStart()); registerEvent(HOVEREND, new HoverEnd()); export { - HOVERSTART as start, - HOVEREND as end + HOVEREND as end, + HOVERSTART as start, }; diff --git a/packages/devextreme/js/__internal/events/m_pointer.ts b/packages/devextreme/js/__internal/events/m_pointer.ts index e6839c01cf18..07d45017649e 100644 --- a/packages/devextreme/js/__internal/events/m_pointer.ts +++ b/packages/devextreme/js/__internal/events/m_pointer.ts @@ -1,117 +1,61 @@ -import GlobalConfig from '../core/config'; -import * as support from '../core/utils/support'; -import { each } from '../core/utils/iterator'; -import devices from '../core/devices'; -import registerEvent from './core/event_registrator'; -import TouchStrategy from './pointer/touch'; -import MouseStrategy from './pointer/mouse'; -import MouseAndTouchStrategy from './pointer/mouse_and_touch'; - -/** - * @name UI Events.dxpointerdown - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointermove - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointerup - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointercancel - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointerover - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointerout - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointerenter - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ -/** - * @name UI Events.dxpointerleave - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 pointerType:string - * @module events/pointer -*/ +import GlobalConfig from '@js/core/config'; +import devices from '@js/core/devices'; +import { each } from '@js/core/utils/iterator'; +import * as support from '@js/core/utils/support'; +import registerEvent from '@js/events/core/event_registrator'; +import MouseStrategy from '@js/events/pointer/mouse'; +import MouseAndTouchStrategy from '@js/events/pointer/mouse_and_touch'; +import TouchStrategy from '@js/events/pointer/touch'; const getStrategy = (support, { tablet, phone }) => { - const pointerEventStrategy = getStrategyFromGlobalConfig(); + const pointerEventStrategy = getStrategyFromGlobalConfig(); - if(pointerEventStrategy) { - return pointerEventStrategy; - } + if (pointerEventStrategy) { + return pointerEventStrategy; + } - if(support.touch && !(tablet || phone)) { - return MouseAndTouchStrategy; - } + if (support.touch && !(tablet || phone)) { + return MouseAndTouchStrategy; + } - if(support.touch) { - return TouchStrategy; - } + if (support.touch) { + return TouchStrategy; + } - return MouseStrategy; + return MouseStrategy; }; -const EventStrategy = getStrategy(support, devices.real()); +const EventStrategy = getStrategy(support, devices.real() as any); each(EventStrategy.map, (pointerEvent, originalEvents) => { - registerEvent(pointerEvent, new EventStrategy(pointerEvent, originalEvents)); + registerEvent(pointerEvent, new EventStrategy(pointerEvent, originalEvents)); }); const pointer = { - down: 'dxpointerdown', - up: 'dxpointerup', - move: 'dxpointermove', - cancel: 'dxpointercancel', - enter: 'dxpointerenter', - leave: 'dxpointerleave', - over: 'dxpointerover', - out: 'dxpointerout' + down: 'dxpointerdown', + up: 'dxpointerup', + move: 'dxpointermove', + cancel: 'dxpointercancel', + enter: 'dxpointerenter', + leave: 'dxpointerleave', + over: 'dxpointerover', + out: 'dxpointerout', }; function getStrategyFromGlobalConfig() { - const eventStrategyName = GlobalConfig().pointerEventStrategy; + const eventStrategyName = GlobalConfig().pointerEventStrategy as any; - return { - 'mouse-and-touch': MouseAndTouchStrategy, - 'touch': TouchStrategy, - 'mouse': MouseStrategy, - }[eventStrategyName]; + return { + 'mouse-and-touch': MouseAndTouchStrategy, + touch: TouchStrategy, + mouse: MouseStrategy, + }[eventStrategyName]; } -///#DEBUG +/// #DEBUG +// @ts-expect-error pointer.getStrategy = getStrategy; -///#ENDDEBUG +/// #ENDDEBUG export default pointer; diff --git a/packages/devextreme/js/__internal/events/m_remove.ts b/packages/devextreme/js/__internal/events/m_remove.ts index ffde4455a3d6..7f05a2b3b1e5 100644 --- a/packages/devextreme/js/__internal/events/m_remove.ts +++ b/packages/devextreme/js/__internal/events/m_remove.ts @@ -1,32 +1,26 @@ -import $ from '../core/renderer'; -import { beforeCleanData } from '../core/element_data'; -import eventsEngine from './core/events_engine'; -import registerEvent from './core/event_registrator'; +import { beforeCleanData } from '@js/core/element_data'; +import $ from '@js/core/renderer'; +import registerEvent from '@js/events/core/event_registrator'; +import eventsEngine from '@js/events/core/events_engine'; export const removeEvent = 'dxremove'; const eventPropName = 'dxRemoveEvent'; -/** - * @name UI Events.dxremove - * @type eventType - * @type_function_param1 event:event - * @module events/remove -*/ - -beforeCleanData(function(elements) { - elements = [].slice.call(elements); - for(let i = 0; i < elements.length; i++) { - const $element = $(elements[i]); - if($element.prop(eventPropName)) { - $element[0][eventPropName] = null; - eventsEngine.triggerHandler($element, removeEvent); - } +beforeCleanData((elements) => { + elements = [].slice.call(elements); + for (let i = 0; i < elements.length; i++) { + const $element = $(elements[i]); + // @ts-expect-error + if ($element.prop(eventPropName)) { + $element[0][eventPropName] = null; + eventsEngine.triggerHandler($element, removeEvent as any); } + } }); registerEvent(removeEvent, { - noBubble: true, - setup: function(element) { - $(element).prop(eventPropName, true); - } + noBubble: true, + setup(element) { + $(element).prop(eventPropName, true); + }, }); diff --git a/packages/devextreme/js/__internal/events/m_short.ts b/packages/devextreme/js/__internal/events/m_short.ts index c47f8aead18b..e8ae7d16aeff 100644 --- a/packages/devextreme/js/__internal/events/m_short.ts +++ b/packages/devextreme/js/__internal/events/m_short.ts @@ -1,97 +1,115 @@ -import eventsEngine from './core/events_engine'; -import KeyboardProcessor from './core/keyboard_processor'; -import { addNamespace as pureAddNamespace } from './utils/index'; +/* eslint-disable @typescript-eslint/no-dynamic-delete */ + +import eventsEngine from '@js/events/core/events_engine'; +import KeyboardProcessor from '@js/events/core/keyboard_processor'; +import { addNamespace as pureAddNamespace } from '@js/events/utils/index'; function addNamespace(event, namespace) { - return namespace ? pureAddNamespace(event, namespace) : event; + return namespace ? pureAddNamespace(event, namespace) : event; } function executeAction(action, args) { - return typeof action === 'function' ? action(args) : action.execute(args); + return typeof action === 'function' ? action(args) : action.execute(args); } export const active = { - on: ($el, active, inactive, opts) => { - const { selector, showTimeout, hideTimeout, namespace } = opts; - - eventsEngine.on($el, addNamespace('dxactive', namespace), selector, { timeout: showTimeout }, - event => executeAction(active, { event, element: event.currentTarget }) - ); - eventsEngine.on($el, addNamespace('dxinactive', namespace), selector, { timeout: hideTimeout }, - event => executeAction(inactive, { event, element: event.currentTarget }) - ); - }, - - off: ($el, { namespace, selector }) => { - eventsEngine.off($el, addNamespace('dxactive', namespace), selector); - eventsEngine.off($el, addNamespace('dxinactive', namespace), selector); - } + on: ($el, active, inactive, opts) => { + const { + selector, showTimeout, hideTimeout, namespace, + } = opts; + + eventsEngine.on( + $el, + addNamespace('dxactive', namespace), + selector, + { timeout: showTimeout }, + // @ts-expect-error + (event) => executeAction(active, { event, element: event.currentTarget }), + ); + eventsEngine.on( + $el, + addNamespace('dxinactive', namespace), + selector, + { timeout: hideTimeout }, + // @ts-expect-error + (event) => executeAction(inactive, { event, element: event.currentTarget }), + ); + }, + + off: ($el, { namespace, selector }) => { + eventsEngine.off($el, addNamespace('dxactive', namespace), selector); + eventsEngine.off($el, addNamespace('dxinactive', namespace), selector); + }, }; export const resize = { - on: ($el, resize, { namespace } = {}) => { - eventsEngine.on($el, addNamespace('dxresize', namespace), resize); - }, - off: ($el, { namespace } = {}) => { - eventsEngine.off($el, addNamespace('dxresize', namespace)); - } + on: ($el, resize, { namespace }: any = {}) => { + eventsEngine.on($el, addNamespace('dxresize', namespace), resize); + }, + off: ($el, { namespace }: any = {}) => { + eventsEngine.off($el, addNamespace('dxresize', namespace)); + }, }; export const hover = { - on: ($el, start, end, { selector, namespace }) => { - eventsEngine.on($el, addNamespace('dxhoverend', namespace), selector, event => end(event)); - eventsEngine.on($el, addNamespace('dxhoverstart', namespace), selector, - event => executeAction(start, { element: event.target, event })); - }, - - off: ($el, { selector, namespace }) => { - eventsEngine.off($el, addNamespace('dxhoverstart', namespace), selector); - eventsEngine.off($el, addNamespace('dxhoverend', namespace), selector); - } + on: ($el, start, end, { selector, namespace }) => { + eventsEngine.on($el, addNamespace('dxhoverend', namespace), selector, (event) => end(event)); + eventsEngine.on( + $el, + addNamespace('dxhoverstart', namespace), + selector, + (event) => executeAction(start, { element: event.target, event }), + ); + }, + + off: ($el, { selector, namespace }) => { + eventsEngine.off($el, addNamespace('dxhoverstart', namespace), selector); + eventsEngine.off($el, addNamespace('dxhoverend', namespace), selector); + }, }; export const visibility = { - on: ($el, shown, hiding, { namespace }) => { - eventsEngine.on($el, addNamespace('dxhiding', namespace), hiding); - eventsEngine.on($el, addNamespace('dxshown', namespace), shown); - }, - - off: ($el, { namespace }) => { - eventsEngine.off($el, addNamespace('dxhiding', namespace)); - eventsEngine.off($el, addNamespace('dxshown', namespace)); - } + on: ($el, shown, hiding, { namespace }) => { + eventsEngine.on($el, addNamespace('dxhiding', namespace), hiding); + eventsEngine.on($el, addNamespace('dxshown', namespace), shown); + }, + + off: ($el, { namespace }) => { + eventsEngine.off($el, addNamespace('dxhiding', namespace)); + eventsEngine.off($el, addNamespace('dxshown', namespace)); + }, }; export const focus = { - on: ($el, focusIn, focusOut, { namespace }) => { - eventsEngine.on($el, addNamespace('focusin', namespace), focusIn); - eventsEngine.on($el, addNamespace('focusout', namespace), focusOut); - }, - - off: ($el, { namespace }) => { - eventsEngine.off($el, addNamespace('focusin', namespace)); - eventsEngine.off($el, addNamespace('focusout', namespace)); - }, - - trigger: $el => eventsEngine.trigger($el, 'focus') + on: ($el, focusIn, focusOut, { namespace }) => { + eventsEngine.on($el, addNamespace('focusin', namespace), focusIn); + eventsEngine.on($el, addNamespace('focusout', namespace), focusOut); + }, + + off: ($el, { namespace }) => { + eventsEngine.off($el, addNamespace('focusin', namespace)); + eventsEngine.off($el, addNamespace('focusout', namespace)); + }, + // @ts-expect-error + trigger: ($el) => eventsEngine.trigger($el, 'focus'), }; export const dxClick = { - on: ($el, click, { namespace } = {}) => { - eventsEngine.on($el, addNamespace('dxclick', namespace), click); - }, - off: ($el, { namespace } = {}) => { - eventsEngine.off($el, addNamespace('dxclick', namespace)); - } + on: ($el, click, { namespace }: any = {}) => { + eventsEngine.on($el, addNamespace('dxclick', namespace), click); + }, + off: ($el, { namespace }: any = {}) => { + eventsEngine.off($el, addNamespace('dxclick', namespace)); + }, }; export const click = { - on: ($el, click, { namespace } = {}) => { - eventsEngine.on($el, addNamespace('click', namespace), click); - }, - off: ($el, { namespace } = {}) => { - eventsEngine.off($el, addNamespace('click', namespace)); - } + on: ($el, click, { namespace }: any = {}) => { + eventsEngine.on($el, addNamespace('click', namespace), click); + }, + off: ($el, { namespace }: any = {}) => { + eventsEngine.off($el, addNamespace('click', namespace)); + }, }; let index = 0; @@ -99,21 +117,21 @@ const keyboardProcessors = {}; const generateListenerId = () => `keyboardProcessorId${index++}`; export const keyboard = { - on: (element, focusTarget, handler) => { - const listenerId = generateListenerId(); + on: (element, focusTarget, handler) => { + const listenerId = generateListenerId(); - keyboardProcessors[listenerId] = new KeyboardProcessor({ element, focusTarget, handler }); + keyboardProcessors[listenerId] = new KeyboardProcessor({ element, focusTarget, handler }); - return listenerId; - }, + return listenerId; + }, - off: listenerId => { - if(listenerId && keyboardProcessors[listenerId]) { - keyboardProcessors[listenerId].dispose(); - delete keyboardProcessors[listenerId]; - } - }, + off: (listenerId) => { + if (listenerId && keyboardProcessors[listenerId]) { + keyboardProcessors[listenerId].dispose(); + delete keyboardProcessors[listenerId]; + } + }, - // NOTE: For tests - _getProcessor: listenerId => keyboardProcessors[listenerId] + // NOTE: For tests + _getProcessor: (listenerId) => keyboardProcessors[listenerId], }; diff --git a/packages/devextreme/js/__internal/events/m_swipe.ts b/packages/devextreme/js/__internal/events/m_swipe.ts index 3f5d8e65fe35..fbea0dddd200 100644 --- a/packages/devextreme/js/__internal/events/m_swipe.ts +++ b/packages/devextreme/js/__internal/events/m_swipe.ts @@ -1,206 +1,180 @@ -import { getWidth, getHeight } from '../core/utils/size'; -import { eventData } from './utils/index'; -import GestureEmitter from './gesture/emitter.gesture'; -import registerEmitter from './core/emitter_registrator'; +import { getHeight, getWidth } from '@js/core/utils/size'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import GestureEmitter from '@js/events/gesture/emitter.gesture'; +import { eventData } from '@js/events/utils/index'; const SWIPE_START_EVENT = 'dxswipestart'; const SWIPE_EVENT = 'dxswipe'; const SWIPE_END_EVENT = 'dxswipeend'; - const HorizontalStrategy = { - defaultItemSizeFunc: function() { - return getWidth(this.getElement()); - }, - - getBounds: function() { - return [ - this._maxLeftOffset, - this._maxRightOffset - ]; - }, - - calcOffsetRatio: function(e) { - const endEventData = eventData(e); - return (endEventData.x - (this._savedEventData && this._savedEventData.x || 0)) / this._itemSizeFunc().call(this, e); - }, - - isFastSwipe: function(e) { - const endEventData = eventData(e); - return this.FAST_SWIPE_SPEED_LIMIT * Math.abs(endEventData.x - this._tickData.x) >= (endEventData.time - this._tickData.time); - } + defaultItemSizeFunc() { + return getWidth(this.getElement()); + }, + + getBounds() { + return [ + this._maxLeftOffset, + this._maxRightOffset, + ]; + }, + + calcOffsetRatio(e) { + const endEventData = eventData(e); + return (endEventData.x - (this._savedEventData && this._savedEventData.x || 0)) / this._itemSizeFunc().call(this, e); + }, + + isFastSwipe(e) { + const endEventData = eventData(e); + return this.FAST_SWIPE_SPEED_LIMIT * Math.abs(endEventData.x - this._tickData.x) >= (endEventData.time - this._tickData.time); + }, }; const VerticalStrategy = { - defaultItemSizeFunc: function() { - return getHeight(this.getElement()); - }, - - getBounds: function() { - return [ - this._maxTopOffset, - this._maxBottomOffset - ]; - }, - - calcOffsetRatio: function(e) { - const endEventData = eventData(e); - return (endEventData.y - (this._savedEventData && this._savedEventData.y || 0)) / this._itemSizeFunc().call(this, e); - }, - - isFastSwipe: function(e) { - const endEventData = eventData(e); - return this.FAST_SWIPE_SPEED_LIMIT * Math.abs(endEventData.y - this._tickData.y) >= (endEventData.time - this._tickData.time); - } + defaultItemSizeFunc() { + return getHeight(this.getElement()); + }, + + getBounds() { + return [ + this._maxTopOffset, + this._maxBottomOffset, + ]; + }, + + calcOffsetRatio(e) { + const endEventData = eventData(e); + return (endEventData.y - (this._savedEventData && this._savedEventData.y || 0)) / this._itemSizeFunc().call(this, e); + }, + + isFastSwipe(e) { + const endEventData = eventData(e); + return this.FAST_SWIPE_SPEED_LIMIT * Math.abs(endEventData.y - this._tickData.y) >= (endEventData.time - this._tickData.time); + }, }; - const STRATEGIES = { - 'horizontal': HorizontalStrategy, - 'vertical': VerticalStrategy + horizontal: HorizontalStrategy, + vertical: VerticalStrategy, }; const SwipeEmitter = GestureEmitter.inherit({ - TICK_INTERVAL: 300, - FAST_SWIPE_SPEED_LIMIT: 10, - - ctor: function(element) { - this.callBase(element); - - this.direction = 'horizontal'; - this.elastic = true; - }, - - _getStrategy: function() { - return STRATEGIES[this.direction]; - }, - - _defaultItemSizeFunc: function() { - return this._getStrategy().defaultItemSizeFunc.call(this); - }, - - _itemSizeFunc: function() { - return this.itemSizeFunc || this._defaultItemSizeFunc; - }, - - _init: function(e) { - this._tickData = eventData(e); - }, - - _start: function(e) { - this._savedEventData = eventData(e); - - e = this._fireEvent(SWIPE_START_EVENT, e); - - if(!e.cancel) { - this._maxLeftOffset = e.maxLeftOffset; - this._maxRightOffset = e.maxRightOffset; - this._maxTopOffset = e.maxTopOffset; - this._maxBottomOffset = e.maxBottomOffset; - } - }, - - _move: function(e) { - const strategy = this._getStrategy(); - const moveEventData = eventData(e); - let offset = strategy.calcOffsetRatio.call(this, e); - - offset = this._fitOffset(offset, this.elastic); - - if(moveEventData.time - this._tickData.time > this.TICK_INTERVAL) { - this._tickData = moveEventData; - } - - this._fireEvent(SWIPE_EVENT, e, { - offset: offset, - }); - - if(e.cancelable !== false) { - e.preventDefault(); - } - }, - - _end: function(e) { - const strategy = this._getStrategy(); - const offsetRatio = strategy.calcOffsetRatio.call(this, e); - const isFast = strategy.isFastSwipe.call(this, e); - let startOffset = offsetRatio; - let targetOffset = this._calcTargetOffset(offsetRatio, isFast); - - startOffset = this._fitOffset(startOffset, this.elastic); - targetOffset = this._fitOffset(targetOffset, false); - - this._fireEvent(SWIPE_END_EVENT, e, { - offset: startOffset, - targetOffset: targetOffset - }); - }, - - _fitOffset: function(offset, elastic) { - const strategy = this._getStrategy(); - const bounds = strategy.getBounds.call(this); - - if(offset < -bounds[0]) { - return elastic ? (-2 * bounds[0] + offset) / 3 : -bounds[0]; - } - - if(offset > bounds[1]) { - return elastic ? (2 * bounds[1] + offset) / 3 : bounds[1]; - } - - return offset; - }, - - _calcTargetOffset: function(offsetRatio, isFast) { - let result; - if(isFast) { - result = Math.ceil(Math.abs(offsetRatio)); - if(offsetRatio < 0) { - result = -result; - } - } else { - result = Math.round(offsetRatio); - } - return result; + TICK_INTERVAL: 300, + FAST_SWIPE_SPEED_LIMIT: 10, + + ctor(element) { + this.callBase(element); + + this.direction = 'horizontal'; + this.elastic = true; + }, + + _getStrategy() { + return STRATEGIES[this.direction]; + }, + + _defaultItemSizeFunc() { + return this._getStrategy().defaultItemSizeFunc.call(this); + }, + + _itemSizeFunc() { + return this.itemSizeFunc || this._defaultItemSizeFunc; + }, + + _init(e) { + this._tickData = eventData(e); + }, + + _start(e) { + this._savedEventData = eventData(e); + + e = this._fireEvent(SWIPE_START_EVENT, e); + + if (!e.cancel) { + this._maxLeftOffset = e.maxLeftOffset; + this._maxRightOffset = e.maxRightOffset; + this._maxTopOffset = e.maxTopOffset; + this._maxBottomOffset = e.maxBottomOffset; } -}); + }, + + _move(e) { + const strategy = this._getStrategy(); + const moveEventData = eventData(e); + let offset = strategy.calcOffsetRatio.call(this, e); -/** - * @name UI Events.dxswipestart - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 cancel:boolean - * @module events/swipe -*/ -/** - * @name UI Events.dxswipe - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 offset:number - * @type_function_param1_field2 cancel:boolean - * @module events/swipe -*/ -/** - * @name UI Events.dxswipeend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 offset:number - * @type_function_param1_field2 targetOffset:number - * @module events/swipe -*/ + offset = this._fitOffset(offset, this.elastic); + + if (moveEventData.time - this._tickData.time > this.TICK_INTERVAL) { + this._tickData = moveEventData; + } + + this._fireEvent(SWIPE_EVENT, e, { + offset, + }); + + if (e.cancelable !== false) { + e.preventDefault(); + } + }, + + _end(e) { + const strategy = this._getStrategy(); + const offsetRatio = strategy.calcOffsetRatio.call(this, e); + const isFast = strategy.isFastSwipe.call(this, e); + let startOffset = offsetRatio; + let targetOffset = this._calcTargetOffset(offsetRatio, isFast); + + startOffset = this._fitOffset(startOffset, this.elastic); + targetOffset = this._fitOffset(targetOffset, false); + + this._fireEvent(SWIPE_END_EVENT, e, { + offset: startOffset, + targetOffset, + }); + }, + + _fitOffset(offset, elastic) { + const strategy = this._getStrategy(); + const bounds = strategy.getBounds.call(this); + + if (offset < -bounds[0]) { + return elastic ? (-2 * bounds[0] + offset) / 3 : -bounds[0]; + } + + if (offset > bounds[1]) { + return elastic ? (2 * bounds[1] + offset) / 3 : bounds[1]; + } + + return offset; + }, + + _calcTargetOffset(offsetRatio, isFast) { + let result; + if (isFast) { + result = Math.ceil(Math.abs(offsetRatio)); + if (offsetRatio < 0) { + result = -result; + } + } else { + result = Math.round(offsetRatio); + } + return result; + }, +}); registerEmitter({ - emitter: SwipeEmitter, - events: [ - SWIPE_START_EVENT, - SWIPE_EVENT, - SWIPE_END_EVENT - ] + emitter: SwipeEmitter, + events: [ + SWIPE_START_EVENT, + SWIPE_EVENT, + SWIPE_END_EVENT, + ], }); export { - SWIPE_EVENT as swipe, - SWIPE_START_EVENT as start, - SWIPE_END_EVENT as end + SWIPE_END_EVENT as end, + SWIPE_START_EVENT as start, + SWIPE_EVENT as swipe, }; diff --git a/packages/devextreme/js/__internal/events/m_transform.ts b/packages/devextreme/js/__internal/events/m_transform.ts index 9e34d9c39b3f..6f3ae247bc28 100644 --- a/packages/devextreme/js/__internal/events/m_transform.ts +++ b/packages/devextreme/js/__internal/events/m_transform.ts @@ -1,8 +1,13 @@ -import { sign as mathSign, fitIntoRange } from '../core/utils/math'; -import * as iteratorUtils from '../core/utils/iterator'; -import { hasTouches } from './utils/index'; -import Emitter from './core/emitter'; -import registerEmitter from './core/emitter_registrator'; +import * as iteratorUtils from '@js/core/utils/iterator'; +import { fitIntoRange, sign as mathSign } from '@js/core/utils/math'; +import Emitter from '@js/events/core/emitter'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import { hasTouches } from '@js/events/utils/index'; + +interface EventAlias { + name: string; + args: any; +} const DX_PREFIX = 'dx'; @@ -15,283 +20,153 @@ const START_POSTFIX = 'start'; const UPDATE_POSTFIX = ''; const END_POSTFIX = 'end'; -const eventAliases = []; -const addAlias = function(eventName, eventArgs) { - eventAliases.push({ - name: eventName, - args: eventArgs - }); +const eventAliases: EventAlias[] = []; +const addAlias = function (eventName, eventArgs) { + eventAliases.push({ + name: eventName, + args: eventArgs, + }); }; addAlias(TRANSFORM, { - scale: true, - deltaScale: true, - rotation: true, - deltaRotation: true, - translation: true, - deltaTranslation: true + scale: true, + deltaScale: true, + rotation: true, + deltaRotation: true, + translation: true, + deltaTranslation: true, }); addAlias(TRANSLATE, { - translation: true, - deltaTranslation: true + translation: true, + deltaTranslation: true, }); addAlias(PINCH, { - scale: true, - deltaScale: true + scale: true, + deltaScale: true, }); addAlias(ROTATE, { - rotation: true, - deltaRotation: true + rotation: true, + deltaRotation: true, }); - -const getVector = function(first, second) { - return { - x: second.pageX - first.pageX, - y: -second.pageY + first.pageY, - centerX: (second.pageX + first.pageX) * 0.5, - centerY: (second.pageY + first.pageY) * 0.5 - }; +const getVector = function (first, second) { + return { + x: second.pageX - first.pageX, + y: -second.pageY + first.pageY, + centerX: (second.pageX + first.pageX) * 0.5, + centerY: (second.pageY + first.pageY) * 0.5, + }; }; -const getEventVector = function(e) { - const pointers = e.pointers; +const getEventVector = function (e) { + const { pointers } = e; - return getVector(pointers[0], pointers[1]); + return getVector(pointers[0], pointers[1]); }; -const getDistance = function(vector) { - return Math.sqrt(vector.x * vector.x + vector.y * vector.y); +const getDistance = function (vector) { + return Math.sqrt(vector.x * vector.x + vector.y * vector.y); }; -const getScale = function(firstVector, secondVector) { - return getDistance(firstVector) / getDistance(secondVector); +const getScale = function (firstVector, secondVector) { + return getDistance(firstVector) / getDistance(secondVector); }; -const getRotation = function(firstVector, secondVector) { - const scalarProduct = firstVector.x * secondVector.x + firstVector.y * secondVector.y; - const distanceProduct = getDistance(firstVector) * getDistance(secondVector); +const getRotation = function (firstVector, secondVector) { + const scalarProduct = firstVector.x * secondVector.x + firstVector.y * secondVector.y; + const distanceProduct = getDistance(firstVector) * getDistance(secondVector); - if(distanceProduct === 0) { - return 0; - } + if (distanceProduct === 0) { + return 0; + } - const sign = mathSign(firstVector.x * secondVector.y - secondVector.x * firstVector.y); - const angle = Math.acos(fitIntoRange(scalarProduct / distanceProduct, -1, 1)); + const sign = mathSign(firstVector.x * secondVector.y - secondVector.x * firstVector.y); + const angle = Math.acos(fitIntoRange(scalarProduct / distanceProduct, -1, 1)); - return sign * angle; + return sign * angle; }; -const getTranslation = function(firstVector, secondVector) { - return { - x: firstVector.centerX - secondVector.centerX, - y: firstVector.centerY - secondVector.centerY - }; +const getTranslation = function (firstVector, secondVector) { + return { + x: firstVector.centerX - secondVector.centerX, + y: firstVector.centerY - secondVector.centerY, + }; }; const TransformEmitter = Emitter.inherit({ - validatePointers: function(e) { - return hasTouches(e) > 1; - }, - - start: function(e) { - this._accept(e); - - const startVector = getEventVector(e); - this._startVector = startVector; - this._prevVector = startVector; - - this._fireEventAliases(START_POSTFIX, e); - }, - - move: function(e) { - const currentVector = getEventVector(e); - const eventArgs = this._getEventArgs(currentVector); - - this._fireEventAliases(UPDATE_POSTFIX, e, eventArgs); - this._prevVector = currentVector; - }, - - end: function(e) { - const eventArgs = this._getEventArgs(this._prevVector); - this._fireEventAliases(END_POSTFIX, e, eventArgs); - }, - - _getEventArgs: function(vector) { - return { - scale: getScale(vector, this._startVector), - deltaScale: getScale(vector, this._prevVector), - rotation: getRotation(vector, this._startVector), - deltaRotation: getRotation(vector, this._prevVector), - translation: getTranslation(vector, this._startVector), - deltaTranslation: getTranslation(vector, this._prevVector) - }; - }, - - _fireEventAliases: function(eventPostfix, originalEvent, eventArgs) { - eventArgs = eventArgs || {}; - - iteratorUtils.each(eventAliases, (function(_, eventAlias) { - const args = {}; - iteratorUtils.each(eventAlias.args, function(name) { - if(name in eventArgs) { - args[name] = eventArgs[name]; - } - }); - - this._fireEvent(DX_PREFIX + eventAlias.name + eventPostfix, originalEvent, args); - }).bind(this)); - } + validatePointers(e) { + return hasTouches(e) > 1; + }, -}); + start(e) { + this._accept(e); + + const startVector = getEventVector(e); + this._startVector = startVector; + this._prevVector = startVector; + + this._fireEventAliases(START_POSTFIX, e); + }, + + move(e) { + const currentVector = getEventVector(e); + const eventArgs = this._getEventArgs(currentVector); + this._fireEventAliases(UPDATE_POSTFIX, e, eventArgs); + this._prevVector = currentVector; + }, -/** - * @name UI Events.dxtransformstart - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxtransform - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 scale:number - * @type_function_param1_field2 deltaScale:number - * @type_function_param1_field3 rotation:number - * @type_function_param1_field4 deltaRotation:number - * @type_function_param1_field5 translation:object - * @type_function_param1_field6 deltaTranslation:object - * @type_function_param1_field7 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxtransformend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 scale:number - * @type_function_param1_field2 deltaScale:number - * @type_function_param1_field3 rotation:number - * @type_function_param1_field4 deltaRotation:number - * @type_function_param1_field5 translation:object - * @type_function_param1_field6 deltaTranslation:object - * @type_function_param1_field7 cancel:boolean - * @module events/transform -*/ - -/** - * @name UI Events.dxtranslatestart - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxtranslate - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 translation:object - * @type_function_param1_field2 deltaTranslation:object - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxtranslateend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 translation:object - * @type_function_param1_field2 deltaTranslation:object - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ - -/** -* @name UI Events.dxpinchstart -* @type eventType -* @type_function_param1 event:event -* @type_function_param1_field1 cancel:boolean -* @module events/transform - */ -/** - * @name UI Events.dxpinch - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 scale:number - * @type_function_param1_field2 deltaScale:number - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxpinchend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 scale:number - * @type_function_param1_field2 deltaScale:number - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ - -/** - * @name UI Events.dxrotatestart - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxrotate - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 rotation:number - * @type_function_param1_field2 deltaRotation:number - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ -/** - * @name UI Events.dxrotateend - * @type eventType - * @type_function_param1 event:event - * @type_function_param1_field1 rotation:number - * @type_function_param1_field2 deltaRotation:number - * @type_function_param1_field3 cancel:boolean - * @module events/transform -*/ - -const eventNames = eventAliases.reduce((result, eventAlias) => { - [START_POSTFIX, UPDATE_POSTFIX, END_POSTFIX].forEach(eventPostfix => { - result.push(DX_PREFIX + eventAlias.name + eventPostfix); + end(e) { + const eventArgs = this._getEventArgs(this._prevVector); + this._fireEventAliases(END_POSTFIX, e, eventArgs); + }, + + _getEventArgs(vector) { + return { + scale: getScale(vector, this._startVector), + deltaScale: getScale(vector, this._prevVector), + rotation: getRotation(vector, this._startVector), + deltaRotation: getRotation(vector, this._prevVector), + translation: getTranslation(vector, this._startVector), + deltaTranslation: getTranslation(vector, this._prevVector), + }; + }, + + _fireEventAliases(eventPostfix, originalEvent, eventArgs) { + eventArgs = eventArgs || {}; + + iteratorUtils.each(eventAliases, (_, eventAlias) => { + const args = {}; + iteratorUtils.each(eventAlias.args, (name) => { + if (name in eventArgs) { + args[name] = eventArgs[name]; + } + }); + + this._fireEvent(DX_PREFIX + eventAlias.name + eventPostfix, originalEvent, args); }); - return result; + }, + +}); + +const eventNames = eventAliases.reduce((result: string[], eventAlias) => { + [START_POSTFIX, UPDATE_POSTFIX, END_POSTFIX].forEach((eventPostfix) => { + result.push(DX_PREFIX + eventAlias.name + eventPostfix); + }); + return result; }, []); registerEmitter({ - emitter: TransformEmitter, - events: eventNames + emitter: TransformEmitter, + events: eventNames, }); -const exportNames = {}; -iteratorUtils.each(eventNames, function(_, eventName) { - exportNames[eventName.substring(DX_PREFIX.length)] = eventName; +const exportNames: Record = {}; +iteratorUtils.each(eventNames, (_, eventName: string) => { + exportNames[eventName.substring(DX_PREFIX.length)] = eventName; }); -/* eslint-disable spellcheck/spell-checker */ -export const { - transformstart, - transform, - transformend, - translatestart, - translate, - translateend, - zoomstart, - zoom, - zoomend, - pinchstart, - pinch, - pinchend, - rotatestart, - rotate, - rotateend -} = exportNames; + +export { exportNames }; diff --git a/packages/devextreme/js/__internal/events/m_visibility_change.ts b/packages/devextreme/js/__internal/events/m_visibility_change.ts index 623329c76d45..73649aaeb138 100644 --- a/packages/devextreme/js/__internal/events/m_visibility_change.ts +++ b/packages/devextreme/js/__internal/events/m_visibility_change.ts @@ -1,22 +1,28 @@ -import $ from '../core/renderer'; -import eventsEngine from './core/events_engine'; +import $ from '@js/core/renderer'; +import eventsEngine from '@js/events/core/events_engine'; -const triggerVisibilityChangeEvent = function(eventName) { - const VISIBILITY_CHANGE_SELECTOR = '.dx-visibility-change-handler'; +const triggerVisibilityChangeEvent = function (eventName) { + const VISIBILITY_CHANGE_SELECTOR = '.dx-visibility-change-handler'; - return function(element) { - const $element = $(element || 'body'); + return function (element) { + const $element = $(element || 'body'); - const changeHandlers = $element.filter(VISIBILITY_CHANGE_SELECTOR). - add($element.find(VISIBILITY_CHANGE_SELECTOR)); + const changeHandlers = $element.filter(VISIBILITY_CHANGE_SELECTOR) + // @ts-expect-error + .add($element.find(VISIBILITY_CHANGE_SELECTOR)); - for(let i = 0; i < changeHandlers.length; i++) { - eventsEngine.triggerHandler(changeHandlers[i], eventName); - } - }; + for (let i = 0; i < changeHandlers.length; i++) { + eventsEngine.triggerHandler(changeHandlers[i], eventName); + } + }; }; - export const triggerShownEvent = triggerVisibilityChangeEvent('dxshown'); export const triggerHidingEvent = triggerVisibilityChangeEvent('dxhiding'); export const triggerResizeEvent = triggerVisibilityChangeEvent('dxresize'); + +export default { + triggerHidingEvent, + triggerResizeEvent, + triggerShownEvent, +}; diff --git a/packages/devextreme/js/__internal/events/pointer/m_base.ts b/packages/devextreme/js/__internal/events/pointer/m_base.ts index 75baf7ab8111..9f09bc77971f 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_base.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_base.ts @@ -1,114 +1,114 @@ -import eventsEngine from '../../events/core/events_engine'; -import browser from '../../core/utils/browser'; -import domAdapter from '../../core/dom_adapter'; -import Class from '../../core/class'; -import { addNamespace, eventSource, fireEvent } from '../utils/index'; -import { getEventTarget } from '../utils/event_target'; +import Class from '@js/core/class'; +import domAdapter from '@js/core/dom_adapter'; +import browser from '@js/core/utils/browser'; +import eventsEngine from '@js/events/core/events_engine'; +import { getEventTarget } from '@js/events/utils/event_target'; +import { addNamespace, eventSource, fireEvent } from '@js/events/utils/index'; const POINTER_EVENTS_NAMESPACE = 'dxPointerEvents'; - const BaseStrategy = Class.inherit({ - ctor: function(eventName, originalEvents) { - this._eventName = eventName; - this._originalEvents = addNamespace(originalEvents, POINTER_EVENTS_NAMESPACE); - this._handlerCount = 0; - this.noBubble = this._isNoBubble(); - }, + ctor(eventName, originalEvents) { + this._eventName = eventName; + this._originalEvents = addNamespace(originalEvents, POINTER_EVENTS_NAMESPACE); + this._handlerCount = 0; + this.noBubble = this._isNoBubble(); + }, - _isNoBubble: function() { - const eventName = this._eventName; + _isNoBubble() { + const eventName = this._eventName; - return eventName === 'dxpointerenter' || - eventName === 'dxpointerleave'; - }, + return eventName === 'dxpointerenter' + || eventName === 'dxpointerleave'; + }, - _handler: function(e) { - const delegateTarget = this._getDelegateTarget(e); + _handler(e) { + const delegateTarget = this._getDelegateTarget(e); - const event = { - type: this._eventName, - pointerType: e.pointerType || eventSource(e), - originalEvent: e, - delegateTarget: delegateTarget, - // NOTE: TimeStamp normalization (FF bug #238041) (T277118) - timeStamp: browser.mozilla ? (new Date()).getTime() : e.timeStamp - }; + const event = { + type: this._eventName, + pointerType: e.pointerType || eventSource(e), + originalEvent: e, + delegateTarget, + // NOTE: TimeStamp normalization (FF bug #238041) (T277118) + timeStamp: browser.mozilla ? new Date().getTime() : e.timeStamp, + }; - const target = getEventTarget(e); - event.target = target; + const target = getEventTarget(e); + // @ts-expect-error + event.target = target; - return this._fireEvent(event); - }, + return this._fireEvent(event); + }, - _getDelegateTarget: function(e) { - let delegateTarget; + _getDelegateTarget(e) { + let delegateTarget; - if(this.noBubble) { - delegateTarget = e.delegateTarget; - } + if (this.noBubble) { + delegateTarget = e.delegateTarget; + } - return delegateTarget; - }, + return delegateTarget; + }, - _fireEvent: function(args) { - return fireEvent(args); - }, + _fireEvent(args) { + return fireEvent(args); + }, - _setSelector: function(handleObj) { - this._selector = this.noBubble && handleObj ? handleObj.selector : null; - }, + _setSelector(handleObj) { + this._selector = this.noBubble && handleObj ? handleObj.selector : null; + }, - _getSelector: function() { - return this._selector; - }, + _getSelector() { + return this._selector; + }, - setup: function() { - return true; - }, + setup() { + return true; + }, - add: function(element, handleObj) { - if(this._handlerCount <= 0 || this.noBubble) { - element = this.noBubble ? element : domAdapter.getDocument(); - this._setSelector(handleObj); + add(element, handleObj) { + if (this._handlerCount <= 0 || this.noBubble) { + element = this.noBubble ? element : domAdapter.getDocument(); + this._setSelector(handleObj); - const that = this; - eventsEngine.on(element, this._originalEvents, this._getSelector(), function(e) { - that._handler(e); - }); - } + const that = this; + eventsEngine.on(element, this._originalEvents, this._getSelector(), (e) => { + that._handler(e); + }); + } - if(!this.noBubble) { - this._handlerCount++; - } - }, + if (!this.noBubble) { + this._handlerCount++; + } + }, - remove: function(handleObj) { - this._setSelector(handleObj); + remove(handleObj) { + this._setSelector(handleObj); - if(!this.noBubble) { - this._handlerCount--; - } - }, + if (!this.noBubble) { + this._handlerCount--; + } + }, - teardown: function(element) { - if(this._handlerCount && !this.noBubble) { - return; - } + teardown(element) { + if (this._handlerCount && !this.noBubble) { + return; + } - element = this.noBubble ? element : domAdapter.getDocument(); + element = this.noBubble ? element : domAdapter.getDocument(); - if(this._originalEvents !== '.' + POINTER_EVENTS_NAMESPACE) { - eventsEngine.off(element, this._originalEvents, this._getSelector()); - } - }, + if (this._originalEvents !== `.${POINTER_EVENTS_NAMESPACE}`) { + eventsEngine.off(element, this._originalEvents, this._getSelector()); + } + }, - dispose: function(element) { - element = this.noBubble ? element : domAdapter.getDocument(); + dispose(element) { + element = this.noBubble ? element : domAdapter.getDocument(); - eventsEngine.off(element, this._originalEvents); - } + eventsEngine.off(element, this._originalEvents); + }, }); export default BaseStrategy; diff --git a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts index 895bc0ccadb5..684565235644 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_mouse.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_mouse.ts @@ -1,61 +1,57 @@ -import { extend } from '../../core/utils/extend'; -import BaseStrategy from './base'; -import Observer from './observer'; +import { extend } from '@js/core/utils/extend'; +import BaseStrategy from '@js/events/pointer/base'; +import Observer from '@js/events/pointer/observer'; const eventMap = { - 'dxpointerdown': 'mousedown', - 'dxpointermove': 'mousemove', - 'dxpointerup': 'mouseup', - 'dxpointercancel': '', - 'dxpointerover': 'mouseover', - 'dxpointerout': 'mouseout', - 'dxpointerenter': 'mouseenter', - 'dxpointerleave': 'mouseleave' + dxpointerdown: 'mousedown', + dxpointermove: 'mousemove', + dxpointerup: 'mouseup', + dxpointercancel: '', + dxpointerover: 'mouseover', + dxpointerout: 'mouseout', + dxpointerenter: 'mouseenter', + dxpointerleave: 'mouseleave', }; -const normalizeMouseEvent = function(e) { - e.pointerId = 1; +const normalizeMouseEvent = function (e) { + e.pointerId = 1; - return { - pointers: observer.pointers(), - pointerId: 1 - }; + return { + pointers: observer.pointers(), + pointerId: 1, + }; }; - let observer; let activated = false; -const activateStrategy = function() { - if(activated) { - return; - } - - observer = new Observer(eventMap, function() { - return true; - }); - - activated = true; +const activateStrategy = function () { + if (activated) { + return; + } + // @ts-expect-error + observer = new Observer(eventMap, () => true); + + activated = true; }; const MouseStrategy = BaseStrategy.inherit({ - ctor: function() { - this.callBase.apply(this, arguments); + ctor() { + this.callBase.apply(this, arguments); - activateStrategy(); - }, + activateStrategy(); + }, - _fireEvent: function(args) { - return this.callBase(extend(normalizeMouseEvent(args.originalEvent), args)); - } + _fireEvent(args) { + return this.callBase(extend(normalizeMouseEvent(args.originalEvent), args)); + }, }); -MouseStrategy.map = eventMap; -MouseStrategy.normalize = normalizeMouseEvent; -MouseStrategy.activate = activateStrategy; -MouseStrategy.resetObserver = function() { - observer.reset(); +(MouseStrategy as any).map = eventMap; +(MouseStrategy as any).normalize = normalizeMouseEvent; +(MouseStrategy as any).activate = activateStrategy; +(MouseStrategy as any).resetObserver = function () { + observer.reset(); }; - export default MouseStrategy; diff --git a/packages/devextreme/js/__internal/events/pointer/m_mouse_and_touch.ts b/packages/devextreme/js/__internal/events/pointer/m_mouse_and_touch.ts index be242f223fcb..f7dea7dc03e5 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_mouse_and_touch.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_mouse_and_touch.ts @@ -1,85 +1,86 @@ -import { extend } from '../../core/utils/extend'; -import BaseStrategy from './base'; -import MouseStrategy from './mouse'; -import TouchStrategy from './touch'; -import { isMouseEvent } from '../utils/index'; +import { extend } from '@js/core/utils/extend'; +import BaseStrategy from '@js/events/pointer/base'; +import MouseStrategy from '@js/events/pointer/mouse'; +import TouchStrategy from '@js/events/pointer/touch'; +import { isMouseEvent } from '@js/events/utils/index'; const eventMap = { - 'dxpointerdown': 'touchstart mousedown', - 'dxpointermove': 'touchmove mousemove', - 'dxpointerup': 'touchend mouseup', - 'dxpointercancel': 'touchcancel', - 'dxpointerover': 'mouseover', - 'dxpointerout': 'mouseout', - 'dxpointerenter': 'mouseenter', - 'dxpointerleave': 'mouseleave' + dxpointerdown: 'touchstart mousedown', + dxpointermove: 'touchmove mousemove', + dxpointerup: 'touchend mouseup', + dxpointercancel: 'touchcancel', + dxpointerover: 'mouseover', + dxpointerout: 'mouseout', + dxpointerenter: 'mouseenter', + dxpointerleave: 'mouseleave', }; - let activated = false; -const activateStrategy = function() { - if(activated) { - return; - } +const activateStrategy = function () { + if (activated) { + return; + } - MouseStrategy.activate(); + (MouseStrategy as any).activate(); - activated = true; + activated = true; }; const MouseAndTouchStrategy = BaseStrategy.inherit({ - EVENT_LOCK_TIMEOUT: 100, + EVENT_LOCK_TIMEOUT: 100, - ctor: function() { - this.callBase.apply(this, arguments); + ctor() { + this.callBase.apply(this, arguments); - activateStrategy(); - }, + activateStrategy(); + }, - _handler: function(e) { - const isMouse = isMouseEvent(e); + _handler(e) { + const isMouse = isMouseEvent(e); - if(!isMouse) { - this._skipNextEvents = true; - } + if (!isMouse) { + this._skipNextEvents = true; + } - if(isMouse && this._mouseLocked) { - return; - } + if (isMouse && this._mouseLocked) { + return; + } - if(isMouse && this._skipNextEvents) { - this._skipNextEvents = false; - this._mouseLocked = true; + if (isMouse && this._skipNextEvents) { + this._skipNextEvents = false; + this._mouseLocked = true; - clearTimeout(this._unlockMouseTimer); + clearTimeout(this._unlockMouseTimer); - const that = this; - this._unlockMouseTimer = setTimeout(function() { - that._mouseLocked = false; - }, this.EVENT_LOCK_TIMEOUT); + const that = this; + this._unlockMouseTimer = setTimeout(() => { + that._mouseLocked = false; + }, this.EVENT_LOCK_TIMEOUT); - return; - } + return; + } - return this.callBase(e); - }, + return this.callBase(e); + }, - _fireEvent: function(args) { - const normalizer = isMouseEvent(args.originalEvent) ? MouseStrategy.normalize : TouchStrategy.normalize; + _fireEvent(args) { + const normalizer = isMouseEvent(args.originalEvent) ? (MouseStrategy as any).normalize : (TouchStrategy as any).normalize; - return this.callBase(extend(normalizer(args.originalEvent), args)); - }, + return this.callBase(extend(normalizer(args.originalEvent), args)); + }, - dispose: function() { - this.callBase(); - this._skipNextEvents = false; - this._mouseLocked = false; - clearTimeout(this._unlockMouseTimer); - } + dispose() { + this.callBase(); + this._skipNextEvents = false; + this._mouseLocked = false; + clearTimeout(this._unlockMouseTimer); + }, }); + +// @ts-expect-error MouseAndTouchStrategy.map = eventMap; +// @ts-expect-error MouseAndTouchStrategy.resetObserver = MouseStrategy.resetObserver; - export default MouseAndTouchStrategy; diff --git a/packages/devextreme/js/__internal/events/pointer/m_observer.ts b/packages/devextreme/js/__internal/events/pointer/m_observer.ts index 374d4b336a3c..1a8f76981dd1 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_observer.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_observer.ts @@ -1,69 +1,67 @@ -import { each } from '../../core/utils/iterator'; -import readyCallbacks from '../../core/utils/ready_callbacks'; -import domAdapter from '../../core/dom_adapter'; - -const addEventsListener = function(events, handler) { - readyCallbacks.add(function() { - events - .split(' ') - .forEach(function(event) { - domAdapter.listen(domAdapter.getDocument(), event, handler, true); - }); - }); +import domAdapter from '@js/core/dom_adapter'; +import { each } from '@js/core/utils/iterator'; +import readyCallbacks from '@js/core/utils/ready_callbacks'; + +const addEventsListener = function (events, handler) { + readyCallbacks.add(() => { + events + .split(' ') + .forEach((event) => { + (domAdapter as any).listen(domAdapter.getDocument(), event, handler, true); + }); + }); }; -const Observer = function(eventMap, pointerEquals, onPointerAdding) { - - onPointerAdding = onPointerAdding || function() { }; - - let pointers = []; - - const getPointerIndex = function(e) { - let index = -1; - - each(pointers, function(i, pointer) { - if(!pointerEquals(e, pointer)) { - return true; - } +const Observer = function (eventMap, pointerEquals, onPointerAdding) { + onPointerAdding = onPointerAdding || function () { }; - index = i; - return false; - }); + let pointers: any = []; - return index; - }; + const getPointerIndex = function (e) { + let index = -1; - const addPointer = function(e) { - if(getPointerIndex(e) === -1) { - onPointerAdding(e); - pointers.push(e); - } - }; + each(pointers, (i: any, pointer) => { + if (!pointerEquals(e, pointer)) { + return true; + } - const removePointer = function(e) { - const index = getPointerIndex(e); - if(index > -1) { - pointers.splice(index, 1); - } - }; - - const updatePointer = function(e) { - pointers[getPointerIndex(e)] = e; - }; - - addEventsListener(eventMap['dxpointerdown'], addPointer); - addEventsListener(eventMap['dxpointermove'], updatePointer); - addEventsListener(eventMap['dxpointerup'], removePointer); - addEventsListener(eventMap['dxpointercancel'], removePointer); - - this.pointers = function() { - return pointers; - }; - - this.reset = function() { - pointers = []; - }; + index = i; + return false; + }); + return index; + }; + + const addPointer = function (e) { + if (getPointerIndex(e) === -1) { + onPointerAdding(e); + pointers.push(e); + } + }; + + const removePointer = function (e) { + const index = getPointerIndex(e); + if (index > -1) { + pointers.splice(index, 1); + } + }; + + const updatePointer = function (e) { + pointers[getPointerIndex(e)] = e; + }; + + addEventsListener(eventMap.dxpointerdown, addPointer); + addEventsListener(eventMap.dxpointermove, updatePointer); + addEventsListener(eventMap.dxpointerup, removePointer); + addEventsListener(eventMap.dxpointercancel, removePointer); + + this.pointers = function () { + return pointers; + }; + + this.reset = function () { + pointers = []; + }; }; export default Observer; diff --git a/packages/devextreme/js/__internal/events/pointer/m_touch.ts b/packages/devextreme/js/__internal/events/pointer/m_touch.ts index 6b2969bf8d45..a5190c7bd410 100644 --- a/packages/devextreme/js/__internal/events/pointer/m_touch.ts +++ b/packages/devextreme/js/__internal/events/pointer/m_touch.ts @@ -1,67 +1,65 @@ -import devices from '../../core/devices'; -import { extend } from '../../core/utils/extend'; -import { each } from '../../core/utils/iterator'; -import BaseStrategy from './base'; +import devices from '@js/core/devices'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import BaseStrategy from '@js/events/pointer/base'; const eventMap = { - 'dxpointerdown': 'touchstart', - 'dxpointermove': 'touchmove', - 'dxpointerup': 'touchend', - 'dxpointercancel': 'touchcancel', - 'dxpointerover': '', - 'dxpointerout': '', - 'dxpointerenter': '', - 'dxpointerleave': '' + dxpointerdown: 'touchstart', + dxpointermove: 'touchmove', + dxpointerup: 'touchend', + dxpointercancel: 'touchcancel', + dxpointerover: '', + dxpointerout: '', + dxpointerenter: '', + dxpointerleave: '', }; +const normalizeTouchEvent = function (e) { + const pointers: any = []; -const normalizeTouchEvent = function(e) { - const pointers = []; + each(e.touches, (_, touch) => { + pointers.push(extend({ + pointerId: touch.identifier, + }, touch)); + }); - each(e.touches, function(_, touch) { - pointers.push(extend({ - pointerId: touch.identifier - }, touch)); - }); - - return { - pointers: pointers, - pointerId: e.changedTouches[0].identifier - }; + return { + pointers, + pointerId: e.changedTouches[0].identifier, + }; }; -const skipTouchWithSameIdentifier = function(pointerEvent) { - return devices.real().platform === 'ios' && (pointerEvent === 'dxpointerdown' || pointerEvent === 'dxpointerup'); +const skipTouchWithSameIdentifier = function (pointerEvent) { + return devices.real().platform === 'ios' && (pointerEvent === 'dxpointerdown' || pointerEvent === 'dxpointerup'); }; const TouchStrategy = BaseStrategy.inherit({ - ctor: function() { - this.callBase.apply(this, arguments); - this._pointerId = 0; - }, + ctor() { + this.callBase.apply(this, arguments); + this._pointerId = 0; + }, - _handler: function(e) { - if(skipTouchWithSameIdentifier(this._eventName)) { - const touch = e.changedTouches[0]; + _handler(e) { + if (skipTouchWithSameIdentifier(this._eventName)) { + const touch = e.changedTouches[0]; - if(this._pointerId === touch.identifier && this._pointerId !== 0) { - return; - } + if (this._pointerId === touch.identifier && this._pointerId !== 0) { + return; + } - this._pointerId = touch.identifier; - } + this._pointerId = touch.identifier; + } - return this.callBase.apply(this, arguments); - }, + return this.callBase.apply(this, arguments); + }, - _fireEvent: function(args) { - return this.callBase(extend(normalizeTouchEvent(args.originalEvent), args)); - } + _fireEvent(args) { + return this.callBase(extend(normalizeTouchEvent(args.originalEvent), args)); + }, }); -TouchStrategy.map = eventMap; -TouchStrategy.normalize = normalizeTouchEvent; - +(TouchStrategy as any).map = eventMap; +(TouchStrategy as any).normalize = normalizeTouchEvent; export default TouchStrategy; diff --git a/packages/devextreme/js/__internal/events/utils/index.ts b/packages/devextreme/js/__internal/events/utils/index.ts index 3b24393d0fa5..eb880c98930d 100644 --- a/packages/devextreme/js/__internal/events/utils/index.ts +++ b/packages/devextreme/js/__internal/events/utils/index.ts @@ -1,196 +1,209 @@ -import $ from '../../core/renderer'; -import mappedAddNamespace from './add_namespace'; -import eventsEngine from '../core/events_engine'; -import { each } from '../../core/utils/iterator'; -import { extend } from '../../core/utils/extend'; -import { focused } from '../../ui/widget/selectors'; +/* eslint-disable @typescript-eslint/no-invalid-this */ +/* eslint-disable consistent-return */ +import $ from '@js/core/renderer'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import eventsEngine from '@js/events/core/events_engine'; +import { focused } from '@js/ui/widget/selectors'; + +import mappedAddNamespace from './m_add_namespace'; const KEY_MAP = { - 'backspace': 'backspace', - 'tab': 'tab', - 'enter': 'enter', - 'escape': 'escape', - 'pageup': 'pageUp', - 'pagedown': 'pageDown', - 'end': 'end', - 'home': 'home', - 'arrowleft': 'leftArrow', - 'arrowup': 'upArrow', - 'arrowright': 'rightArrow', - 'arrowdown': 'downArrow', - 'delete': 'del', - ' ': 'space', - 'f': 'F', - 'a': 'A', - '*': 'asterisk', - '-': 'minus', - 'alt': 'alt', - 'control': 'control', - 'shift': 'shift', + backspace: 'backspace', + tab: 'tab', + enter: 'enter', + escape: 'escape', + pageup: 'pageUp', + pagedown: 'pageDown', + end: 'end', + home: 'home', + arrowleft: 'leftArrow', + arrowup: 'upArrow', + arrowright: 'rightArrow', + arrowdown: 'downArrow', + delete: 'del', + ' ': 'space', + f: 'F', + a: 'A', + '*': 'asterisk', + '-': 'minus', + alt: 'alt', + control: 'control', + shift: 'shift', }; const LEGACY_KEY_CODES = { - // iOS 10.2 and lower didn't supports KeyboardEvent.key - '8': 'backspace', - '9': 'tab', - '13': 'enter', - '27': 'escape', - '33': 'pageUp', - '34': 'pageDown', - '35': 'end', - '36': 'home', - '37': 'leftArrow', - '38': 'upArrow', - '39': 'rightArrow', - '40': 'downArrow', - '46': 'del', - '32': 'space', - '70': 'F', - '65': 'A', - '106': 'asterisk', - '109': 'minus', - '189': 'minus', - '173': 'minus', - '16': 'shift', - '17': 'control', - '18': 'alt' + // iOS 10.2 and lower didn't supports KeyboardEvent.key + 8: 'backspace', + 9: 'tab', + 13: 'enter', + 27: 'escape', + 33: 'pageUp', + 34: 'pageDown', + 35: 'end', + 36: 'home', + 37: 'leftArrow', + 38: 'upArrow', + 39: 'rightArrow', + 40: 'downArrow', + 46: 'del', + 32: 'space', + 70: 'F', + 65: 'A', + 106: 'asterisk', + 109: 'minus', + 189: 'minus', + 173: 'minus', + 16: 'shift', + 17: 'control', + 18: 'alt', }; const EVENT_SOURCES_REGEX = { - dx: /^dx/i, - mouse: /(mouse|wheel)/i, - touch: /^touch/i, - keyboard: /^key/i, - pointer: /^(ms)?pointer/i + dx: /^dx/i, + mouse: /(mouse|wheel)/i, + touch: /^touch/i, + keyboard: /^key/i, + pointer: /^(ms)?pointer/i, }; -let fixMethod = e => e; -const copyEvent = originalEvent => fixMethod(eventsEngine.Event(originalEvent, originalEvent), originalEvent); -const isDxEvent = e => eventSource(e) === 'dx'; -const isNativeMouseEvent = e => eventSource(e) === 'mouse'; -const isNativeTouchEvent = e => eventSource(e) === 'touch'; - export const eventSource = ({ type }) => { - let result = 'other'; - - each(EVENT_SOURCES_REGEX, function(key) { - if(this.test(type)) { - result = key; + let result = 'other'; + /* eslint-disable @typescript-eslint/no-invalid-void-type */ + each(EVENT_SOURCES_REGEX, function (key): boolean | void { + if (this.test(type)) { + result = key; - return false; - } - }); + return false; + } + }); - return result; + return result; }; -export const isPointerEvent = e => eventSource(e) === 'pointer'; +let fixMethod = (e) => e; +// @ts-expect-error +const getEvent = (originalEvent) => eventsEngine.Event(originalEvent, originalEvent); +// @ts-expect-error +const copyEvent = (originalEvent) => fixMethod(getEvent(originalEvent), originalEvent); + +const isDxEvent = (e) => eventSource(e) === 'dx'; +const isNativeMouseEvent = (e) => eventSource(e) === 'mouse'; +const isNativeTouchEvent = (e) => eventSource(e) === 'touch'; -export const isMouseEvent = e => isNativeMouseEvent(e) || - ((isPointerEvent(e) || isDxEvent(e)) && e.pointerType === 'mouse'); +export const isPointerEvent = (e) => eventSource(e) === 'pointer'; -export const isDxMouseWheelEvent = e => e && e.type === 'dxmousewheel'; +export const isMouseEvent = (e) => isNativeMouseEvent(e) + || ((isPointerEvent(e) || isDxEvent(e)) && e.pointerType === 'mouse'); -export const isTouchEvent = e => isNativeTouchEvent(e) || - ((isPointerEvent(e) || isDxEvent(e)) && e.pointerType === 'touch'); +export const isDxMouseWheelEvent = (e) => e && e.type === 'dxmousewheel'; -export const isKeyboardEvent = e => eventSource(e) === 'keyboard'; +export const isTouchEvent = (e) => isNativeTouchEvent(e) + || ((isPointerEvent(e) || isDxEvent(e)) && e.pointerType === 'touch'); -export const isFakeClickEvent = ({ screenX, offsetX, pageX }) => screenX === 0 && !offsetX && pageX === 0; +export const isKeyboardEvent = (e) => eventSource(e) === 'keyboard'; + +export const isFakeClickEvent = ({ + screenX, + offsetX, + pageX, +}) => screenX === 0 && !offsetX && pageX === 0; export const eventData = ({ pageX, pageY, timeStamp }) => ({ - x: pageX, - y: pageY, - time: timeStamp + x: pageX, + y: pageY, + time: timeStamp, }); export const eventDelta = (from, to) => ({ - x: to.x - from.x, - y: to.y - from.y, - time: to.time - from.time || 1 + x: to.x - from.x, + y: to.y - from.y, + time: to.time - from.time || 1, }); -export const hasTouches = e => { - const { originalEvent, pointers } = e; +export const hasTouches = (e) => { + const { originalEvent, pointers } = e; - if(isNativeTouchEvent(e)) { - return (originalEvent.touches || []).length; - } + if (isNativeTouchEvent(e)) { + return (originalEvent.touches || []).length; + } - if(isDxEvent(e)) { - return (pointers || []).length; - } + if (isDxEvent(e)) { + return (pointers || []).length; + } - return 0; + return 0; }; // TODO: for tests let skipEvents = false; -export const forceSkipEvents = () => skipEvents = true; -export const stopEventsSkipping = () => skipEvents = false; - -export const needSkipEvent = e => { - // TODO: for tests - if(skipEvents) { - return true; +export const forceSkipEvents = () => { skipEvents = true; }; +export const stopEventsSkipping = () => { skipEvents = false; }; + +export const needSkipEvent = (e) => { + // TODO: for tests + if (skipEvents) { + return true; + } + + // TODO: this checking used in swipeable first move handler. is it correct? + const { target } = e; + const $target = $(target); + const isContentEditable = target?.isContentEditable || target?.hasAttribute('contenteditable'); + const touchInEditable = $target.is('input, textarea, select') || isContentEditable; + + if (isDxMouseWheelEvent(e)) { + const isTextArea = $target.is('textarea') && $target.hasClass('dx-texteditor-input'); + + if (isTextArea || isContentEditable) { + return false; } - // TODO: this checking used in swipeable first move handler. is it correct? - const { target } = e; - const $target = $(target); - const isContentEditable = target?.isContentEditable || target?.hasAttribute('contenteditable'); - const touchInEditable = $target.is('input, textarea, select') || isContentEditable; + const isInputFocused = $target.is('input[type=\'number\'], textarea, select') && $target.is(':focus'); - if(isDxMouseWheelEvent(e)) { - const isTextArea = $target.is('textarea') && $target.hasClass('dx-texteditor-input'); + return isInputFocused; + } - if(isTextArea || isContentEditable) { - return false; - } + if (isMouseEvent(e)) { + return touchInEditable || e.which > 1; // only left mouse button + } - const isInputFocused = $target.is('input[type=\'number\'], textarea, select') && $target.is(':focus'); - - return isInputFocused; - } - - if(isMouseEvent(e)) { - return touchInEditable || e.which > 1; // only left mouse button - } - - if(isTouchEvent(e)) { - return touchInEditable && focused($target); - } + if (isTouchEvent(e)) { + return touchInEditable && focused($target); + } }; -export const setEventFixMethod = func => fixMethod = func; +export const setEventFixMethod = (func) => { fixMethod = func; }; export const createEvent = (originalEvent, args) => { - const event = copyEvent(originalEvent); + const event = copyEvent(originalEvent); - args && extend(event, args); + if (args) { + extend(event, args); + } - return event; + return event; }; -export const fireEvent = props => { - const { originalEvent, delegateTarget } = props; - const event = createEvent(originalEvent, props); - - eventsEngine.trigger(delegateTarget || event.target, event); +export const fireEvent = (props) => { + const { originalEvent, delegateTarget } = props; + const event = createEvent(originalEvent, props); + // @ts-expect-error + eventsEngine.trigger(delegateTarget || event.target, event); - return event; + return event; }; export const normalizeKeyName = ({ key, which }) => { - const normalizedKey = KEY_MAP[key?.toLowerCase()] || key; - const normalizedKeyFromWhich = LEGACY_KEY_CODES[which]; - if(normalizedKeyFromWhich && normalizedKey === key) { - return normalizedKeyFromWhich; - } else if(!normalizedKey && which) { - return String.fromCharCode(which); - } - - return normalizedKey; + const normalizedKey = KEY_MAP[key?.toLowerCase()] || key; + const normalizedKeyFromWhich = LEGACY_KEY_CODES[which]; + if (normalizedKeyFromWhich && normalizedKey === key) { + return normalizedKeyFromWhich; + } if (!normalizedKey && which) { + return String.fromCharCode(which); + } + + return normalizedKey; }; export const getChar = ({ key, which }) => key || String.fromCharCode(which); diff --git a/packages/devextreme/js/__internal/events/utils/m_add_namespace.ts b/packages/devextreme/js/__internal/events/utils/m_add_namespace.ts index c41b78ce9a03..f1f64eb8702c 100644 --- a/packages/devextreme/js/__internal/events/utils/m_add_namespace.ts +++ b/packages/devextreme/js/__internal/events/utils/m_add_namespace.ts @@ -1,21 +1,21 @@ -import errors from '../../core/errors'; +import errors from '@js/core/errors'; const addNamespace = (eventNames, namespace) => { - if(!namespace) { - throw errors.Error('E0017'); - } + if (!namespace) { + throw errors.Error('E0017'); + } - if(Array.isArray(eventNames)) { - return eventNames - .map(eventName => addNamespace(eventName, namespace)) - .join(' '); - } + if (Array.isArray(eventNames)) { + return eventNames + .map((eventName) => addNamespace(eventName, namespace)) + .join(' '); + } - if(eventNames.indexOf(' ') !== -1) { - return addNamespace(eventNames.split(/\s+/g), namespace); - } + if (eventNames.indexOf(' ') !== -1) { + return addNamespace(eventNames.split(/\s+/g), namespace); + } - return `${eventNames}.${namespace}`; + return `${eventNames}.${namespace}`; }; export default addNamespace; diff --git a/packages/devextreme/js/__internal/events/utils/m_event_nodes_disposing.ts b/packages/devextreme/js/__internal/events/utils/m_event_nodes_disposing.ts index ae6513a267ba..6d987c8aed01 100644 --- a/packages/devextreme/js/__internal/events/utils/m_event_nodes_disposing.ts +++ b/packages/devextreme/js/__internal/events/utils/m_event_nodes_disposing.ts @@ -1,19 +1,20 @@ -import eventsEngine from '../core/events_engine'; -import { removeEvent } from '../remove'; +import eventsEngine from '@js/events/core/events_engine'; +import { removeEvent } from '@js/events/remove'; function nodesByEvent(event) { - return event && [ - event.target, - event.delegateTarget, - event.relatedTarget, - event.currentTarget - ].filter(node => !!node); + return event && [ + event.target, + event.delegateTarget, + event.relatedTarget, + event.currentTarget, + ].filter((node) => !!node); } export const subscribeNodesDisposing = (event, callback) => { - eventsEngine.one(nodesByEvent(event), removeEvent, callback); + // @ts-expect-error + eventsEngine.one(nodesByEvent(event), removeEvent, callback); }; export const unsubscribeNodesDisposing = (event, callback) => { - eventsEngine.off(nodesByEvent(event), removeEvent, callback); + eventsEngine.off(nodesByEvent(event), removeEvent, callback); }; diff --git a/packages/devextreme/js/__internal/events/utils/m_event_target.ts b/packages/devextreme/js/__internal/events/utils/m_event_target.ts index cb8c63726e6b..28224cf5f616 100644 --- a/packages/devextreme/js/__internal/events/utils/m_event_target.ts +++ b/packages/devextreme/js/__internal/events/utils/m_event_target.ts @@ -1,18 +1,18 @@ export const getEventTarget = (event) => { - const originalEvent = event.originalEvent; + const { originalEvent } = event; - if(!originalEvent) { - return event.target; - } + if (!originalEvent) { + return event.target; + } - const isShadowDOMUsed = Boolean(originalEvent.target?.shadowRoot); + const isShadowDOMUsed = Boolean(originalEvent.target?.shadowRoot); - if(!isShadowDOMUsed) { - return originalEvent.target; - } + if (!isShadowDOMUsed) { + return originalEvent.target; + } - const path = originalEvent.path ?? originalEvent.composedPath?.(); - const target = path?.[0] ?? event.target; + const path = originalEvent.path ?? originalEvent.composedPath?.(); + const target = path?.[0] ?? event.target; - return target; + return target; }; diff --git a/packages/devextreme/js/events/click.js b/packages/devextreme/js/events/click.js new file mode 100644 index 000000000000..b11d13e812b5 --- /dev/null +++ b/packages/devextreme/js/events/click.js @@ -0,0 +1,8 @@ +/** + * @name UI Events.dxclick + * @type eventType + * @type_function_param1 event:event + * @module events/click +*/ + +export * from '../__internal/events/m_click'; diff --git a/packages/devextreme/js/events/contextmenu.js b/packages/devextreme/js/events/contextmenu.js new file mode 100644 index 000000000000..d8c4c5830d05 --- /dev/null +++ b/packages/devextreme/js/events/contextmenu.js @@ -0,0 +1,8 @@ +/** + * @name UI Events.dxcontextmenu + * @type eventType + * @type_function_param1 event:event + * @module events/contextmenu +*/ + +export * from '../__internal/events/m_contextmenu'; diff --git a/packages/devextreme/js/events/core/emitter.feedback.js b/packages/devextreme/js/events/core/emitter.feedback.js new file mode 100644 index 000000000000..f086130e30a5 --- /dev/null +++ b/packages/devextreme/js/events/core/emitter.feedback.js @@ -0,0 +1 @@ +export * from '../../__internal/events/core/m_emitter.feedback'; diff --git a/packages/devextreme/js/events/core/emitter.js b/packages/devextreme/js/events/core/emitter.js new file mode 100644 index 000000000000..223a042f3077 --- /dev/null +++ b/packages/devextreme/js/events/core/emitter.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_emitter'; diff --git a/packages/devextreme/js/events/core/emitter_registrator.js b/packages/devextreme/js/events/core/emitter_registrator.js new file mode 100644 index 000000000000..c9f061241a98 --- /dev/null +++ b/packages/devextreme/js/events/core/emitter_registrator.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_emitter_registrator'; diff --git a/packages/devextreme/js/events/core/event_registrator.js b/packages/devextreme/js/events/core/event_registrator.js new file mode 100644 index 000000000000..4de26caede8d --- /dev/null +++ b/packages/devextreme/js/events/core/event_registrator.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_event_registrator'; diff --git a/packages/devextreme/js/events/core/events_engine.js b/packages/devextreme/js/events/core/events_engine.js new file mode 100644 index 000000000000..a8e5d0c5e304 --- /dev/null +++ b/packages/devextreme/js/events/core/events_engine.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_events_engine'; diff --git a/packages/devextreme/js/events/core/hook_touch_props.js b/packages/devextreme/js/events/core/hook_touch_props.js new file mode 100644 index 000000000000..96daa6e79e09 --- /dev/null +++ b/packages/devextreme/js/events/core/hook_touch_props.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_hook_touch_props'; diff --git a/packages/devextreme/js/events/core/keyboard_processor.js b/packages/devextreme/js/events/core/keyboard_processor.js new file mode 100644 index 000000000000..d7e367d4c144 --- /dev/null +++ b/packages/devextreme/js/events/core/keyboard_processor.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/core/m_keyboard_processor'; diff --git a/packages/devextreme/js/events/core/wheel.js b/packages/devextreme/js/events/core/wheel.js new file mode 100644 index 000000000000..c9d2e35c81d2 --- /dev/null +++ b/packages/devextreme/js/events/core/wheel.js @@ -0,0 +1 @@ +export * from '../../__internal/events/core/m_wheel'; diff --git a/packages/devextreme/js/events/double_click.js b/packages/devextreme/js/events/double_click.js index f095c10cda89..3e0cf4edb96e 100644 --- a/packages/devextreme/js/events/double_click.js +++ b/packages/devextreme/js/events/double_click.js @@ -1,4 +1,4 @@ -import { name, dblClick } from '../__internal/events/dblclick'; +import { name, dblClick } from '../__internal/events/m_dblclick'; import registerEvent from './core/event_registrator'; registerEvent(name, dblClick); diff --git a/packages/devextreme/js/events/drag.js b/packages/devextreme/js/events/drag.js new file mode 100644 index 000000000000..c03bdb173853 --- /dev/null +++ b/packages/devextreme/js/events/drag.js @@ -0,0 +1,45 @@ +/** +* @name UI Events.dxdragenter +* @type eventType +* @type_function_param1 event:event +* @type_function_param1_field1 draggingElement:Element +* @module events/drag +*/ +/** +* @name UI Events.dxdrop +* @type eventType +* @type_function_param1 event:event +* @type_function_param1_field1 draggingElement:Element +* @module events/drag +*/ +/** +* @name UI Events.dxdragleave +* @type eventType +* @type_function_param1 event:event +* @type_function_param1_field1 draggingElement:Element +* @module events/drag +*/ +/** + * @name UI Events.dxdragstart + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 cancel:boolean + * @module events/drag +*/ +/** + * @name UI Events.dxdrag + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 offset:number + * @type_function_param1_field2 cancel:boolean + * @module events/drag +*/ +/** + * @name UI Events.dxdragend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 offset:number + * @type_function_param1_field2 cancel:boolean + * @module events/drag +*/ +export * from '../__internal/events/m_drag'; diff --git a/packages/devextreme/js/events/gesture/emitter.gesture.js b/packages/devextreme/js/events/gesture/emitter.gesture.js new file mode 100644 index 000000000000..bacdf0ee957e --- /dev/null +++ b/packages/devextreme/js/events/gesture/emitter.gesture.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/gesture/m_emitter.gesture'; diff --git a/packages/devextreme/js/events/gesture/emitter.gesture.scroll.js b/packages/devextreme/js/events/gesture/emitter.gesture.scroll.js new file mode 100644 index 000000000000..d3ae4e160f92 --- /dev/null +++ b/packages/devextreme/js/events/gesture/emitter.gesture.scroll.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/gesture/m_emitter.gesture.scroll'; diff --git a/packages/devextreme/js/events/gesture/swipeable.js b/packages/devextreme/js/events/gesture/swipeable.js new file mode 100644 index 000000000000..e6d44d8d75e9 --- /dev/null +++ b/packages/devextreme/js/events/gesture/swipeable.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/gesture/m_swipeable'; diff --git a/packages/devextreme/js/events/hold.js b/packages/devextreme/js/events/hold.js new file mode 100644 index 000000000000..2174679ed7e7 --- /dev/null +++ b/packages/devextreme/js/events/hold.js @@ -0,0 +1,8 @@ +/** + * @name UI Events.dxhold + * @type eventType + * @type_function_param1 event:event + * @module events/hold +*/ + +export { default } from '../__internal/events/m_hold'; diff --git a/packages/devextreme/js/events/hover.js b/packages/devextreme/js/events/hover.js new file mode 100644 index 000000000000..e603188362d0 --- /dev/null +++ b/packages/devextreme/js/events/hover.js @@ -0,0 +1,15 @@ +/** + * @name UI Events.dxhoverstart + * @type eventType + * @type_function_param1 event:event + * @module events/hover +*/ + +/** + * @name UI Events.dxhoverend + * @type eventType + * @type_function_param1 event:event + * @module events/hover +*/ + +export * from '../__internal/events/m_hover'; diff --git a/packages/devextreme/js/events/pointer.js b/packages/devextreme/js/events/pointer.js new file mode 100644 index 000000000000..76b7978e98d7 --- /dev/null +++ b/packages/devextreme/js/events/pointer.js @@ -0,0 +1,58 @@ +/** + * @name UI Events.dxpointerdown + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointermove + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointerup + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointercancel + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointerover + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointerout + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointerenter + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ +/** + * @name UI Events.dxpointerleave + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 pointerType:string + * @module events/pointer +*/ + +export { default } from '../__internal/events/m_pointer'; diff --git a/packages/devextreme/js/events/pointer/base.js b/packages/devextreme/js/events/pointer/base.js new file mode 100644 index 000000000000..305dab9967e0 --- /dev/null +++ b/packages/devextreme/js/events/pointer/base.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/pointer/m_base'; diff --git a/packages/devextreme/js/events/pointer/mouse.js b/packages/devextreme/js/events/pointer/mouse.js new file mode 100644 index 000000000000..aaded4766988 --- /dev/null +++ b/packages/devextreme/js/events/pointer/mouse.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/pointer/m_mouse'; diff --git a/packages/devextreme/js/events/pointer/mouse_and_touch.js b/packages/devextreme/js/events/pointer/mouse_and_touch.js new file mode 100644 index 000000000000..dde0522c0306 --- /dev/null +++ b/packages/devextreme/js/events/pointer/mouse_and_touch.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/pointer/m_mouse_and_touch'; diff --git a/packages/devextreme/js/events/pointer/observer.js b/packages/devextreme/js/events/pointer/observer.js new file mode 100644 index 000000000000..6b5fefe472db --- /dev/null +++ b/packages/devextreme/js/events/pointer/observer.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/pointer/m_observer'; diff --git a/packages/devextreme/js/events/pointer/touch.js b/packages/devextreme/js/events/pointer/touch.js new file mode 100644 index 000000000000..f41aa71ccc75 --- /dev/null +++ b/packages/devextreme/js/events/pointer/touch.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/pointer/m_touch'; diff --git a/packages/devextreme/js/events/remove.js b/packages/devextreme/js/events/remove.js new file mode 100644 index 000000000000..b475e099cbec --- /dev/null +++ b/packages/devextreme/js/events/remove.js @@ -0,0 +1,8 @@ +/** + * @name UI Events.dxremove + * @type eventType + * @type_function_param1 event:event + * @module events/remove +*/ + +export * from '../__internal/events/m_remove'; diff --git a/packages/devextreme/js/events/short.js b/packages/devextreme/js/events/short.js new file mode 100644 index 000000000000..70e38ebf6b7b --- /dev/null +++ b/packages/devextreme/js/events/short.js @@ -0,0 +1 @@ +export * from '../__internal/events/m_short'; diff --git a/packages/devextreme/js/events/swipe.js b/packages/devextreme/js/events/swipe.js new file mode 100644 index 000000000000..31e61bbd529e --- /dev/null +++ b/packages/devextreme/js/events/swipe.js @@ -0,0 +1,25 @@ +/** + * @name UI Events.dxswipestart + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 cancel:boolean + * @module events/swipe +*/ +/** + * @name UI Events.dxswipe + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 offset:number + * @type_function_param1_field2 cancel:boolean + * @module events/swipe +*/ +/** + * @name UI Events.dxswipeend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 offset:number + * @type_function_param1_field2 targetOffset:number + * @module events/swipe +*/ + +export * from '../__internal/events/m_swipe'; diff --git a/packages/devextreme/js/events/transform.js b/packages/devextreme/js/events/transform.js new file mode 100644 index 000000000000..db22a4cec363 --- /dev/null +++ b/packages/devextreme/js/events/transform.js @@ -0,0 +1,133 @@ +import { exportNames } from '../__internal/events/m_transform'; + +/** + * @name UI Events.dxtransformstart + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxtransform + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 scale:number + * @type_function_param1_field2 deltaScale:number + * @type_function_param1_field3 rotation:number + * @type_function_param1_field4 deltaRotation:number + * @type_function_param1_field5 translation:object + * @type_function_param1_field6 deltaTranslation:object + * @type_function_param1_field7 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxtransformend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 scale:number + * @type_function_param1_field2 deltaScale:number + * @type_function_param1_field3 rotation:number + * @type_function_param1_field4 deltaRotation:number + * @type_function_param1_field5 translation:object + * @type_function_param1_field6 deltaTranslation:object + * @type_function_param1_field7 cancel:boolean + * @module events/transform +*/ + +/** + * @name UI Events.dxtranslatestart + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxtranslate + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 translation:object + * @type_function_param1_field2 deltaTranslation:object + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxtranslateend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 translation:object + * @type_function_param1_field2 deltaTranslation:object + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ + +/** +* @name UI Events.dxpinchstart +* @type eventType +* @type_function_param1 event:event +* @type_function_param1_field1 cancel:boolean +* @module events/transform + */ +/** + * @name UI Events.dxpinch + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 scale:number + * @type_function_param1_field2 deltaScale:number + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxpinchend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 scale:number + * @type_function_param1_field2 deltaScale:number + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ + +/** + * @name UI Events.dxrotatestart + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxrotate + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 rotation:number + * @type_function_param1_field2 deltaRotation:number + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ +/** + * @name UI Events.dxrotateend + * @type eventType + * @type_function_param1 event:event + * @type_function_param1_field1 rotation:number + * @type_function_param1_field2 deltaRotation:number + * @type_function_param1_field3 cancel:boolean + * @module events/transform +*/ + +/* eslint-disable spellcheck/spell-checker */ +export const { + transformstart, + transform, + transformend, + translatestart, + translate, + translateend, + zoomstart, + zoom, + zoomend, + pinchstart, + pinch, + pinchend, + rotatestart, + rotate, + rotateend, +} = exportNames; + diff --git a/packages/devextreme/js/events/utils/add_namespace.js b/packages/devextreme/js/events/utils/add_namespace.js new file mode 100644 index 000000000000..ffa6a046fa06 --- /dev/null +++ b/packages/devextreme/js/events/utils/add_namespace.js @@ -0,0 +1 @@ +export { default } from '../../__internal/events/utils/m_add_namespace'; diff --git a/packages/devextreme/js/events/utils/event_nodes_disposing.js b/packages/devextreme/js/events/utils/event_nodes_disposing.js new file mode 100644 index 000000000000..0dd3c94270d2 --- /dev/null +++ b/packages/devextreme/js/events/utils/event_nodes_disposing.js @@ -0,0 +1 @@ +export * from '../../__internal/events/utils/m_event_nodes_disposing'; diff --git a/packages/devextreme/js/events/utils/event_target.js b/packages/devextreme/js/events/utils/event_target.js new file mode 100644 index 000000000000..6b0f3d4dd2a0 --- /dev/null +++ b/packages/devextreme/js/events/utils/event_target.js @@ -0,0 +1 @@ +export * from '../../__internal/events/utils/m_event_target'; diff --git a/packages/devextreme/js/events/utils/index.js b/packages/devextreme/js/events/utils/index.js new file mode 100644 index 000000000000..4e21a47cee31 --- /dev/null +++ b/packages/devextreme/js/events/utils/index.js @@ -0,0 +1 @@ +export * from '../../__internal/events/utils/index'; diff --git a/packages/devextreme/js/events/visibility_change.js b/packages/devextreme/js/events/visibility_change.js new file mode 100644 index 000000000000..eae6f20c886a --- /dev/null +++ b/packages/devextreme/js/events/visibility_change.js @@ -0,0 +1,7 @@ +import VisibilityChangeModule from '../__internal/events/m_visibility_change'; + +export const triggerShownEvent = VisibilityChangeModule.triggerShownEvent; +export const triggerHidingEvent = VisibilityChangeModule.triggerHidingEvent; +export const triggerResizeEvent = VisibilityChangeModule.triggerResizeEvent; + +export default VisibilityChangeModule; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.events/dblclick.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.events/dblclick.tests.js index 8178c3e8966d..0d6d62db4230 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.events/dblclick.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.events/dblclick.tests.js @@ -1,6 +1,6 @@ const $ = require('jquery'); const dblclickEvent = require('events/dblclick'); -const { dblClick } = require('__internal/events/dblclick'); +const { dblClick } = require('__internal/events/m_dblclick'); const pointerMock = require('../../helpers/pointerMock.js'); QUnit.testStart(function() { @@ -44,7 +44,7 @@ QUnit.test('dxdblclick should not be handled on a usual dxclick even if dblClick el.off(dblclickEvent.name); el.on(dblclickEvent.name, handler); - el.on(dblclickEvent.name, () => {}); + el.on(dblclickEvent.name, () => { }); el.trigger('dxclick');