From ba3ab44ef3327fbe279acd89f26032d614f47fc1 Mon Sep 17 00:00:00 2001 From: qcigano Date: Mon, 3 Aug 2026 01:12:46 +0200 Subject: [PATCH] =?UTF-8?q?Fotos=20mit=20dem=20Finger=20wischen=20(Swipe)?= =?UTF-8?q?=20=E2=80=94=20auf=20jeder=20Karte,=20=C3=BCberall=20auf=20der?= =?UTF-8?q?=20Seite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Das Foto-Karussell auf den Produktkarten (Shop-Grid, Startseite, Sale, Charakter-Kacheln, "Weitere Modelle" — überall wo ProductCard.astro verwendet wird) lässt sich jetzt zusätzlich zu den ‹/›-Pfeilen auch per Wisch-Geste bedienen: Finger auf dem Handy oder Maus ziehen am PC. Technisch über die Pointer-Events-API (deckt Touch UND Maus mit derselben Logik ab). Ein Wisch zählt erst ab einer Mindeststrecke und nur bei überwiegend horizontaler Bewegung, damit normales Scrollen der Seite nicht versehentlich als Wisch missverstanden wird. Da die ganze Karte ein Link ist, wird der nachfolgende Klick nach einem echten Wisch unterdrückt — sonst würde man ungewollt zur Produktseite springen, nur weil man durch die Fotos blättern wollte. Gleiches Wischen jetzt auch auf der Produktdetailseite selbst, für das große Hauptbild (springt zum nächsten/vorherigen Thumbnail). Verifiziert: Wisch ändert das Bild UND verhindert nachweislich die Navigation; normale Klicks navigieren weiterhin korrekt; die Pfeil- Buttons funktionieren unverändert (kein Regressionsfehler). Co-Authored-By: Claude Sonnet 5 --- src/components/ProductCard.astro | 43 +++++++++++++++++++++++++++++++- src/pages/produkt/[slug].astro | 19 +++++++++++++- 2 files changed, 60 insertions(+), 2 deletions(-) diff --git a/src/components/ProductCard.astro b/src/components/ProductCard.astro index 6b19ff0..0b6949d 100644 --- a/src/components/ProductCard.astro +++ b/src/components/ProductCard.astro @@ -96,11 +96,52 @@ const desc = product.beschreibung[lang]; karussellWechseln(media, current + Number(control.dataset.dir)); } }); + + // Wischen/Swipen (Finger auf dem Handy, Maus ziehen am PC) — überall auf der Seite, wo eine + // Produktkarte mit mehreren Fotos vorkommt. Pointer Events statt separater Touch-/Maus-Logik, + // damit EIN Code sowohl Finger als auch Maus abdeckt. Ein "Swipe" zählt erst ab einer gewissen + // Mindeststrecke (SWIPE_SCHWELLE) und nur, wenn die Bewegung überwiegend horizontal war — sonst + // würde normales Scrollen der Seite (vertikal) versehentlich als Wisch-Geste missverstanden. + const SWIPE_SCHWELLE = 40; + let wischStart: { media: Element; x: number; y: number } | null = null; + let letzterWischZeitpunkt = 0; + + document.addEventListener("pointerdown", (e) => { + const media = (e.target as HTMLElement).closest("[data-carousel]"); + if (!media) return; + if (media.querySelectorAll(".carousel-img").length <= 1) return; + wischStart = { media, x: e.clientX, y: e.clientY }; + }); + + document.addEventListener("pointerup", (e) => { + if (!wischStart) return; + const { media, x, y } = wischStart; + wischStart = null; + const dx = e.clientX - x; + const dy = e.clientY - y; + if (Math.abs(dx) < SWIPE_SCHWELLE || Math.abs(dx) < Math.abs(dy)) return; + letzterWischZeitpunkt = Date.now(); + const imgs = [...media.querySelectorAll(".carousel-img")]; + const current = Math.max(0, imgs.findIndex((img) => img.style.display !== "none")); + karussellWechseln(media, current + (dx < 0 ? 1 : -1)); + }); + + document.addEventListener("pointercancel", () => { wischStart = null; }); + + // Direkt nach einem echten Wisch darf der Klick NICHT mehr zur Produktseite weiterspringen + // (sonst landet man ungewollt auf der Produktseite, nur weil man das Foto durchblättern + // wollte). Capture-Phase, damit das VOR dem normalen Link-Klick des + // greift. Ein kurzes Zeitfenster (300ms) reicht, da Klick direkt nach dem Loslassen kommt. + document.addEventListener("click", (e) => { + if (Date.now() - letzterWischZeitpunkt > 300) return; + const link = (e.target as HTMLElement).closest("a.product-card"); + if (link) { e.preventDefault(); e.stopPropagation(); } + }, true);