From d8769e27d1912059db0fdfaa354c3cafcf05929e Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Thu, 21 Mar 2024 18:02:33 +0100
Subject: [PATCH 1/2] Fix order of content_for in pages edit template

they should not be nested like this
---
 app/views/alchemy/admin/pages/edit.html.erb | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index 1e709a4dd6..005ed85227 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -127,12 +127,11 @@
 </div>
 <% end %>
 
-<% content_for :javascripts do %>
-
 <% content_for :javascript_includes do %>
   <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
+<% content_for :javascripts do %>
 <script type="text/javascript" charset="utf-8">
   $(document).one('turbo:load', function() {
     $('#unlock_page_form, #publish_page_form').on('submit', function(event) {

From 857c2b307a568493240660e99514f50a9efdb1d1 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 22 Mar 2024 14:59:40 +0100
Subject: [PATCH 2/2] Use Turbo Frame for elements_window

For now we need to disable the submit buttons inside,
because we still use Rails UJS and the remote forms
feature that uses js.erb responses from the controller.

Those need to be refactored into Turbo Streams, but
this is too much for now.
---
 app/assets/javascripts/alchemy/admin.js       |   1 -
 .../alchemy/alchemy.elements_window.js.coffee | 108 ------------------
 app/assets/stylesheets/alchemy/elements.scss  |   1 +
 app/javascript/alchemy_admin.js               |   1 +
 .../components/elements_window.js             |  81 +++++++++++++
 .../_add_nested_element_form.html.erb         |   2 +-
 .../alchemy/admin/elements/_footer.html.erb   |   2 +-
 .../alchemy/admin/elements/_toolbar.html.erb  |   3 +-
 .../alchemy/admin/elements/index.html.erb     | 104 +++++++++++------
 app/views/alchemy/admin/pages/edit.html.erb   |  48 +-------
 10 files changed, 163 insertions(+), 188 deletions(-)
 delete mode 100644 app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
 create mode 100644 app/javascript/alchemy_admin/components/elements_window.js

diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
index 597bfed13d..98c553cc1a 100644
--- a/app/assets/javascripts/alchemy/admin.js
+++ b/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
diff --git a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee b/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
deleted file mode 100644
index cd0b617b20..0000000000
--- a/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee
+++ /dev/null
@@ -1,108 +0,0 @@
-window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
-
-# Adds buttons into a toolbar inside of overlay windows
-Alchemy.ToolbarButton = (options) ->
-  $btn = $("<sl-tooltip content='#{options.label}' placement='top-#{options.align}'></sl-tooltip>")
-  if options.align
-    $btn.addClass(options.class)
-  if options.buttonId
-    $btn.attr(id: options.buttonId)
-  $lnk = $("<a class='icon_button' href='#' />")
-  if options.hotkey
-    $lnk.attr('data-alchemy-hotkey', options.hotkey)
-  $lnk.on "click", (e) ->
-    e.preventDefault()
-    options.onClick(e)
-    return
-  $lnk.append "<alchemy-icon name='#{options.iconClass}' icon-style='#{options.iconStyle || "line"}'></alchemy-icon>"
-  $btn.append $lnk
-  $btn
-
-Alchemy.ElementsWindow =
-
-  init: (url, options, callback) ->
-    @hidden = false
-    @$body = $('body')
-    @element_window = $('<div id="alchemy_elements_window"/>')
-    @element_area = $('<div id="element_area"/>')
-    @url = url
-    @options = options
-    @callback = callback
-    @element_window.append @createToolbar(options.toolbarButtons)
-    @element_window.append @element_area
-    Alchemy.GUI.init(@element_window)
-    @button = $('#element_window_button')
-    @button.on "click", =>
-      @hide()
-      false
-
-    window.requestAnimationFrame =>
-      spinner = new Alchemy.Spinner('medium')
-      spinner.spin @element_area[0]
-
-    window.addEventListener 'message', (event) =>
-      data = event.data
-      if data?.message == 'Alchemy.focusElementEditor'
-        element = document.getElementById("element_#{data.element_id}")
-        Alchemy.ElementsWindow.show()
-        element?.focusElement()
-      true
-
-    @$body.on "click", (evt) =>
-      unless evt.target.closest(".element-editor")
-        @element_area.find('.element-editor').removeClass('selected')
-        Alchemy.PreviewWindow.postMessage(message: 'Alchemy.blurElements')
-      return
-
-    $('#main_content').append(@element_window)
-    @show()
-    @reload()
-
-  createToolbar: (buttons) ->
-    @toolbar = $('<div class="elements-window-toolbar" />')
-    buttons.push
-      label: Alchemy.t("Collapse all elements")
-      iconClass: "contract-up-down-line"
-      align: "end"
-      class: "right"
-      onClick: =>
-        $("alchemy-element-editor:not([compact]):not([fixed])").each () ->
-          @collapse()
-    for btn in buttons
-      @toolbar.append Alchemy.ToolbarButton(btn)
-    @toolbar.append @collapseAllBtn
-
-  reload: ->
-    $.get @url, (data) =>
-      @element_area.html data
-      Alchemy.SortableElements()
-      if @callback
-        @callback.call()
-    .fail (xhr, status, error) =>
-      Alchemy.Dialog::show_error(xhr, error, @element_area)
-
-  hide: ->
-    @$body.removeClass('elements-window-visible');
-    @hidden = true
-    @toggleButton()
-
-  show: ->
-    @$body.addClass('elements-window-visible');
-    @hidden = false
-    @toggleButton()
-
-  toggleButton: ->
-    if @hidden
-      @button.find('label').text(@options.texts.showElements)
-      @button.find('alchemy-icon').attr("name", "menu-fold")
-      @button.off('click')
-      @button.on "click", =>
-        @show()
-        false
-    else
-      @button.find('label').text(@options.texts.hideElements)
-      @button.find('alchemy-icon').attr("name", "menu-unfold")
-      @button.off('click')
-      @button.on "click", =>
-        @hide()
-        false
diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
index 206cbc55a4..1dc1747c36 100644
--- a/app/assets/stylesheets/alchemy/elements.scss
+++ b/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;
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index 0e94f13757..be1a37835a 100644
--- a/app/javascript/alchemy_admin.js
+++ b/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"
diff --git a/app/javascript/alchemy_admin/components/elements_window.js b/app/javascript/alchemy_admin/components/elements_window.js
new file mode 100644
index 0000000000..04be4027e5
--- /dev/null
+++ b/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)
diff --git a/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb b/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb
index 4b355ba722..b7dbb2fd3d 100644
--- a/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb
+++ b/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 %>
diff --git a/app/views/alchemy/admin/elements/_footer.html.erb b/app/views/alchemy/admin/elements/_footer.html.erb
index 43e9c03608..ce1eae67b7 100644
--- a/app/views/alchemy/admin/elements/_footer.html.erb
+++ b/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>
diff --git a/app/views/alchemy/admin/elements/_toolbar.html.erb b/app/views/alchemy/admin/elements/_toolbar.html.erb
index d3387bcad9..e900d0433c 100644
--- a/app/views/alchemy/admin/elements/_toolbar.html.erb
+++ b/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">
diff --git a/app/views/alchemy/admin/elements/index.html.erb b/app/views/alchemy/admin/elements/index.html.erb
index 41d1914bca..9ce2c9cd27 100644
--- a/app/views/alchemy/admin/elements/index.html.erb
+++ b/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 %>
diff --git a/app/views/alchemy/admin/pages/edit.html.erb b/app/views/alchemy/admin/pages/edit.html.erb
index 005ed85227..facfe13f38 100644
--- a/app/views/alchemy/admin/pages/edit.html.erb
+++ b/app/views/alchemy/admin/pages/edit.html.erb
@@ -2,6 +2,8 @@
 
 <% content_for(:main_menu_style) { 'collapsed-menu' } %>
 
+<% content_for(:alchemy_body_class) { 'elements-window-visible' } %>
+
 <% content_for(:toolbar) do %>
 <div class="toolbar_buttons">
   <div class="toolbar_button">
@@ -131,6 +133,10 @@
   <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
+<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id) do %>
+  <alchemy-spinner></alchemy-spinner>
+<% end %>
+
 <% content_for :javascripts do %>
 <script type="text/javascript" charset="utf-8">
   $(document).one('turbo:load', function() {
@@ -141,48 +147,6 @@
     });
     Alchemy.PagePublicationFields();
     Alchemy.PageLeaveObserver();
-    Alchemy.ElementsWindow.init('<%= alchemy.admin_elements_path(page_version_id: @page_version.id) %>', {
-      texts: {
-        title: '<%= Alchemy.t("Elements") %>',
-        dirtyTitle: '<%= Alchemy.t("Warning!") %>',
-        dirtyMessage: '<%= Alchemy.t(:element_dirty_close_window_notice) %>',
-        ok_label: '<%= Alchemy.t("Yes") %>',
-        cancel_label: '<%= Alchemy.t("No") %>',
-        hideElements: '<%= Alchemy.t(:hide_elements) %>',
-        showElements: '<%= Alchemy.t(:show_elements) %>'
-      },
-      toolbarButtons: [
-        {
-          label: '<%= Alchemy.t("New Element") %>',
-          hotkey: 'alt+n',
-          iconClass: 'add',
-          align: 'start',
-          onClick: function() {
-            Alchemy.openDialog('<%= alchemy.new_admin_element_path(page_version_id: @page_version.id) %>', {
-              title: '<%= Alchemy.t("New Element") %>',
-              size: '320x125'
-            });
-          }
-        },
-        {
-          label: '<%= Alchemy.t("Show clipboard") %>',
-          iconClass: 'clipboard',
-          iconStyle: '<%= clipboard_empty?("elements") ? "line" : "fill" %>',
-          buttonId: 'clipboard_button',
-          onClick: function() {
-            Alchemy.openDialog('<%= alchemy.admin_clipboard_path(remarkable_type: "elements") %>', {
-              title :'<%= Alchemy.t("Clipboard") %>',
-              size: '400x305'
-            });
-          }
-        }
-      ]
-    }, function() {
-      if (window.location.hash) {
-        $(window.location.hash).trigger('FocusElementEditor.Alchemy');
-      }
-    });
-
     Alchemy.PreviewWindow.init(<%== @preview_urls.first %>);
 
     $('#preview_size').bind('open.selectBoxIt', function (e) {