From c1a0df8ba7b54f6997559725347f138ea424e568 Mon Sep 17 00:00:00 2001 From: "Rochmar Nicolas (DevExpress)" Date: Fri, 19 Jul 2024 11:18:22 +0800 Subject: [PATCH] Migrate swipe event to TS --- .../js/__internal/events/m_swipe.ts | 338 ++++++++---------- packages/devextreme/js/events/swipe.js | 25 ++ 2 files changed, 181 insertions(+), 182 deletions(-) create mode 100644 packages/devextreme/js/events/swipe.js 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/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';