valknar/roux
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lightbox always scopes to full issue, not visible cards

Browse Source 
Previously the lightbox list was built from whichever cards happened
to be in the DOM (e.g. only tagged posts on a /tags/ page). Now all
three open paths — card click, VTA navigation, and direct URL load —
scope the list to all posts sharing the same issue as the opened post.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-05-18 17:29:00 +02:00
parent 76f87d5009
commit 199883e8c6
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+9 -6
View File
@@ -358,8 +358,9 @@
if (!card) return; if (!card) return;
e.preventDefault(); e.preventDefault();
const slug = card.dataset.slug; const slug = card.dataset.slug;
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const clicked = POSTS.find(p => p.slug === slug);
const scopedList = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = clicked ? clicked.issue : null;
const scopedList = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
// Update URL without page reload // Update URL without page reload
history.pushState({ slug }, '', card.href); history.pushState({ slug }, '', card.href);
lbOpen(slug, scopedList.length ? scopedList : POSTS); lbOpen(slug, scopedList.length ? scopedList : POSTS);
@@ -426,8 +427,9 @@
const script = doc.querySelector('script[data-open-slug]'); const script = doc.querySelector('script[data-open-slug]');
const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null; const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null;
if (openSlug) { if (openSlug) {
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const opened = POSTS.find(p => p.slug === openSlug);
const scoped = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = opened ? opened.issue : null;
const scoped = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
lbOpen(openSlug, scoped.length ? scoped : POSTS); lbOpen(openSlug, scoped.length ? scoped : POSTS);
} }
}); });
@@ -450,8 +452,9 @@
// ── On single-post pages: auto-open lightbox // ── On single-post pages: auto-open lightbox
if (window.__ROUX_OPEN_SLUG && POSTS.length) { if (window.__ROUX_OPEN_SLUG && POSTS.length) {
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const opened = POSTS.find(p => p.slug === window.__ROUX_OPEN_SLUG);
const scoped = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = opened ? opened.issue : null;
const scoped = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
lbOpen(window.__ROUX_OPEN_SLUG, scoped.length ? scoped : POSTS); lbOpen(window.__ROUX_OPEN_SLUG, scoped.length ? scoped : POSTS);
} }
static/js/app.js
+9 -6
View File
@@ -358,8 +358,9 @@
if (!card) return; if (!card) return;
e.preventDefault(); e.preventDefault();
const slug = card.dataset.slug; const slug = card.dataset.slug;
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const clicked = POSTS.find(p => p.slug === slug);
const scopedList = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = clicked ? clicked.issue : null;
const scopedList = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
// Update URL without page reload // Update URL without page reload
history.pushState({ slug }, '', card.href); history.pushState({ slug }, '', card.href);
lbOpen(slug, scopedList.length ? scopedList : POSTS); lbOpen(slug, scopedList.length ? scopedList : POSTS);
@@ -426,8 +427,9 @@
const script = doc.querySelector('script[data-open-slug]'); const script = doc.querySelector('script[data-open-slug]');
const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null; const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null;
if (openSlug) { if (openSlug) {
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const opened = POSTS.find(p => p.slug === openSlug);
const scoped = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = opened ? opened.issue : null;
const scoped = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
lbOpen(openSlug, scoped.length ? scoped : POSTS); lbOpen(openSlug, scoped.length ? scoped : POSTS);
} }
}); });
@@ -450,8 +452,9 @@
// ── On single-post pages: auto-open lightbox // ── On single-post pages: auto-open lightbox
if (window.__ROUX_OPEN_SLUG && POSTS.length) { if (window.__ROUX_OPEN_SLUG && POSTS.length) {
const visibleSlugs = Array.from(document.querySelectorAll('.card[data-slug]')).map(c => c.dataset.slug); const opened = POSTS.find(p => p.slug === window.__ROUX_OPEN_SLUG);
const scoped = POSTS.filter(p => visibleSlugs.includes(p.slug)); const issueId = opened ? opened.issue : null;
const scoped = issueId ? POSTS.filter(p => p.issue === issueId) : POSTS;
lbOpen(window.__ROUX_OPEN_SLUG, scoped.length ? scoped : POSTS); lbOpen(window.__ROUX_OPEN_SLUG, scoped.length ? scoped : POSTS);
} }