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

Various fixes for drag and swipe gestures

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-21 13:33:21 +03:00
parent 62c0c735ea
commit 97479b4af6
3 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/left/settings/SettingsGeneralBackgroundColor.tsx
View File

@ -109,8 +109,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps & DispatchProps> = ({
setHsb(positions2hsb({ colorPosition, huePosition }, rectsRef.current!));
markIsDragging();
return true;
}
captureEvents(colorPickerRef.current!, {
@ -128,8 +126,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps & DispatchProps> = ({
setHsb(positions2hsb({ colorPosition, huePosition }, rectsRef.current!));
markIsDragging();
return true;
}
captureEvents(huePickerRef.current!, {

2
src/components/mediaViewer/MediaViewer.tsx
View File

@ -428,6 +428,8 @@ const MediaViewer: FC<StateProps & DispatchProps> = ({
} else if (!(e.target && (e.target as HTMLElement).closest('.MediaViewerFooter'))) {
close();
}
return true;
} : undefined,
});
}, [close, isFooterHidden, isGif, isPhoto, isZoomed, selectNextMedia, selectPreviousMedia]);

50
src/util/captureEvents.ts
View File

@ -17,8 +17,8 @@ interface CaptureOptions {
dragOffsetX: number;
dragOffsetY: number;
},
) => boolean | void;
onSwipe?: (e: Event, direction: SwipeDirection) => boolean | void;
) => void;
onSwipe?: (e: Event, direction: SwipeDirection) => boolean;
onClick?: (e: MouseEvent | TouchEvent) => void;
excludedClosestSelector?: string;
selectorToPreventScroll?: string;
@ -60,9 +60,12 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onRelease);
} else if (e.type === 'touchstart') {
document.addEventListener('touchmove', onMove);
document.addEventListener('touchend', onRelease);
document.addEventListener('touchcancel', onRelease);
// We need to always listen on `touchstart` target:
// https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed
const target = e.target as HTMLElement;
target.addEventListener('touchmove', onMove);
target.addEventListener('touchend', onRelease);
target.addEventListener('touchcancel', onRelease);
if ('touches' in e) {
if (e.pageX === undefined) {
@ -94,19 +97,19 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
document.removeEventListener('mouseup', onRelease);
document.removeEventListener('mousemove', onMove);
document.removeEventListener('touchcancel', onRelease);
document.removeEventListener('touchend', onRelease);
document.removeEventListener('touchmove', onMove);
(captureEvent.target as HTMLElement).removeEventListener('touchcancel', onRelease);
(captureEvent.target as HTMLElement).removeEventListener('touchend', onRelease);
(captureEvent.target as HTMLElement).removeEventListener('touchmove', onMove);
captureEvent = undefined;
if (hasMoved) {
if (IS_TOUCH_ENV && options.selectorToPreventScroll) {
Array.from(document.querySelectorAll<HTMLElement>(options.selectorToPreventScroll)).forEach((scrollable) => {
scrollable.style.overflow = '';
});
}
if (options.selectorToPreventScroll) {
Array.from(document.querySelectorAll<HTMLElement>(options.selectorToPreventScroll)).forEach((scrollable) => {
scrollable.style.overflow = '';
});
}
if (hasMoved) {
if (options.onRelease) {
options.onRelease(e);
}
@ -138,10 +141,11 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
hasMoved = true;
}
let shouldPreventScroll: boolean | void;
let shouldPreventScroll = false;
if (options.onDrag) {
shouldPreventScroll = options.onDrag(e, captureEvent, { dragOffsetX, dragOffsetY });
options.onDrag(e, captureEvent, { dragOffsetX, dragOffsetY });
shouldPreventScroll = true;
}
if (options.onSwipe && !hasSwiped) {
@ -207,23 +211,21 @@ function processSwipe(
currentSwipeAxis: TSwipeAxis,
dragOffsetX: number,
dragOffsetY: number,
onSwipe: (e: Event, direction: SwipeDirection) => boolean | void,
onSwipe: (e: Event, direction: SwipeDirection) => boolean,
) {
let isSwiped: boolean | void = false;
if (currentSwipeAxis === 'x') {
if (dragOffsetX < 0) {
isSwiped = onSwipe(e, SwipeDirection.Left);
return onSwipe(e, SwipeDirection.Left);
} else {
isSwiped = onSwipe(e, SwipeDirection.Right);
return onSwipe(e, SwipeDirection.Right);
}
} else if (currentSwipeAxis === 'y') {
if (dragOffsetY < 0) {
isSwiped = onSwipe(e, SwipeDirection.Up);
return onSwipe(e, SwipeDirection.Up);
} else {
isSwiped = onSwipe(e, SwipeDirection.Down);
return onSwipe(e, SwipeDirection.Down);
}
}
return isSwiped === undefined ? true : isSwiped;
return false;
}