From b97b0493e09e777e186a805ab7fa047dab51bae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 31 Dec 2025 17:30:59 +0100 Subject: [PATCH] Cleanup modals --- .../frontend/components/filter-drawer.js | 22 ++++++---- bookmarks/frontend/components/modal.js | 15 ++++--- .../templates/bookmarks/details/modal.html | 19 ++------ .../settings/create_api_token_modal.html | 43 ++++++------------- 4 files changed, 38 insertions(+), 61 deletions(-) diff --git a/bookmarks/frontend/components/filter-drawer.js b/bookmarks/frontend/components/filter-drawer.js index 37d1a93..ec81c09 100644 --- a/bookmarks/frontend/components/filter-drawer.js +++ b/bookmarks/frontend/components/filter-drawer.js @@ -22,16 +22,20 @@ customElements.define("ld-filter-drawer-trigger", FilterDrawerTrigger); class FilterDrawer extends Modal { connectedCallback() { - this.classList.add("modal", "drawer", "filter-drawer"); + this.classList.add("modal", "drawer"); // Render modal structure render( html` -
+
`, this, @@ -61,6 +63,8 @@ class FilterDrawer extends Modal { // Force close on turbo cache to restore content this.doClose = this.doClose.bind(this); document.addEventListener("turbo:before-cache", this.doClose); + // Force reflow to make transform transition work + this.getBoundingClientRect(); // Add active class to start slide-in animation requestAnimationFrame(() => this.classList.add("active")); // Call super after rendering to ensure elements are available @@ -70,7 +74,7 @@ class FilterDrawer extends Modal { disconnectedCallback() { super.disconnectedCallback(); this.teleportBack(); - document.addEventListener("turbo:before-cache", this.doClose); + document.removeEventListener("turbo:before-cache", this.doClose); } mapHeading(container, from, to) { @@ -83,7 +87,7 @@ class FilterDrawer extends Modal { } teleport() { - const content = this.querySelector(".content"); + const content = this.querySelector(".modal-body"); const sidePanel = document.querySelector(".side-panel"); content.append(...sidePanel.children); this.mapHeading(content, "h2", "h3"); @@ -91,7 +95,7 @@ class FilterDrawer extends Modal { teleportBack() { const sidePanel = document.querySelector(".side-panel"); - const content = this.querySelector(".content"); + const content = this.querySelector(".modal-body"); sidePanel.append(...content.children); this.mapHeading(sidePanel, "h3", "h2"); } diff --git a/bookmarks/frontend/components/modal.js b/bookmarks/frontend/components/modal.js index 3366ec6..a5fada2 100644 --- a/bookmarks/frontend/components/modal.js +++ b/bookmarks/frontend/components/modal.js @@ -5,11 +5,10 @@ export class Modal extends HTMLElement { requestAnimationFrame(() => { this.onClose = this.onClose.bind(this); this.onKeyDown = this.onKeyDown.bind(this); - this.overlay = this.querySelector(".modal-overlay"); - this.closeButton = this.querySelector(".modal-header .close"); - this.overlay.addEventListener("click", this.onClose); - this.closeButton.addEventListener("click", this.onClose); + this.querySelectorAll("[data-close-modal]").forEach((btn) => { + btn.addEventListener("click", this.onClose); + }); document.addEventListener("keydown", this.onKeyDown); this.setupScrollLock(); @@ -20,8 +19,9 @@ export class Modal extends HTMLElement { } disconnectedCallback() { - this.overlay.removeEventListener("click", this.onClose); - this.closeButton.removeEventListener("click", this.onClose); + this.querySelectorAll("[data-close-modal]").forEach((btn) => { + btn.removeEventListener("click", this.onClose); + }); document.removeEventListener("keydown", this.onKeyDown); this.removeScrollLock(); @@ -74,8 +74,9 @@ export class Modal extends HTMLElement { // Navigate to close URL const closeUrl = this.dataset.closeUrl; const frame = this.dataset.turboFrame; + const action = this.dataset.turboAction || "replace"; if (closeUrl) { - Turbo.visit(closeUrl, { action: "replace", frame: frame }); + Turbo.visit(closeUrl, { action, frame: frame }); } } } diff --git a/bookmarks/templates/bookmarks/details/modal.html b/bookmarks/templates/bookmarks/details/modal.html index ab5bb12..b982543 100644 --- a/bookmarks/templates/bookmarks/details/modal.html +++ b/bookmarks/templates/bookmarks/details/modal.html @@ -1,25 +1,12 @@ -
+