Use Turbo Frame for Elements Window

app/assets/javascripts/alchemy/admin.js

@@ -6,7 +6,6 @@
 //= require alchemy/templates
 //= require alchemy/alchemy.dialog
 //= require alchemy/alchemy.confirm_dialog
-//= require alchemy/alchemy.elements_window
 //= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.link_dialog

app/assets/stylesheets/alchemy/elements.scss

@@ -3,6 +3,7 @@
   right: 0;
   top: $top-menu-height;
   z-index: 20;
+  display: block;
   width: calc(100vw - #{$collapsed-main-menu-width});
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;

app/javascript/alchemy_admin.js

@@ -26,6 +26,7 @@ import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/elements_window"
 import "alchemy_admin/components/message"
 import "alchemy_admin/components/growl"
 import "alchemy_admin/components/icon"

app/javascript/alchemy_admin/components/elements_window.js

@@ -0,0 +1,81 @@
+class ElementsWindow extends HTMLElement {
+  #visible = true
+
+  constructor() {
+    super()
+    this.#attachEvents()
+  }
+
+  connectedCallback() {
+    this.toggleButton?.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.toggle()
+    })
+    if (window.location.hash) {
+      document
+        .querySelector(window.location.hash)
+        ?.trigger("FocusElementEditor.Alchemy")
+    }
+    Alchemy.SortableElements()
+  }
+
+  collapseAllElements() {
+    this.querySelectorAll(
+      "alchemy-element-editor:not([compact]):not([fixed])"
+    ).forEach((editor) => editor.collapse())
+  }
+
+  toggle() {
+    this.#visible ? this.hide() : this.show()
+  }
+
+  show() {
+    document.body.classList.add("elements-window-visible")
+    this.#visible = true
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Hide elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-unfold")
+  }
+
+  hide() {
+    document.body.classList.remove("elements-window-visible")
+    this.#visible = false
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-fold")
+  }
+
+  get collapseButton() {
+    return this.querySelector("#collapse-all-elements-button")
+  }
+
+  get toggleButton() {
+    return document.querySelector("#element_window_button")
+  }
+
+  #attachEvents() {
+    this.collapseButton?.addEventListener("click", () => {
+      this.collapseAllElements()
+    })
+    window.addEventListener("message", (event) => {
+      const data = event.data
+      if (data?.message == "Alchemy.focusElementEditor") {
+        const element = document.getElementById(`element_${data.element_id}`)
+        this.show()
+        element?.focusElement()
+      }
+    })
+    document.body.addEventListener("click", (evt) => {
+      if (!evt.target.closest("alchemy-element-editor")) {
+        this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
+          editor.classList.remove("selected")
+        })
+        Alchemy.PreviewWindow.postMessage({ message: "Alchemy.blurElements" })
+      }
+    })
+  }
+}
+
+customElements.define("alchemy-elements-window", ElementsWindow)

app/views/alchemy/admin/elements/_add_nested_element_form.html.erb

@@ -8,7 +8,7 @@
       <%= f.hidden_field :name %>
       <%= f.hidden_field :page_version_id, value: element.page_version_id %>
       <%= f.hidden_field :parent_element_id, value: element.id %>
-      <button class="add-nestable-element-button" is="alchemy-button">
+      <button class="add-nestable-element-button" is="alchemy-button" data-turbo="false">
         <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
       </button>
     <% end %>

app/views/alchemy/admin/elements/_footer.html.erb

@@ -5,7 +5,7 @@
     </p>
   <% end %>
 
-  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button">
+  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button" data-turbo="false">
     <%= Alchemy.t(:save) %>
   </button>
 </div>

app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -23,7 +23,8 @@
       render_icon('delete-bin-2'),
       Alchemy.t(:confirm_to_delete_element),
       alchemy.admin_element_path(element),
-      class: "icon_button"
+      class: "icon_button",
+      data: {turbo: false}
     ) -%>
   </sl-tooltip>
   <sl-tooltip content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>" placement="top-end">

app/views/alchemy/admin/elements/index.html.erb

@@ -1,36 +1,72 @@
-<% if @fixed_elements.any? %>
-  <sl-tab-group id="fixed-elements">
-    <sl-tab slot="nav" panel="main-content-elements">
-      <%= Alchemy.t(:main_content) %>
-    </sl-tab>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
-        <%= element.display_name %>
-      </sl-tab>
+<%= turbo_frame_tag "alchemy_elements_window" do %>
+  <alchemy-elements-window>
+    <div class="elements-window-toolbar">
+      <%= toolbar_button(
+        url: alchemy.new_admin_element_path(page_version_id: @page_version.id),
+        icon: :add,
+        hotkey: "alt+n",
+        label: Alchemy.t("New Element"),
+        dialog_options: {
+          title: Alchemy.t("New Element"),
+          size: "320x125"
+        },
+        if_permitted_to: [:create, Alchemy::Element]
+      ) %>
+      <%= toolbar_button(
+        url: alchemy.admin_clipboard_path(remarkable_type: "elements"),
+        label: Alchemy.t("Show clipboard"),
+        icon: :clipboard,
+        icon_style: clipboard_empty?("elements") ? "line" : "fill",
+        dialog_options: {
+          title: Alchemy.t("Clipboard"),
+          size: "400x305"
+        },
+        link_options: {
+          id: "clipboard_button"
+        },
+        if_permitted_to: [:show, :alchemy_clipboard]
+      ) %>
+      <sl-tooltip content="<%= Alchemy.t("Collapse all elements") %>" placement="top-end" class="right">
+        <button id="collapse-all-elements-button" class="icon_button">
+          <alchemy-icon name="contract-up-down"></alchemy-icon>
+        </button>
+      </sl-tooltip>
+    </div>
+    <% if @fixed_elements.any? %>
+      <sl-tab-group id="fixed-elements">
+        <sl-tab slot="nav" panel="main-content-elements">
+          <%= Alchemy.t(:main_content) %>
+        </sl-tab>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
+            <%= element.display_name %>
+          </sl-tab>
+        <% end %>
+        <sl-tab-panel
+          name="main-content-elements"
+          class="sortable-elements scrollable-elements"
+          data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+          data-element-name="main-content-elements"
+          id="main-content-elements"
+          style="--padding: 0"
+        >
+          <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+        </sl-tab-panel>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
+            <%= render Alchemy::ElementEditor.new(element) %>
+          </sl-tab-panel>
+        <% end %>
+      </sl-tab-group>
+    <% else %>
+      <div
+        id="main-content-elements"
+        class="sortable-elements scrollable-elements"
+        data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+        data-element-name="main-content-elements"
+      >
+        <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+      </div>
     <% end %>
-    <sl-tab-panel
-      name="main-content-elements"
-      class="sortable-elements scrollable-elements"
-      data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-      data-element-name="main-content-elements"
-      id="main-content-elements"
-      style="--padding: 0"
-    >
-      <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-    </sl-tab-panel>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
-        <%= render Alchemy::ElementEditor.new(element) %>
-      </sl-tab-panel>
-    <% end %>
-  </sl-tab-group>
-<% else %>
-  <div
-    id="main-content-elements"
-    class="sortable-elements scrollable-elements"
-    data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-    data-element-name="main-content-elements"
-  >
-    <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-  </div>
+  </alchemy-elements-window>
 <% end %>