ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent redundant swipe events

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-21 13:33:14 +03:00
parent 1450fa4631
commit fe5bb69e1a
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/message/hooks/useOuterHandlers.ts
View File

@ -85,10 +85,6 @@ export default function useOuterHandlers(
markSwiped(); markSwiped();
return true; return true;
} else if (direction === SwipeDirection.Right) {
startedAt = undefined;
unmarkSwiped();
} }
return false; return false;

58
src/util/captureEvents.ts
View File

@ -44,7 +44,7 @@ const SWIPE_THRESHOLD = 50;
export function captureEvents(element: HTMLElement, options: CaptureOptions) { export function captureEvents(element: HTMLElement, options: CaptureOptions) {
let captureEvent: MouseEvent | RealTouchEvent | undefined; let captureEvent: MouseEvent | RealTouchEvent | undefined;
let hasMoved = false; let hasMoved = false;
let currentSwipeAxis: TSwipeAxis; let hasSwiped = false;
function onCapture(e: MouseEvent | RealTouchEvent) { function onCapture(e: MouseEvent | RealTouchEvent) {
if (options.excludedClosestSelector && ( if (options.excludedClosestSelector && (
@ -116,7 +116,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
} }
hasMoved = false; hasMoved = false;
currentSwipeAxis = undefined; hasSwiped = false;
} }
function onMove(e: MouseEvent | RealTouchEvent) { function onMove(e: MouseEvent | RealTouchEvent) {
@ -144,8 +144,9 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
shouldPreventScroll = options.onDrag(e, captureEvent, { dragOffsetX, dragOffsetY }); shouldPreventScroll = options.onDrag(e, captureEvent, { dragOffsetX, dragOffsetY });
} }
if (options.onSwipe) { if (options.onSwipe && !hasSwiped) {
shouldPreventScroll = onSwipe(e, dragOffsetX, dragOffsetY); hasSwiped = onSwipe(e, dragOffsetX, dragOffsetY);
shouldPreventScroll = hasSwiped;
} }
if (IS_TOUCH_ENV && shouldPreventScroll && options.selectorToPreventScroll) { if (IS_TOUCH_ENV && shouldPreventScroll && options.selectorToPreventScroll) {
@ -163,30 +164,33 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
if (IS_IOS) { if (IS_IOS) {
const x = (e as RealTouchEvent).touches[0].pageX; const x = (e as RealTouchEvent).touches[0].pageX;
if (x <= IOS_SCREEN_EDGE_THRESHOLD || x >= window.innerWidth - IOS_SCREEN_EDGE_THRESHOLD) { if (x <= IOS_SCREEN_EDGE_THRESHOLD || x >= window.innerWidth - IOS_SCREEN_EDGE_THRESHOLD) {
return undefined; return false;
} }
} }
if (!currentSwipeAxis) { const xAbs = Math.abs(dragOffsetX);
const xAbs = Math.abs(dragOffsetX); const yAbs = Math.abs(dragOffsetY);
const yAbs = Math.abs(dragOffsetY);
if (dragOffsetX && dragOffsetY) { if (dragOffsetX && dragOffsetY) {
const ratio = Math.max(xAbs, yAbs) / Math.min(xAbs, yAbs); const ratio = Math.max(xAbs, yAbs) / Math.min(xAbs, yAbs);
// Diagonal swipe // Diagonal swipe
if (ratio < 2) { if (ratio < 2) {
return undefined; return false;
}
}
if (xAbs >= SWIPE_THRESHOLD) {
currentSwipeAxis = 'x';
} else if (yAbs >= SWIPE_THRESHOLD) {
currentSwipeAxis = 'y';
} }
} }
return processSwipe(e, currentSwipeAxis, dragOffsetX, dragOffsetY, options.onSwipe!); let axis: TSwipeAxis | undefined;
if (xAbs >= SWIPE_THRESHOLD) {
axis = 'x';
} else if (yAbs >= SWIPE_THRESHOLD) {
axis = 'y';
}
if (!axis) {
return false;
}
return processSwipe(e, axis, dragOffsetX, dragOffsetY, options.onSwipe!);
} }
element.addEventListener('mousedown', onCapture); element.addEventListener('mousedown', onCapture);
@ -205,19 +209,21 @@ function processSwipe(
dragOffsetY: number, dragOffsetY: number,
onSwipe: (e: Event, direction: SwipeDirection) => boolean | void, onSwipe: (e: Event, direction: SwipeDirection) => boolean | void,
) { ) {
let isSwiped: boolean | void = false;
if (currentSwipeAxis === 'x') { if (currentSwipeAxis === 'x') {
if (dragOffsetX < 0) { if (dragOffsetX < 0) {
return onSwipe(e, SwipeDirection.Left); isSwiped = onSwipe(e, SwipeDirection.Left);
} else { } else {
return onSwipe(e, SwipeDirection.Right); isSwiped = onSwipe(e, SwipeDirection.Right);
} }
} else if (currentSwipeAxis === 'y') { } else if (currentSwipeAxis === 'y') {
if (dragOffsetY < 0) { if (dragOffsetY < 0) {
return onSwipe(e, SwipeDirection.Up); isSwiped = onSwipe(e, SwipeDirection.Up);
} else { } else {
return onSwipe(e, SwipeDirection.Down); isSwiped = onSwipe(e, SwipeDirection.Down);
} }
} }
return undefined; return isSwiped === undefined ? true : isSwiped;
} }