fix: track compiled RCL parallax JS for MapStaticAssets deployment

DeepDrftShared.Client's wwwroot/js/ was gitignored, so the TS-compiled parallax.js was absent at build-time manifest generation. MapStaticAssets serves _content/ exclusively from the build manifest, so the file was missing from the publish output — requests fell through to the Blazor HTML handler, producing a text/html MIME-type error in the browser. DeepDrftPublic audio JS is unaffected because UseStaticFiles() serves that startup project's physical wwwroot/ directly, bypassing the manifest. The RCL has no such bypass, so its compiled JS must be present at manifest-generation time, which requires tracking it in git.
2026-06-12 06:39:07 -04:00
parent dd30d57838
commit 2f7f8dbdf8
3 changed files with 132 additions and 1 deletions
@@ -0,0 +1,127 @@
+/**
+ * parallax - scroll-driven background-position panning for ParallaxImage.
+ *
+ * Single Responsibility: own the parallax math and scroll/observer lifecycle.
+ * Blazor owns the component lifecycle and calls register/unregister. When the
+ * IntersectionObserver fires and JS attaches the scroll listener, this module
+ * sets data-parallax-active and immediately primes background-position-y —
+ * atomically cancelling the pre-WASM CSS animation and writing the correct
+ * position in the same turn, so there is no flash at the handoff.
+ */
+const handles = new Map();
+let _handleCounter = 0;
+const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function applyParallax(handle) {
+    const { element, options } = handle;
+    const rect = element.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    let progress = options.invertDirection
+        ? rect.top / viewportH
+        : 1 - rect.top / viewportH;
+    progress = clamp(progress, 0, 1);
+    const pos = progress * clamp(options.speed, 0, 1) * 100;
+    // Write background-position-y on each layer directly — the same property the
+    // pre-WASM CSS animation drives (now cancelled via data-parallax-active).
+    const layers = element.querySelectorAll(':scope > .layer');
+    for (const layer of layers) {
+        layer.style.backgroundPositionY = `${pos}%`;
+    }
+}
+function attachScrollListener(handle) {
+    if (handle.scrollListener || reducedMotion())
+        return;
+    const listener = () => {
+        if (handle.rafId !== null)
+            return;
+        handle.rafId = requestAnimationFrame(() => {
+            handle.rafId = null;
+            applyParallax(handle);
+        });
+    };
+    handle.scrollListener = listener;
+    window.addEventListener('scroll', listener, { passive: true });
+    // Cancel CSS animation and prime position atomically — no gap where neither drives.
+    handle.element.setAttribute('data-parallax-active', '');
+    applyParallax(handle);
+}
+function detachScrollListener(handle) {
+    if (handle.scrollListener) {
+        window.removeEventListener('scroll', handle.scrollListener);
+        handle.scrollListener = null;
+    }
+    if (handle.rafId !== null) {
+        cancelAnimationFrame(handle.rafId);
+        handle.rafId = null;
+    }
+}
+function setupAutoHeight(handle) {
+    if (!handle.options.heightFraction || !handle.options.image1)
+        return;
+    const fraction = handle.options.heightFraction;
+    const element = handle.element;
+    const applyHeight = (naturalW, naturalH) => {
+        const containerW = element.offsetWidth;
+        if (containerW === 0 || naturalW === 0)
+            return;
+        const h = Math.round(containerW * (naturalH / naturalW) * fraction);
+        element.style.setProperty('--window-height', `${h}px`);
+    };
+    const probe = new Image();
+    probe.onload = () => {
+        const nw = probe.naturalWidth;
+        const nh = probe.naturalHeight;
+        applyHeight(nw, nh);
+        // Watch container width changes (orientation, responsive layout, etc.)
+        handle.resizeObserver = new ResizeObserver(() => {
+            applyHeight(nw, nh);
+        });
+        handle.resizeObserver.observe(element);
+    };
+    probe.src = handle.options.image1;
+}
+export function register(element, options) {
+    const id = `parallax-${++_handleCounter}`;
+    const realObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                attachScrollListener(handle);
+            }
+            else {
+                detachScrollListener(handle);
+            }
+        }
+    });
+    const handle = {
+        element,
+        options: { ...options, speed: clamp(options.speed, 0, 1) },
+        observer: realObserver,
+        resizeObserver: null,
+        scrollListener: null,
+        rafId: null,
+    };
+    handle.observer.observe(element);
+    handles.set(id, handle);
+    setupAutoHeight(handle);
+    // Prime position synchronously so enhanced navigation and WASM handoff have
+    // zero-frame gap. The init script covers cold page load; this covers nav.
+    // Skip under reduced motion — parallax.ts never drives position then.
+    if (!reducedMotion()) {
+        element.setAttribute('data-parallax-active', '');
+        applyParallax(handle);
+    }
+    return id;
+}
+export function unregister(handleId) {
+    const handle = handles.get(handleId);
+    if (!handle)
+        return;
+    detachScrollListener(handle);
+    handle.element.removeAttribute('data-parallax-active');
+    handle.observer.disconnect();
+    handle.resizeObserver?.disconnect();
+    handles.delete(handleId);
+}
+//# sourceMappingURL=/js/parallax/parallax.js.map