From 1e59d5030c4dfd70bd4098dec6075dc62ab4e31f Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <122262394+sascha-karnatz@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:15:47 +0200
Subject: [PATCH] Move fixed elements functions into alchemy_admin package

Move createTab and removeTab functions into alchemy_admin - package. These two functions are still available in the Alchemy.FixedElements - namespace until we move all calls out of these js.erb - files. The functions are also migrated to vanilla Javascript.
---
 app/assets/javascripts/alchemy/admin.js       |  1 -
 .../alchemy/alchemy.fixed_elements.js         | 36 -------------------
 app/javascript/alchemy_admin.js               |  2 ++
 .../element_editor/delete_element_button.js   |  3 +-
 .../alchemy_admin/fixed_elements.js           | 24 +++++++++++++
 5 files changed, 28 insertions(+), 38 deletions(-)
 delete mode 100644 app/assets/javascripts/alchemy/alchemy.fixed_elements.js
 create mode 100644 app/javascript/alchemy_admin/fixed_elements.js

diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js
index 4344b7c90d..037d4c6044 100644
--- a/app/assets/javascripts/alchemy/admin.js
+++ b/app/assets/javascripts/alchemy/admin.js
@@ -5,5 +5,4 @@
 //= require handlebars
 //= require alchemy/templates
 //= require alchemy/alchemy.dialog
-//= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.image_overlay
diff --git a/app/assets/javascripts/alchemy/alchemy.fixed_elements.js b/app/assets/javascripts/alchemy/alchemy.fixed_elements.js
deleted file mode 100644
index b8538c4c56..0000000000
--- a/app/assets/javascripts/alchemy/alchemy.fixed_elements.js
+++ /dev/null
@@ -1,36 +0,0 @@
-window.Alchemy = Alchemy || {}
-
-Alchemy.FixedElements = {
-  WRAPPER: '<sl-tab-group id="fixed-elements" />',
-  TABS: '<sl-tab slot="nav" panel="main-content-elements">{{label}}</sl-tab>',
-
-  // Creates a fixed element tab.
-  createTab: function (element_id, label) {
-    var $fixed_elements = $("#fixed-elements")
-    var panel_name = "fixed-element-" + element_id
-
-    var $tab =
-      '<sl-tab slot="nav" panel="' + panel_name + '">' + label + "</sl-tab>"
-    $fixed_elements.append($tab)
-
-    var $panel = $(
-      '<sl-tab-panel name="' + panel_name + '" style="--padding: 0" />'
-    )
-    $fixed_elements.append($panel)
-    window.requestAnimationFrame(function () {
-      $fixed_elements.get(0).show(panel_name)
-    })
-  },
-
-  removeTab: function (element_id) {
-    var $fixed_elements = $("#fixed-elements")
-
-    $fixed_elements
-      .find('sl-tab[panel="fixed-element-' + element_id + '"]')
-      .remove()
-    $fixed_elements
-      .find('sl-tab-panel[name="fixed-element-' + element_id + '"]')
-      .remove()
-    $fixed_elements.get(0).show("main-content-elements")
-  }
-}
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
index f88abd08c1..593812c7a0 100644
--- a/app/javascript/alchemy_admin.js
+++ b/app/javascript/alchemy_admin.js
@@ -6,6 +6,7 @@ import Rails from "@rails/ujs"
 import GUI from "alchemy_admin/gui"
 import { translate } from "alchemy_admin/i18n"
 import Dirty from "alchemy_admin/dirty"
+import * as FixedElements from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import ImageLoader from "alchemy_admin/image_loader"
@@ -39,6 +40,7 @@ Object.assign(Alchemy, {
   ...Dirty,
   GUI,
   t: translate, // Global utility method for translating a given string
+  FixedElements,
   growl,
   ImageLoader: ImageLoader.init,
   ImageCropper,
diff --git a/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js b/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js
index 48b9a624b2..343dd170f4 100644
--- a/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js
+++ b/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js
@@ -1,3 +1,4 @@
+import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { confirmToDeleteDialog } from "alchemy_admin/confirm_dialog"
@@ -20,7 +21,7 @@ export class DeleteElementButton extends HTMLElement {
     const elementEditor = this.closest("alchemy-element-editor")
     elementEditor.addEventListener("transitionend", () => {
       if (elementEditor.fixed) {
-        Alchemy.FixedElements.removeTab(elementEditor.elementId)
+        removeTab(elementEditor.elementId)
       }
       elementEditor.remove()
     })
diff --git a/app/javascript/alchemy_admin/fixed_elements.js b/app/javascript/alchemy_admin/fixed_elements.js
new file mode 100644
index 0000000000..78b5a1a888
--- /dev/null
+++ b/app/javascript/alchemy_admin/fixed_elements.js
@@ -0,0 +1,24 @@
+// Creates a fixed element tab.
+export function createTab(element_id, label) {
+  const fixed_elements = document.getElementById("fixed-elements")
+  const panel_name = `fixed-element-${element_id}`
+
+  const tab = `<sl-tab slot="nav" panel="${panel_name}">${label}</sl-tab>`
+  const panel = `<sl-tab-panel name="${panel_name}" style="--padding: 0" />`
+
+  fixed_elements.innerHTML += tab + panel
+
+  window.requestAnimationFrame(function () {
+    fixed_elements.show(panel_name)
+  })
+}
+
+export function removeTab(element_id) {
+  const fixed_elements = document.getElementById("fixed-elements")
+  const panel_name = `fixed-element-${element_id}`
+
+  fixed_elements.querySelector(`sl-tab[panel="${panel_name}"]`).remove()
+  fixed_elements.querySelector(`sl-tab-panel[name="${panel_name}"]`).remove()
+
+  fixed_elements.show("main-content-elements")
+}