Convert tag modal into drawer (#977)

* change tag modal into drawer

* improve scroll handling

* teleport all side bar content

* improve naming

* fix focus trap in filter drawer

bookmarks/frontend/behaviors/filter-drawer.js

@@ -0,0 +1,97 @@
+import { Behavior, registerBehavior } from "./index";
+import { ModalBehavior } from "./modal";
+import { isKeyboardActive } from "./focus-utils";
+
+class FilterDrawerTriggerBehavior extends Behavior {
+  constructor(element) {
+    super(element);
+
+    this.onClick = this.onClick.bind(this);
+
+    element.addEventListener("click", this.onClick);
+  }
+
+  destroy() {
+    this.element.removeEventListener("click", this.onClick);
+  }
+
+  onClick() {
+    const modal = document.createElement("div");
+    modal.classList.add("modal", "drawer", "filter-drawer");
+    modal.setAttribute("ld-filter-drawer", "");
+    modal.innerHTML = `
+      <div class="modal-overlay"></div>
+      <div class="modal-container" role="dialog" aria-modal="true">
+        <div class="modal-header">
+          <h2>Filters</h2>
+          <button class="close" aria-label="Close dialog">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                 stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M18 6l-12 12"></path>
+              <path d="M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <section class="content content-area"></div>
+        </div>
+      </div>    
+    `;
+    document.body.querySelector(".modals").appendChild(modal);
+  }
+}
+
+class FilterDrawerBehavior extends ModalBehavior {
+  init() {
+    // Teleport content before creating focus trap, otherwise it will not detect
+    // focusable content elements
+    this.teleport();
+    super.init();
+    // Add active class to start slide-in animation
+    this.element.classList.add("active");
+  }
+
+  destroy() {
+    super.destroy();
+    // Always close on destroy to restore drawer content to original location
+    // before turbo caches DOM
+    this.doClose();
+  }
+
+  mapHeading(container, from, to) {
+    const headings = container.querySelectorAll(from);
+    headings.forEach((heading) => {
+      const newHeading = document.createElement(to);
+      newHeading.textContent = heading.textContent;
+      heading.replaceWith(newHeading);
+    });
+  }
+
+  teleport() {
+    const content = this.element.querySelector(".content");
+    const sidePanel = document.querySelector("section.side-panel");
+    content.append(...sidePanel.children);
+    this.mapHeading(content, "h2", "h3");
+  }
+
+  teleportBack() {
+    const sidePanel = document.querySelector("section.side-panel");
+    const content = this.element.querySelector(".content");
+    sidePanel.append(...content.children);
+    this.mapHeading(sidePanel, "h3", "h2");
+  }
+
+  doClose() {
+    super.doClose();
+    this.teleportBack();
+
+    // Try restore focus to drawer trigger
+    const restoreFocusElement =
+      document.querySelector("[ld-filter-drawer-trigger]") || document.body;
+    restoreFocusElement.focus({ focusVisible: isKeyboardActive() });
+  }
+}
+
+registerBehavior("ld-filter-drawer-trigger", FilterDrawerTriggerBehavior);
+registerBehavior("ld-filter-drawer", FilterDrawerBehavior);

bookmarks/frontend/behaviors/modal.js

@@ -15,10 +15,7 @@ export class ModalBehavior extends Behavior {
     this.closeButton.addEventListener("click", this.onClose);
     document.addEventListener("keydown", this.onKeyDown);
 
-    this.setupInert();
-    this.focusTrap = new FocusTrapController(
-      element.querySelector(".modal-container"),
-    );
+    this.init();
   }
 
   destroy() {
@@ -30,11 +27,20 @@ export class ModalBehavior extends Behavior {
     this.focusTrap.destroy();
   }
 
+  init() {
+    this.setupInert();
+    this.focusTrap = new FocusTrapController(
+      this.element.querySelector(".modal-container"),
+    );
+  }
+
   setupInert() {
     // Inert all other elements on the page
     document
       .querySelectorAll("body > *:not(.modals)")
       .forEach((el) => el.setAttribute("inert", ""));
+    // Lock scroll on the body
+    document.body.classList.add("scroll-lock");
   }
 
   clearInert() {
@@ -42,6 +48,8 @@ export class ModalBehavior extends Behavior {
     document
       .querySelectorAll("body > *")
       .forEach((el) => el.removeAttribute("inert"));
+    // Remove scroll lock from the body
+    document.body.classList.remove("scroll-lock");
   }
 
   onKeyDown(event) {

bookmarks/frontend/behaviors/tag-modal.js

@@ -1,76 +0,0 @@
-import { Behavior, registerBehavior } from "./index";
-import { ModalBehavior } from "./modal";
-import { isKeyboardActive } from "./focus-utils";
-
-class TagModalTriggerBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    this.onClick = this.onClick.bind(this);
-
-    element.addEventListener("click", this.onClick);
-  }
-
-  destroy() {
-    this.element.removeEventListener("click", this.onClick);
-  }
-
-  onClick() {
-    // Creates a new modal and teleports the tag cloud into it
-    const modal = document.createElement("div");
-    modal.classList.add("modal", "active");
-    modal.setAttribute("ld-tag-modal", "");
-    modal.innerHTML = `
-      <div class="modal-overlay"></div>
-      <div class="modal-container" role="dialog" aria-modal="true">
-        <div class="modal-header">
-          <h2>Tags</h2>
-          <button class="close" aria-label="Close dialog">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-                 stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-              <path d="M18 6l-12 12"></path>
-              <path d="M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="content"></div>
-        </div>
-      </div>    
-    `;
-    modal.addEventListener("modal:close", this.onClose);
-
-    modal.tagCloud = document.querySelector(".tag-cloud");
-    modal.tagCloudContainer = modal.tagCloud.parentElement;
-
-    const content = modal.querySelector(".content");
-    content.appendChild(modal.tagCloud);
-
-    document.body.querySelector(".modals").appendChild(modal);
-  }
-}
-
-class TagModalBehavior extends ModalBehavior {
-  destroy() {
-    super.destroy();
-    // Always close on destroy to restore tag cloud to original parent before
-    // turbo caches DOM
-    this.doClose();
-  }
-
-  doClose() {
-    super.doClose();
-
-    // Restore tag cloud to original parent
-    this.element.tagCloudContainer.appendChild(this.element.tagCloud);
-
-    // Try restore focus to tag cloud trigger
-    const restoreFocusElement =
-      document.querySelector("[ld-tag-modal-trigger]") || document.body;
-    restoreFocusElement.focus({ focusVisible: isKeyboardActive() });
-  }
-}
-
-registerBehavior("ld-tag-modal-trigger", TagModalTriggerBehavior);
-registerBehavior("ld-tag-modal", TagModalBehavior);

bookmarks/frontend/index.js

@@ -3,13 +3,13 @@ import "./behaviors/bookmark-page";
 import "./behaviors/bulk-edit";
 import "./behaviors/clear-button";
 import "./behaviors/confirm-button";
-import "./behaviors/dropdown";
-import "./behaviors/form";
 import "./behaviors/details-modal";
+import "./behaviors/dropdown";
+import "./behaviors/filter-drawer";
+import "./behaviors/form";
 import "./behaviors/global-shortcuts";
 import "./behaviors/search-autocomplete";
 import "./behaviors/tag-autocomplete";
-import "./behaviors/tag-modal";
 
 export { default as TagAutoComplete } from "./components/TagAutocomplete.svelte";
 export { default as SearchAutoComplete } from "./components/SearchAutoComplete.svelte";