feat(parallax): aspect-ratio-aware auto height via WindowHeightFraction + ResizeObserver, drop DotNetObjectReference round-trip

DeepDrftShared.Client/Interop/parallax/parallax.ts

@@ -9,21 +9,17 @@
 interface RegisterOptions {
     speed: number;            // ParallaxSpeed, clamped [0,1]
     invertDirection: boolean; // selects the formula branch
-    onNaturalHeight?: boolean; // if true, report natural height via dotNetRef callback
-    image1?: string;          // primary image URL, used by reportNaturalHeight probe
-}
-
-interface DotNetObjectReference {
-    invokeMethodAsync(methodName: string, ...args: unknown[]): Promise<unknown>;
+    heightFraction?: number;  // null/absent = use whatever CSS sets; present = auto-compute height
+    image1?: string;          // primary image URL, used by the auto-height probe
 }
 
 interface Handle {
     element: HTMLElement;
     options: RegisterOptions;
-    observer: IntersectionObserver;
+    observer: IntersectionObserver;        // scroll gating
+    resizeObserver: ResizeObserver | null; // height recalc on resize
     scrollListener: (() => void) | null;
     rafId: number | null;
-    dotNetRef: DotNetObjectReference | null;
 }
 
 const handles = new Map<string, Handle>();
@@ -79,21 +75,36 @@ function detachScrollListener(handle: Handle): void {
     }
 }
 
-function reportNaturalHeight(handle: Handle): void {
-    if (!handle.dotNetRef || !handle.options.image1) return;
+function setupAutoHeight(handle: Handle): void {
+    if (!handle.options.heightFraction || !handle.options.image1) return;
+
+    const fraction = handle.options.heightFraction;
+    const element = handle.element;
+
+    const applyHeight = (naturalW: number, naturalH: number): void => {
+        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 = (): void => {
-        handle.dotNetRef?.invokeMethodAsync('SetNaturalHeight', probe.naturalHeight);
+        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: HTMLElement,
-    options: RegisterOptions,
-    dotNetRef?: DotNetObjectReference,
-): string {
+export function register(element: HTMLElement, options: RegisterOptions): string {
     const id = `parallax-${++_handleCounter}`;
 
     const realObserver = new IntersectionObserver((entries) => {
@@ -110,18 +121,16 @@ export function register(
         element,
         options: { ...options, speed: clamp(options.speed, 0, 1) },
         observer: realObserver,
+        resizeObserver: null,
         scrollListener: null,
         rafId: null,
-        dotNetRef: dotNetRef ?? null,
     };
 
     handle.observer.observe(element);
 
     handles.set(id, handle);
 
-    if (options.onNaturalHeight) {
-        reportNaturalHeight(handle);
-    }
+    setupAutoHeight(handle);
 
     return id;
 }
@@ -132,6 +141,6 @@ export function unregister(handleId: string): void {
 
     detachScrollListener(handle);
     handle.observer.disconnect();
-    handle.dotNetRef = null;
+    handle.resizeObserver?.disconnect();
     handles.delete(handleId);
 }