release nouri 0.4.0 templates suggestions and mobile sheet

2026-04-12 16:00:00 +02:00
parent b68ed62887
commit d8b56e6b67
28 changed files with 2651 additions and 492 deletions
@@ -0,0 +1,67 @@
+(() => {
+    const initMobileSheet = () => {
+        const sheet = document.querySelector("[data-mobile-sheet]");
+        const backdrop = document.querySelector("[data-mobile-sheet-backdrop]");
+        const openButtons = document.querySelectorAll("[data-mobile-sheet-open]");
+        const closeButtons = document.querySelectorAll("[data-mobile-sheet-close]");
+        if (!sheet || !backdrop || !openButtons.length) return;
+
+        const closeSheet = () => {
+            sheet.hidden = true;
+            backdrop.hidden = true;
+            document.body.classList.remove("sheet-open");
+            openButtons.forEach((button) => button.classList.remove("is-open"));
+        };
+
+        const openSheet = () => {
+            sheet.hidden = false;
+            backdrop.hidden = false;
+            document.body.classList.add("sheet-open");
+            openButtons.forEach((button) => button.classList.add("is-open"));
+        };
+
+        openButtons.forEach((button) => {
+            button.addEventListener("click", openSheet);
+        });
+        closeButtons.forEach((button) => {
+            button.addEventListener("click", closeSheet);
+        });
+        backdrop.addEventListener("click", closeSheet);
+
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+                closeSheet();
+            }
+        });
+
+        sheet.querySelectorAll("a").forEach((link) => {
+            link.addEventListener("click", closeSheet);
+        });
+    };
+
+    const initFilterInputs = () => {
+        document.querySelectorAll("[data-filter-input]").forEach((input) => {
+            const listSelector = input.getAttribute("data-filter-target");
+            if (!listSelector) return;
+            const container = document.querySelector(listSelector);
+            if (!container) return;
+
+            const items = Array.from(container.querySelectorAll("[data-filter-label]"));
+            const applyFilter = () => {
+                const term = input.value.trim().toLowerCase();
+                items.forEach((item) => {
+                    const haystack = (item.getAttribute("data-filter-label") || "").toLowerCase();
+                    item.hidden = Boolean(term) && !haystack.includes(term);
+                });
+            };
+
+            input.addEventListener("input", applyFilter);
+            applyFilter();
+        });
+    };
+
+    document.addEventListener("DOMContentLoaded", () => {
+        initMobileSheet();
+        initFilterInputs();
+    });
+})();