@marianmeres/stuic 2.1.8 → 2.1.9

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,35 +1,6 @@
-<script lang="ts" module>
-	interface BodyStyles {
-		position: string | null;
-		top: string | null;
-		width: string | null;
-		overflow: string | null;
-	}
-
-	function get_body_style(): BodyStyles {
-		// const style = window.getComputedStyle(document.body);
-		const style = document.body.style; // we want only explicitly defined, not computed
-		return {
-			position: style.position || null,
-			top: style.top || null,
-			width: style.width || null,
-			overflow: style.overflow || null,
-		};
-	}
-
-	function restore_body_styles(original: BodyStyles) {
-		(["position", "top", "width", "overflow"] as (keyof BodyStyles)[]).forEach((k) => {
-			if (original[k] !== null) {
-				document.body.style[k] = original[k];
-			} else {
-				document.body.style.removeProperty(k);
-			}
-		});
-	}
-</script>
-
 <script lang="ts">
 	import {
+		BodyScroll,
 		focusTrap as focusTrapAction,
 		twMerge,
 		waitForNextRepaint,
@@ -37,7 +8,7 @@
 	} from "../../index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { PressedKeys, watch } from "runed";
-	import { onDestroy, tick, type Snippet } from "svelte";
+	import { onDestroy, onMount, tick, type Snippet } from "svelte";
 	import { fade } from "svelte/transition";
 
 	const clog = createClog("Backdrop").debug;
@@ -120,36 +91,15 @@
 		}
 	);
 
-	// lock body scroll when open and restore back
-	let _original: BodyStyles = {
-		position: null,
-		top: null,
-		width: null,
-		overflow: null,
-	};
-
-	function _restore() {
-		const scrollY = document.body.style.top;
-		restore_body_styles(_original);
-		// Restore scroll position
-		window.scrollTo(0, parseInt(scrollY || "0") * -1);
-	}
-
 	$effect(() => {
 		if (noScrollLock) return;
-		if (visible) {
-			_original = get_body_style();
-			const scrollY = window.scrollY;
-			document.body.style.position = "fixed";
-			document.body.style.top = `-${scrollY}px`;
-			document.body.style.width = "100%";
-			document.body.style.overflow = "hidden";
-		} else {
-			_restore();
-		}
-		return _restore; // onDestroy as well
+		visible ? BodyScroll.lock() : BodyScroll.unlock();
 	});
 
