gabriel / musehub public
mist-list.ts typescript
44 lines 1.7 KB
Raw
sha256:969ddc5e88776e70af33c016b8777bb721356508ae5f304b3fb46c451494ece7 test(mwp3): Phase 4 — fix adjacent suite regressions, lock … Sonnet 4.6 23 days ago
1 /**
2 * mist-list.ts — Mist list and explore page module.
3 *
4 * Responsibilities:
5 * 1. Row hover entrance animations (staggered IntersectionObserver).
6 * 2. Re-animate rows after HTMX fragment swap (type-filter navigation).
7 */
8
9 // ── Row entrance animations ───────────────────────────────────────────────────
10
11 function animateRows(root: Element | Document = document): void {
12 const rows = root.querySelectorAll<HTMLElement>('.ms-row');
13 if (!rows.length) return;
14
15 const io = new IntersectionObserver((entries) => {
16 entries.forEach((entry, i) => {
17 if (!entry.isIntersecting) return;
18 const el = entry.target as HTMLElement;
19 el.style.animationDelay = `${i * 20}ms`;
20 io.unobserve(el);
21 });
22 }, { threshold: 0.02 });
23
24 rows.forEach(el => io.observe(el));
25 }
26
27 // ── HTMX: re-animate after fragment swap ─────────────────────────────────────
28
29 function bindHtmxSwap(): void {
30 document.body.addEventListener('htmx:afterSwap', (e: Event) => {
31 const target = (e as CustomEvent).detail?.target as HTMLElement | undefined;
32 if (!target) return;
33 if (target.id === 'mist-rows' || target.closest('#mist-rows')) {
34 animateRows(target);
35 }
36 });
37 }
38
39 // ── Entry point ───────────────────────────────────────────────────────────────
40
41 export function initMistList(_data?: Record<string, unknown>): void {
42 animateRows();
43 bindHtmxSwap();
44 }
File History 2 commits
sha256:969ddc5e88776e70af33c016b8777bb721356508ae5f304b3fb46c451494ece7 test(mwp3): Phase 4 — fix adjacent suite regressions, lock … Sonnet 4.6 23 days ago
sha256:1749b9cc5cd2583c56d3261c4c00a342c27435f3946d4bc3e70f76aa2795458a docs(mwp-3): TDD implementation plan for job-enqueue idempo… Opus 4.8 23 days ago