polymech/site-template
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gallery:desktop swipe

Browse Source
This commit is contained in:
lovebird 2025-03-08 10:11:01 +01:00
parent 3f9798abca
commit a8c3918af6
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/polymech/GalleryK.astro
View File

@ -67,12 +67,19 @@ const alt_translated = await pMap(images, async (image) => {
lightboxLoaded: false, lightboxLoaded: false,
touchStartX: 0, touchStartX: 0,
touchEndX: 0, touchEndX: 0,
mouseStartX: 0,
mouseEndX: 0,
mouseIsDown: false,
minSwipeDistance: 50, minSwipeDistance: 50,
isSwiping: false, isSwiping: false,
images: ${JSON.stringify(images)}, images: ${JSON.stringify(images)},
handleSwipe() { handleSwipe(isMouseEvent = false) {
if (!this.isSwiping) return; if (!this.isSwiping && !this.mouseIsDown) return;
const swipeDistance = this.touchEndX - this.touchStartX;
const startX = isMouseEvent ? this.mouseStartX : this.touchStartX;
const endX = isMouseEvent ? this.mouseEndX : this.touchEndX;
const swipeDistance = endX - startX;
if (Math.abs(swipeDistance) >= this.minSwipeDistance) { if (Math.abs(swipeDistance) >= this.minSwipeDistance) {
if (swipeDistance > 0 && this.currentIndex > 0) { if (swipeDistance > 0 && this.currentIndex > 0) {
// Swiped right, show previous image // Swiped right, show previous image
@ -82,11 +89,13 @@ const alt_translated = await pMap(images, async (image) => {
this.currentIndex++; this.currentIndex++;
} }
} }
this.isSwiping = false; this.isSwiping = false;
this.mouseIsDown = false;
}, },
preloadAndOpen(index = null) { preloadAndOpen(index = null) {
// If we're in the middle of a swipe gesture, don't open the lightbox // If we're in the middle of a swipe gesture, don't open the lightbox
if (this.isSwiping) return; if (this.isSwiping || this.mouseIsDown) return;
// If an index is provided, update the current index // If an index is provided, update the current index
if (index !== null) { if (index !== null) {
@ -123,6 +132,10 @@ const alt_translated = await pMap(images, async (image) => {
@touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;" @touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;"
@touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();" @touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();"
@touchcancel="isSwiping = false;" @touchcancel="isSwiping = false;"
@mousedown="mouseStartX = $event.clientX; mouseIsDown = true; $event.preventDefault();"
@mousemove="if(mouseIsDown) { mouseEndX = $event.clientX; }"
@mouseup="if(mouseIsDown) { mouseEndX = $event.clientX; handleSwipe(true); }"
@mouseleave="mouseIsDown = false;"
> >
{images.map((image, index) => ( {images.map((image, index) => (
<div x-show={`currentIndex === ${index}`} key={index} class="w-full h-full flex items-center justify-center"> <div x-show={`currentIndex === ${index}`} key={index} class="w-full h-full flex items-center justify-center">
@ -193,6 +206,10 @@ const alt_translated = await pMap(images, async (image) => {
@touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;" @touchstart="touchStartX = $event.touches[0].clientX; isSwiping = true;"
@touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();" @touchend="touchEndX = $event.changedTouches[0].clientX; handleSwipe();"
@touchcancel="isSwiping = false;" @touchcancel="isSwiping = false;"
@mousedown="mouseStartX = $event.clientX; mouseIsDown = true; $event.preventDefault();"
@mousemove="if(mouseIsDown) { mouseEndX = $event.clientX; }"
@mouseup="if(mouseIsDown) { mouseEndX = $event.clientX; handleSwipe(true); }"
@mouseleave="mouseIsDown = false;"
> >
{images.map((image, index) => ( {images.map((image, index) => (
<div x-show={`currentIndex === ${index}`} key={index}> <div x-show={`currentIndex === ${index}`} key={index}>