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

@@ -5,5 +5,4 @@
 //= require handlebars
 //= require alchemy/templates
 //= require alchemy/alchemy.dialog
-//= require alchemy/alchemy.fixed_elements
 //= require alchemy/alchemy.image_overlay

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,

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()
     })

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")
+}