+	// we need onDestroy as well
+	// Note, that this will also reset if nested... (which is not desired, but ignoring)
+	onDestroy(BodyScroll.unlock);
+
 	$effect(() => {
 		function onkeydown(e: KeyboardEvent) {
 			if (e.key === "Escape" && typeof onEscape === "function") {

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -1,33 +1,3 @@
-<script lang="ts" module>
-	interface BodyStyles {
-		position: string | null;
-		top: string | null;
-		width: string | null;
-		overflow: string | null;
-	}
-
-	function get_body_style(): BodyStyles {
-		// const style = window.getComputedStyle(document.body);
-		const style = document.body.style; // we want only explicitly defined, not computed
-		return {
-			position: style.position || null,
-			top: style.top || null,
-			width: style.width || null,
-			overflow: style.overflow || null,
-		};
-	}
-
-	function restore_body_styles(original: BodyStyles) {
-		(["position", "top", "width", "overflow"] as (keyof BodyStyles)[]).forEach((k) => {
-			if (original[k] !== null) {
-				document.body.style[k] = original[k];
-			} else {
-				document.body.style.removeProperty(k);
-			}
-		});
-	}
-</script>
-
 <script lang="ts">
 	import { onClickOutside } from "runed";
 	import { onDestroy, onMount, tick, type Snippet } from "svelte";
@@ -36,6 +6,7 @@
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { createClog } from "@marianmeres/clog";
 	import { waitForNextRepaint } from "../../utils/paint.js";
+	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 
 	const clog = createClog("ModalDialog").debug;
 
@@ -65,7 +36,9 @@
 		preClose,
 	}: Props = $props();
 
-	let visible = $state(false);
+	// important to start as undefined (because of scroll save/restore)
+	let visible: boolean | undefined = $state(undefined);
+
 	let dialog = $state<HTMLDialogElement>()!;
 	let box = $state<HTMLDivElement>()!;
 	let _opener: undefined | null | HTMLElement = $state();
@@ -106,36 +79,16 @@
 		() => !noClickOutsideClose && close()
 	);
 
-	// lock body scroll when open and restore back
-	let _original: BodyStyles = {
-		position: null,
-		top: null,
-		width: null,
-		overflow: null,
-	};
-
-	function _restore() {
-		const scrollY = document.body.style.top;
-		restore_body_styles(_original);
-		// Restore scroll position
-		window.scrollTo(0, parseInt(scrollY || "0") * -1);
-	}
-
 	$effect(() => {
-		if (visible) {
-			_original = get_body_style();
-			const scrollY = window.scrollY;
-			document.body.style.position = "fixed";
-			document.body.style.top = `-${scrollY}px`;
-			document.body.style.width = "100%";
-			document.body.style.overflow = "hidden";
-		} else {
-			_restore();
-		}
-		// also onDestroy (will also reset if nested... which is not desired, but ignoring currently)
-		return _restore;
+		// noop if we're undefined ($effect runs immediately as onMount)
+		if (visible === undefined) return;
+		visible ? BodyScroll.lock() : BodyScroll.unlock();
 	});
 
+	// we need onDestroy as well
+	// Note, that this will also reset if nested... (which is not desired, but ignoring)
+	onDestroy(BodyScroll.unlock);
+
 	// $inspect("Modal dialog mounted, is visible:", visible).with(clog);
 </script>
 

package/dist/utils/body-scroll-locker.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Helper for "locking" and "unlocking" body scroll (window.scrollY) position
+ */
+export declare class BodyScroll {
+    static lock(): void;
+    static unlock(): void;
+    private static _get_body_style;
+    private static _restore_body_styles;
+}

package/dist/utils/body-scroll-locker.js

@@ -0,0 +1,76 @@
+import { createClog } from "@marianmeres/clog";
+const clog = createClog("BodyScroll").debug;
+/**
+ * Helper for "locking" and "unlocking" body scroll (window.scrollY) position
+ */
+export class BodyScroll {
+    static lock() {
+        const data = document.body.dataset;
+        // Only save the scroll position if it hasn't been saved already
+        if (data.originalScrollY === undefined) {
+            const scrollY = window.scrollY || window.pageYOffset;
+            // Save body styles as serialized json
+            data.originalScrollStyleBackup = BodyScroll._get_body_style();
+            // Save the original scroll position in dataset
+            data.originalScrollY = `${scrollY}`;
+            data.scrollLockCount = "1";
+            // Apply the fixed positioning
+            document.body.style.position = "fixed";
+            document.body.style.top = `-${scrollY}px`;
+            document.body.style.width = "100%";
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            // Another component already locked the scroll, just increment the counter
+            const currentCount = parseInt(data.scrollLockCount, 10);
+            data.scrollLockCount = `${currentCount + 1}`;
+        }
+    }
+    static unlock() {
+        const data = document.body.dataset;
+        // Only proceed if scroll is currently locked
+        if (data.scrollLockCount !== undefined) {
+            const count = parseInt(data.scrollLockCount, 10);
+            if (count > 1) {
+                // Other components still need the lock, just decrement the counter
+                data.scrollLockCount = `${count - 1}`;
+            }
+            else {
+                // This is the last component, restore everything
+                const originalScrollY = parseInt(data.originalScrollY, 10);
+                BodyScroll._restore_body_styles(data.originalScrollStyleBackup);
+                // Remove our data attributes
+                delete data.originalScrollY;
+                delete data.originalScrollStyleBackup;
+                delete data.scrollLockCount;
+                // Restore the scroll position
+                window.scrollTo(0, originalScrollY);
+            }
+        }
+    }
+    static _get_body_style() {
+        // we want only explicitly defined, not computed
+        const style = document.body.style;
+        return JSON.stringify({
+            position: style.position || null,
+            top: style.position || null,
+            width: style.width || null,
+            overflow: style.overflow || null,
+        });
+    }
+    static _restore_body_styles(originalJsonString) {
+        let original = { position: null, top: null, width: null, overflow: null };
+        try {
+            original = JSON.parse(originalJsonString);
+        }
+        catch (e) { }
+        ["position", "top", "width", "overflow"].forEach((k) => {
+            if (original[k] !== null) {
+                document.body.style[k] = original[k];
+            }
+            else {
+                document.body.style.removeProperty(k);
+            }
+        });
+    }
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.8",
+	"version": "2.1.9",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",