m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dailies): fix PhotoSwipe CSS loading + restore expand button

Browse Source 
Move PhotoSwipe CSS from per-entry assets.addCss() (runs after head is
committed) to a single <link> tag at block start. Restore the expand
button as the reliable mobile tap target — it dispatches a synthetic
click on the visible <a> slide, which bubbles to PhotoSwipe's gallery
handler. Merge dot sync into the single module script.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-21 19:39:33 +02:00
parent 30c8937566
commit 3379e50503
2 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+21
View File
@@ -234,6 +234,27 @@ body::after {
display: block;
}
.journal-photo-expand {
position: absolute;
bottom: var(--space-3);
right: var(--space-3);
width: 32px;
height: 32px;
background: rgba(0,0,0,0.45);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
-webkit-tap-highlight-color: transparent;
}
.journal-photo-expand:active { background: rgba(0,0,0,0.7); }
.journal-photo-dots {
display: flex;
justify-content: center;
themes/intotheeast/templates/dailies.html.twig
+30 -22
View File
@@ -1,6 +1,7 @@
{% extends 'default.html.twig' %}
{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
{% set journal_entries = page.collection() %}
{% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
{% set story_entries = stories_page ? stories_page.children.published() : [] %}
@@ -121,7 +122,6 @@ feedMap.on('load', function () {
{% set images = entry.media.images %}
{% if images|length > 0 %}
{% 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 %}
@@ -134,6 +134,9 @@ feedMap.on('load', function () {
</a>
{% endfor %}
</div>
<button class="journal-photo-expand" aria-label="View full size">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
</button>
</div>
{% if images|length > 1 %}
<div class="journal-photo-dots" aria-hidden="true">
@@ -173,33 +176,38 @@ feedMap.on('load', function () {
<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>
/* ── Dot sync ────────────────────────────────────────────────── */
(function () {
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 = 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); });
});
})();
/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
var strip = wrap.querySelector('.journal-photo-strip');
var slides = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
var expandBtn = wrap.querySelector('.journal-photo-expand');
var article = wrap.closest('article');
var dots = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
var visibleIdx = 0;
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
visibleIdx = slides.indexOf(e.target);
dots.forEach(function (d) { d.classList.remove('is-active'); });
if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
});
}, { root: strip, threshold: 0.5 });
slides.forEach(function (s) { io.observe(s); });
if (expandBtn && slides.length) {
expandBtn.addEventListener('click', function () {
slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
});
}
});
</script>
{% endblock %}