From 30c893756657eb361859702c5435065b64f1b5e2 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 19:31:27 +0200
Subject: [PATCH] feat(dailies): replace custom lightbox with PhotoSwipe v5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops ~80 lines of fragile custom lightbox JS/HTML/CSS in favour of
PhotoSwipe v5 loaded from CDN. Slides are now <a> tags (the pswp-gallery
children) which always fire click events on iOS even inside scroll
containers — the root cause of the mobile tap issue. Pinch-to-zoom and
swipe-to-dismiss come for free. Dot sync kept as a separate vanilla JS
block.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css              | 64 +++----------
 .../intotheeast/templates/dailies.html.twig   | 89 ++++++-------------
 2 files changed, 39 insertions(+), 114 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index db7fd80..57b056a 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -202,13 +202,18 @@ body::after {
     color: var(--color-ink-muted);
 }
 
+.journal-photo-wrap {
+    position: relative;
+    margin-bottom: var(--space-3);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
 .journal-photo-strip {
     display: flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-3);
 }
 
 .journal-photo-strip::-webkit-scrollbar { display: none; }
@@ -218,11 +223,8 @@ body::after {
     scroll-snap-align: start;
     aspect-ratio: 4 / 3;
     overflow: hidden;
-    cursor: zoom-in;
-    background: none;
-    border: none;
-    padding: 0;
     display: block;
+    text-decoration: none;
 }
 
 .journal-photo-slide img {
@@ -230,11 +232,8 @@ body::after {
     height: 100%;
     object-fit: cover;
     display: block;
-    transition: opacity 0.15s;
 }
 
-.journal-photo-slide:hover img { opacity: 0.9; }
-
 .journal-photo-dots {
     display: flex;
     justify-content: center;
@@ -403,52 +402,9 @@ body::after {
 
 .gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
 
-/* ── Lightbox ────────────────────────────────────────────────────────────────── */
+/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
 
-.lightbox {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.94);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.lightbox[hidden] { display: none; }
-
-.lightbox-img {
-    max-width: 92vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: var(--radius-sm);
-    display: block;
-}
-
-.lightbox-close,
-.lightbox-prev,
-.lightbox-next {
-    position: absolute;
-    background: rgba(255,255,255,0.12);
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 44px;
-    height: 44px;
-    font-size: 1.4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-}
-
-.lightbox-close { top: 1rem; right: 1rem; }
-.lightbox-prev  { left: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-next  { right: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-close:hover,
-.lightbox-prev:hover,
-.lightbox-next:hover { background: rgba(255,255,255,0.26); }
+.pswp__bg { background: rgba(0,0,0,0.96); }
 
 /* ── Map page ────────────────────────────────────────────────────────────────── */
 
diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index a1fdaa2..3e547b1 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -121,12 +121,19 @@ feedMap.on('load', function () {
 
                 {% set images = entry.media.images %}
                 {% if images|length > 0 %}
-                <div class="journal-photo-strip" data-slides="{{ images|length }}">
-                    {% for img in images %}
-                    <button class="journal-photo-slide" data-full="{{ img.url }}" data-alt="{{ entry.title }}" aria-label="View photo">
-                        <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
-                    </button>
-                    {% endfor %}
+                {% do assets.addCss('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css') %}
+                <div class="journal-photo-wrap">
+                    <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
+                        {% for img in images %}
+                        <a class="journal-photo-slide"
+                           href="{{ img.url }}"
+                           data-pswp-width="{{ img.width }}"
+                           data-pswp-height="{{ img.height }}"
+                           target="_blank">
+                            <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
+                        </a>
+                        {% endfor %}
+                    </div>
                 </div>
                 {% if images|length > 1 %}
                 <div class="journal-photo-dots" aria-hidden="true">
@@ -164,73 +171,35 @@ feedMap.on('load', function () {
     {% endif %}
 </div>
 
-<div class="lightbox" id="feed-lightbox" role="dialog" aria-modal="true" aria-label="Photo viewer" hidden>
-    <button class="lightbox-close" id="feed-lb-close" aria-label="Close">✕</button>
-    <button class="lightbox-prev" id="feed-lb-prev" aria-label="Previous">‹</button>
-    <img class="lightbox-img" id="feed-lb-img" src="" alt="">
-    <button class="lightbox-next" id="feed-lb-next" aria-label="Next">›</button>
-</div>
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.init();
+</script>
 
 <script>
-/* ── Journal photo strip: dot sync + lightbox ───────────────── */
+/* ── Dot sync ────────────────────────────────────────────────── */
 (function () {
-    /* Dot sync */
-    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
-        var slides = strip.querySelectorAll('.journal-photo-slide');
-        var strip_id = strip.closest('article');
-        if (!strip_id) return;
-        var dots = strip_id.querySelectorAll('.journal-photo-dot');
+    document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+        var strip   = wrap.querySelector('.journal-photo-strip');
+        var slides  = Array.from(strip.querySelectorAll('.journal-photo-slide'));
+        var article = wrap.closest('article');
+        var dots    = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
         if (!dots.length) return;
         var io = new IntersectionObserver(function (entries) {
             entries.forEach(function (e) {
                 if (!e.isIntersecting) return;
-                var idx = Array.from(slides).indexOf(e.target);
+                var idx = slides.indexOf(e.target);
                 dots.forEach(function (d) { d.classList.remove('is-active'); });
                 if (dots[idx]) dots[idx].classList.add('is-active');
             });
         }, { root: strip, threshold: 0.5 });
         slides.forEach(function (s) { io.observe(s); });
     });
-
-    /* Lightbox */
-    var allSlides = Array.from(document.querySelectorAll('.journal-photo-slide[data-full]'));
-    if (!allSlides.length) return;
-    var lightbox = document.getElementById('feed-lightbox');
-    var lbImg    = document.getElementById('feed-lb-img');
-    var current  = 0;
-
-    function open(index) {
-        current = index;
-        lbImg.src = allSlides[index].dataset.full;
-        lbImg.alt = allSlides[index].dataset.alt;
-        lightbox.hidden = false;
-        document.body.style.overflow = 'hidden';
-        document.getElementById('feed-lb-close').focus();
-    }
-
-    function close() {
-        lightbox.hidden = true;
-        document.body.style.overflow = '';
-        allSlides[current].focus();
-    }
-
-    function prev() { open((current - 1 + allSlides.length) % allSlides.length); }
-    function next() { open((current + 1) % allSlides.length); }
-
-    allSlides.forEach(function (slide, i) {
-        slide.addEventListener('click', function () { open(i); });
-    });
-
-    document.getElementById('feed-lb-close').addEventListener('click', close);
-    document.getElementById('feed-lb-prev').addEventListener('click', prev);
-    document.getElementById('feed-lb-next').addEventListener('click', next);
-    lightbox.addEventListener('click', function (e) { if (e.target === lightbox) close(); });
-    document.addEventListener('keydown', function (e) {
-        if (lightbox.hidden) return;
-        if (e.key === 'Escape') close();
-        if (e.key === 'ArrowLeft') prev();
-        if (e.key === 'ArrowRight') next();
-    });
 })();
 </script>
 {% endblock %}