Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: responsive: long press while scroll (#17555)

Browse Source
This commit is contained in:
Min Idzelis 2025-04-11 18:28:36 -04:00 committed by GitHub
parent e440cbe353
commit 8309b73a02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -24,6 +24,7 @@
import { fade } from 'svelte/transition';
import ImageThumbnail from './image-thumbnail.svelte';
import VideoThumbnail from './video-thumbnail.svelte';
import { onMount } from 'svelte';
interface Props {
asset: AssetResponseDto;
@ -127,24 +128,59 @@
mouseOver = false;
};
let timer: ReturnType<typeof setTimeout>;
const clearLongPressTimer = () => clearTimeout(timer);
let startX: number = 0;
let startY: number = 0;
function longPress(element: HTMLElement, { onLongPress }: { onLongPress: () => void }) {
let timer: ReturnType<typeof setTimeout>;
const start = (event: TouchEvent) => {
let didPress = false;
const start = (evt: TouchEvent) => {
startX = evt.changedTouches[0].clientX;
startY = evt.changedTouches[0].clientY;
didPress = false;
timer = setTimeout(() => {
onLongPress();
event.preventDefault();
didPress = true;
}, 350);
};
const end = () => clearTimeout(timer);
element.addEventListener('touchstart', start);
element.addEventListener('touchend', end);
const click = (e: MouseEvent) => {
if (!didPress) {
return;
}
e.stopPropagation();
e.preventDefault();
};
element.addEventListener('click', click);
element.addEventListener('touchstart', start, true);
element.addEventListener('touchend', clearLongPressTimer, true);
return {
destroy: () => {
element.removeEventListener('touchstart', start);
element.removeEventListener('touchend', end);
element.removeEventListener('click', click);
element.removeEventListener('touchstart', start, true);
element.removeEventListener('touchend', clearLongPressTimer, true);
},
};
}
function moveHandler(e: PointerEvent) {
var diffX = Math.abs(startX - e.clientX);
var diffY = Math.abs(startY - e.clientY);
if (diffX >= 10 || diffY >= 10) {
clearLongPressTimer();
}
}
onMount(() => {
document.addEventListener('scroll', clearLongPressTimer, true);
document.addEventListener('wheel', clearLongPressTimer, true);
document.addEventListener('contextmenu', clearLongPressTimer, true);
document.addEventListener('pointermove', moveHandler, true);
return () => {
document.removeEventListener('scroll', clearLongPressTimer, true);
document.removeEventListener('wheel', clearLongPressTimer, true);
document.removeEventListener('contextmenu', clearLongPressTimer, true);
document.removeEventListener('pointermove', moveHandler, true);
};
});
</script>
<div