Merge pull request #3097 from AlchemyCMS/resizable-element-window

Resizable elements window
AlchemyCMS · Dec 2, 2024 · b4b2471 · b4b2471
2 parents e6523b8 + 44d3a39
commit b4b2471
Show file tree

Hide file tree

Showing 18 changed files with 192 additions and 44 deletions.
diff --git a/app/assets/builds/alchemy/admin.css b/app/assets/builds/alchemy/admin.css
diff --git a/app/assets/builds/alchemy/admin.css.map b/app/assets/builds/alchemy/admin.css.map
diff --git a/app/assets/builds/alchemy/custom-properties.css b/app/assets/builds/alchemy/custom-properties.css
diff --git a/app/assets/builds/alchemy/custom-properties.css.map b/app/assets/builds/alchemy/custom-properties.css.map
diff --git a/app/assets/builds/alchemy/welcome.css b/app/assets/builds/alchemy/welcome.css
diff --git a/app/assets/builds/alchemy/welcome.css.map b/app/assets/builds/alchemy/welcome.css.map
diff --git a/app/assets/builds/tinymce/skins/content/alchemy/content.min.css b/app/assets/builds/tinymce/skins/content/alchemy/content.min.css
diff --git a/app/assets/builds/tinymce/skins/content/alchemy/content.min.css.map b/app/assets/builds/tinymce/skins/content/alchemy/content.min.css.map
diff --git a/app/javascript/alchemy_admin/components/elements_window.js b/app/javascript/alchemy_admin/components/elements_window.js
@@ -2,6 +2,7 @@ import SortableElements from "alchemy_admin/sortable_elements"
 
 class ElementsWindow extends HTMLElement {
   #visible = true
+  #turboFrame = null
 
   constructor() {
     super()
@@ -19,6 +20,7 @@ class ElementsWindow extends HTMLElement {
         ?.trigger("FocusElementEditor.Alchemy")
     }
     SortableElements()
+    this.resize()
   }
 
   collapseAllElements() {
@@ -38,17 +40,30 @@ class ElementsWindow extends HTMLElement {
     this.toggleButton
       .querySelector("alchemy-icon")
       .setAttribute("name", "menu-unfold")
+    this.resize()
   }
 
   hide() {
     document.body.classList.remove("elements-window-visible")
+    document.body.style.removeProperty("--elements-window-width")
     this.#visible = false
     this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements")
     this.toggleButton
       .querySelector("alchemy-icon")
       .setAttribute("name", "menu-fold")
   }
 
+  resize(width) {
+    if (width === undefined) {
+      width = this.widthFromCookie
+    }
+
+    if (width) {
+      document.body.style.setProperty("--elements-window-width", `${width}px`)
+      document.cookie = `alchemy-elements-window-width=${width}; SameSite=Lax; Path=/;`
+    }
+  }
+
   get collapseButton() {
     return this.querySelector("#collapse-all-elements-button")
   }
@@ -61,6 +76,25 @@ class ElementsWindow extends HTMLElement {
     return document.getElementById("alchemy_preview_window")
   }
 
+  get turboFrame() {
+    if (!this.#turboFrame) {
+      this.#turboFrame = this.closest("turbo-frame")
+    }
+    return this.#turboFrame
+  }
+
+  get widthFromCookie() {
+    return document.cookie
+      .split("; ")
+      .find((row) => row.startsWith("alchemy-elements-window-width="))
+      ?.split("=")[1]
+  }
+
+  set isDragged(dragged) {
+    this.turboFrame.style.transitionProperty = dragged ? "none" : null
+    this.turboFrame.style.pointerEvents = dragged ? "none" : null
+  }
+
   #attachEvents() {
     this.collapseButton?.addEventListener("click", () => {
       this.collapseAllElements()