alchemy_cms 8.2.10 → 8.3.0

data/app/javascript/alchemy_admin/components/color_select.js

@@ -14,12 +14,12 @@ const formatItem = (object) => {
 }
 
 class ColorSelect extends HTMLElement {
+  #select2 = null
+
   connectedCallback() {
     if (this.select) {
       this.#initializeSelect2()
-      $(this.select).on("change", (event) =>
-        this.#toggleColorPicker(event.val === "custom_color")
-      )
+      this.#select2.on("change", this.#onSelectChange)
     } else {
       this.colorInput?.addEventListener("input", this)
       this.textInput?.addEventListener("input", this)
@@ -41,6 +41,15 @@ class ColorSelect extends HTMLElement {
   disconnectedCallback() {
     this.colorInput?.removeEventListener("input", this)
     this.textInput?.removeEventListener("input", this)
+    if (this.#select2) {
+      this.#select2.off("change", this.#onSelectChange)
+      this.#select2.select2("destroy")
+      this.#select2 = null
+    }
+  }
+
+  #onSelectChange = (event) => {
+    this.#toggleColorPicker(event.val === "custom_color")
   }
 
   #initializeSelect2() {
@@ -50,7 +59,7 @@ class ColorSelect extends HTMLElement {
       formatResult: formatItem,
       formatSelection: formatItem
     }
-    $(this.select).select2(options)
+    this.#select2 = $(this.select).select2(options)
   }
 
   #toggleColorPicker(enabled = true) {

data/app/javascript/alchemy_admin/components/datepicker.js

@@ -1,31 +1,24 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { translate, currentLocale } from "alchemy_admin/i18n"
 import flatpickr from "flatpickr"
 
 const locale = currentLocale()
 
-class Datepicker extends AlchemyHTMLElement {
-  static properties = {
-    inputType: { default: "date" }
-  }
-
-  constructor() {
-    super()
-    this.flatpickr = undefined
-  }
-
+class Datepicker extends HTMLElement {
   // Load the locales for flatpickr before setting it up.
-  async connected() {
+  async connectedCallback() {
     // English is the default locale for flatpickr, so we don't need to load it
     if (locale !== "en") {
       await import(`flatpickr/${locale}.js`)
     }
+    // Bail out if the element was disconnected while the locale was loading.
+    // Otherwise flatpickr would leak a calendar onto a detached input.
+    if (!this.isConnected) return
 
     this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)
   }
 
-  disconnected() {
-    this.flatpickr.destroy()
+  disconnectedCallback() {
+    this.flatpickr?.destroy()
   }
 
   get flatpickrOptions() {
@@ -56,6 +49,10 @@ class Datepicker extends AlchemyHTMLElement {
   get inputField() {
     return this.querySelector("input")
   }
+
+  get inputType() {
+    return this.getAttribute("input-type") || "date"
+  }
 }
 
 customElements.define("alchemy-datepicker", Datepicker)

data/app/javascript/alchemy_admin/components/dialog_link.js

@@ -1,11 +1,14 @@
 import { Dialog } from "alchemy_admin/dialog"
 
 export class DialogLink extends HTMLAnchorElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+  }
+
   handleEvent(evt) {
     if (!this.disabled) {
       this.openDialog()

data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js

@@ -3,14 +3,17 @@ import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
-import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
+import { dispatchPageDirtyEvent } from "alchemy_admin/utils/dispatch_page_dirty_event"
 
 export class DeleteElementButton extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.button?.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.button?.removeEventListener("click", this)
+  }
+
   async handleEvent() {
     const confirmed = await openConfirmDialog(this.message)
     if (confirmed) {

data/app/javascript/alchemy_admin/components/element_editor.js

@@ -1,22 +1,22 @@
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+import { dispatchPageDirtyEvent } from "alchemy_admin/utils/dispatch_page_dirty_event"
 import { growl } from "alchemy_admin/growler"
 
 import "alchemy_admin/components/element_editor/publish_element_button"
 import "alchemy_admin/components/element_editor/delete_element_button"
 
-export function dispatchPageDirtyEvent(data) {
-  document.dispatchEvent(
-    new CustomEvent("alchemy:page-dirty", {
-      detail: { tooltip: data.publishButtonTooltip }
-    })
-  )
-}
-
 export class ElementEditor extends HTMLElement {
-  constructor() {
-    super()
+  #form = null
+  #header = null
+  #toggleButton = null
+
+  connectedCallback() {
+    // The placeholder while be being dragged is empty.
+    if (this.classList.contains("ui-sortable-placeholder")) {
+      return
+    }
 
     // Add event listeners
     this.addEventListener("click", this)
@@ -27,24 +27,16 @@ export class ElementEditor extends HTMLElement {
 
     // Dirty observer still needs to be jQuery
     // in order to support select2.
-    $(this.form).on("change", this.onChange)
+    this.#form = this.form
+    if (this.#form) {
+      $(this.#form).on("change", this.onChange)
+    }
 
-    this.header?.addEventListener("dblclick", () => {
-      this.toggle()
-    })
-    this.toggleButton?.addEventListener("click", (evt) => {
-      const elementEditor = evt.target.closest("alchemy-element-editor")
-      if (elementEditor === this) {
-        this.toggle()
-      }
-    })
-  }
+    this.#header = this.header
+    this.#header?.addEventListener("dblclick", this.#onHeaderDblclick)
 
-  connectedCallback() {
-    // The placeholder while be being dragged is empty.
-    if (this.classList.contains("ui-sortable-placeholder")) {
-      return
-    }
+    this.#toggleButton = this.toggleButton
+    this.#toggleButton?.addEventListener("click", this.#onToggleClick)
 
     // When newly created, focus the element and refresh the preview
     if (this.hasAttribute("created")) {
@@ -56,6 +48,20 @@ export class ElementEditor extends HTMLElement {
     }
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+    this.removeEventListener("alchemy:element-update-title", this)
+    this.removeEventListener("ajax:complete", this)
+    if (this.#form) {
+      $(this.#form).off("change", this.onChange)
+      this.#form = null
+    }
+    this.#header?.removeEventListener("dblclick", this.#onHeaderDblclick)
+    this.#header = null
+    this.#toggleButton?.removeEventListener("click", this.#onToggleClick)
+    this.#toggleButton = null
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "click":
@@ -79,7 +85,7 @@ export class ElementEditor extends HTMLElement {
     }
   }
 
-  onChange(event) {
+  onChange = (event) => {
     const target = event.target
     // SortableJS fires a native change event :/
     // and we do not want to set the element editor dirty
@@ -87,7 +93,7 @@ export class ElementEditor extends HTMLElement {
     if (target.classList.contains("nested-elements")) {
       return
     }
-    this.closest("alchemy-element-editor").setDirty(target)
+    this.setDirty(target)
     event.stopPropagation()
     return false
   }
@@ -579,6 +585,17 @@ export class ElementEditor extends HTMLElement {
   get previewWindow() {
     return document.getElementById("alchemy_preview_window")
   }
+
+  #onHeaderDblclick = () => {
+    this.toggle()
+  }
+
+  #onToggleClick = (evt) => {
+    const elementEditor = evt.target.closest("alchemy-element-editor")
+    if (elementEditor === this) {
+      this.toggle()
+    }
+  }
 }
 
 customElements.define("alchemy-element-editor", ElementEditor)

data/app/javascript/alchemy_admin/components/element_select.js

@@ -20,10 +20,8 @@ const formatItem = (icon, text, hint) => {
   `
 }
 
-export class ElementSelect extends HTMLElement {
-  constructor() {
-    super()
-  }
+class ElementSelect extends HTMLElement {
+  #select2 = null
 
   connectedCallback() {
     const results = this.options
@@ -48,7 +46,12 @@ export class ElementSelect extends HTMLElement {
       formatSelection,
       placeholder: this.placeholder
     }
-    $(this.inputField).select2(options)
+    this.#select2 = $(this.inputField).select2(options)
+  }
+
+  disconnectedCallback() {
+    this.#select2?.select2("destroy")
+    this.#select2 = null
   }
 
   get options() {

data/app/javascript/alchemy_admin/components/elements_window.js

@@ -4,22 +4,51 @@ class ElementsWindow extends HTMLElement {
   #visible = true
   #turboFrame = null
 
-  constructor() {
-    super()
-    this.#attachEvents()
-  }
-
   connectedCallback() {
-    this.toggleButton?.addEventListener("click", (evt) => {
-      evt.preventDefault()
-      this.toggle()
-    })
+    this.toggleButton?.addEventListener("click", this.#onToggleClick)
+    this.collapseButton?.addEventListener("click", this.#onCollapseClick)
+    window.addEventListener("message", this.#onWindowMessage)
+    document.body.addEventListener("click", this.#onBodyClick)
     if (window.location.hash) {
       this.focusElementEditor(window.location.hash)
     }
     this.resize()
   }
 
+  disconnectedCallback() {
+    this.toggleButton?.removeEventListener("click", this.#onToggleClick)
+    this.collapseButton?.removeEventListener("click", this.#onCollapseClick)
+    window.removeEventListener("message", this.#onWindowMessage)
+    document.body.removeEventListener("click", this.#onBodyClick)
+  }
+
+  #onToggleClick = (evt) => {
+    evt.preventDefault()
+    this.toggle()
+  }
+
+  #onCollapseClick = () => {
+    this.collapseAllElements()
+  }
+
+  #onWindowMessage = (event) => {
+    const data = event.data
+    if (data?.message == "Alchemy.focusElementEditor") {
+      const element = document.getElementById(`element_${data.element_id}`)
+      this.show()
+      element?.focusElement()
+    }
+  }
+
+  #onBodyClick = (evt) => {
+    if (!evt.target.closest("alchemy-element-editor")) {
+      this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
+        editor.classList.remove("selected")
+      })
+      this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
+    }
+  }
+
   collapseAllElements() {
     this.querySelectorAll(
       "alchemy-element-editor:not([compact]):not([fixed])"
@@ -101,28 +130,6 @@ class ElementsWindow extends HTMLElement {
     this.turboFrame.style.transitionProperty = dragged ? "none" : null
     this.turboFrame.style.pointerEvents = dragged ? "none" : null
   }
-
-  #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")
-        })
-        this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
-      }
-    })
-  }
 }
 
 customElements.define("alchemy-elements-window", ElementsWindow)

data/app/javascript/alchemy_admin/components/elements_window_handle.js

@@ -7,14 +7,18 @@ class ElementsWindowHandle extends HTMLElement {
   #minWidth = MIN_WIDTH
   #maxWidth = MAX_WIDTH
 
-  constructor() {
-    super()
-
+  connectedCallback() {
     this.addEventListener("mousedown", this)
     window.addEventListener("mousemove", this)
     window.addEventListener("mouseup", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("mousedown", this)
+    window.removeEventListener("mousemove", this)
+    window.removeEventListener("mouseup", this)
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "mousedown":

data/app/javascript/alchemy_admin/components/file_editor.js

@@ -1,6 +1,5 @@
 class FileEditor extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.deleteLink = this.querySelector(".remove_file_link")
     this.fileIcon = this.querySelector(".file_icon")
     this.fileName = this.querySelector(".file_name")
@@ -9,6 +8,10 @@ class FileEditor extends HTMLElement {
     this.deleteLink?.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.deleteLink?.removeEventListener("click", this)
+  }
+
   handleEvent(event) {
     if (event.type === "click") this.removeFile()
     event.stopPropagation()

data/app/javascript/alchemy_admin/components/ingredient_group.js

@@ -1,9 +1,7 @@
 export class IngredientGroup extends HTMLDetailsElement {
   #localStorageKey = "Alchemy.expanded_ingredient_groups"
 
-  constructor() {
-    super()
-
+  connectedCallback() {
     this.addEventListener("toggle", this)
 
     if (this.isInLocalStorage) {
@@ -11,6 +9,10 @@ export class IngredientGroup extends HTMLDetailsElement {
     }
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("toggle", this)
+  }
+
   /**
    * Toggle visibility of the ingredient fields in this group
    */
@@ -21,7 +23,7 @@ export class IngredientGroup extends HTMLDetailsElement {
       this.toggleIcon.name = "arrow-down-s"
       if (!this.isInLocalStorage) expanded_ingredient_groups.push(this.id)
     } else {
-      this.toggleIcon.name = "arrow-left-s"
+      this.toggleIcon.name = "arrow-right-s"
       expanded_ingredient_groups = expanded_ingredient_groups.filter(
         (value) => value !== this.id
       )

data/app/javascript/alchemy_admin/components/link_buttons/link_button.js

@@ -1,6 +1,5 @@
 class LinkButton extends HTMLButtonElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("click", this)
     this.classList.add("icon_button")
     // Prevent accidental form submits if this component is wrapped inside a form

data/app/javascript/alchemy_admin/components/link_buttons/unlink_button.js

@@ -1,6 +1,5 @@
 class UnlinkButton extends HTMLButtonElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("click", this)
     this.classList.add("icon_button")
     // Prevent accidental form submits if this component is wrapped inside a form

data/app/javascript/alchemy_admin/components/link_buttons.js

@@ -2,12 +2,16 @@ import "alchemy_admin/components/link_buttons/link_button"
 import "alchemy_admin/components/link_buttons/unlink_button"
 
 class LinkButtons extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("alchemy:link", this)
     this.addEventListener("alchemy:unlink", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("alchemy:link", this)
+    this.removeEventListener("alchemy:unlink", this)
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "alchemy:link":

data/app/javascript/alchemy_admin/components/list_filter.js

@@ -2,41 +2,30 @@ const DEFAULT_DEBOUNCE_TIME = 150
 
 class ListFilter extends HTMLElement {
   #debounceTimer
+  #filterField = null
+  #clearButton = null
 
-  constructor() {
-    super()
-    this.#attachEvents()
-  }
-
-  #attachEvents() {
+  connectedCallback() {
     if (this.hotkey) {
-      key(this.hotkey, () => {
-        this.filterField.focus()
-        return false
-      })
+      key(this.hotkey, this.#onHotkey)
     }
-    this.filterField.addEventListener("keyup", () => {
-      clearTimeout(this.#debounceTimer)
-      this.#debounceTimer = setTimeout(() => {
-        const term = this.filterField.value
-        this.clearButton.style.visibility = term ? "visible" : "hidden"
-        this.filter(term)
-      }, this.debounceTime)
-    })
-    this.clearButton.addEventListener("click", (e) => {
-      e.preventDefault()
-      this.clear()
-    })
-    this.filterField.addEventListener("focus", () =>
-      key.setScope("list_filter")
-    )
-    key("esc", "list_filter", () => {
-      this.clear()
-      this.filterField.blur()
-    })
+    this.#filterField = this.filterField
+    this.#filterField.addEventListener("keyup", this.#onKeyup)
+    this.#filterField.addEventListener("focus", this.#onFocus)
+
+    this.#clearButton = this.clearButton
+    this.#clearButton.addEventListener("click", this.#onClearClick)
+
+    key("esc", "list_filter", this.#onEscape)
   }
 
   disconnectedCallback() {
+    clearTimeout(this.#debounceTimer)
+    this.#filterField?.removeEventListener("keyup", this.#onKeyup)
+    this.#filterField?.removeEventListener("focus", this.#onFocus)
+    this.#filterField = null
+    this.#clearButton?.removeEventListener("click", this.#onClearClick)
+    this.#clearButton = null
     if (this.hotkey) {
       key.unbind(this.hotkey)
     }
@@ -112,6 +101,32 @@ class ListFilter extends HTMLElement {
   get hotkey() {
     return this.getAttribute("hotkey")
   }
+
+  #onHotkey = () => {
+    this.filterField.focus()
+    return false
+  }
+
+  #onKeyup = () => {
+    clearTimeout(this.#debounceTimer)
+    this.#debounceTimer = setTimeout(() => {
+      const term = this.filterField.value
+      this.clearButton.style.visibility = term ? "visible" : "hidden"
+      this.filter(term)
+    }, this.debounceTime)
+  }
+
+  #onFocus = () => key.setScope("list_filter")
+
+  #onClearClick = (e) => {
+    e.preventDefault()
+    this.clear()
+  }
+
+  #onEscape = () => {
+    this.clear()
+    this.filterField.blur()
+  }
 }
 
 customElements.define("alchemy-list-filter", ListFilter)

data/app/javascript/alchemy_admin/components/message.js

@@ -1,15 +1,7 @@
 const DISMISS_DELAY = 5000
 
 class Message extends HTMLElement {
-  #message
-
-  constructor() {
-    super()
-    this.#message = this.innerHTML
-    if (this.dismissable || this.type === "error") {
-      this.addEventListener("click", this)
-    }
-  }
+  #dismissTimeoutId = null
 
   handleEvent(event) {
     if (event.type === "click") {
@@ -18,18 +10,33 @@ class Message extends HTMLElement {
   }
 
   connectedCallback() {
-    this.innerHTML = `
-      <alchemy-icon name="${this.iconName}"></alchemy-icon>
-      ${this.dismissable && this.type === "error" ? '<alchemy-icon name="close"></alchemy-icon>' : ""}
-      ${this.#message}
-    `
+    if (!this.querySelector(":scope > alchemy-icon")) {
+      const closeIcon =
+        this.dismissable && this.type === "error"
+          ? '<alchemy-icon name="close"></alchemy-icon>'
+          : ""
+      this.insertAdjacentHTML(
+        "afterbegin",
+        `<alchemy-icon name="${this.iconName}"></alchemy-icon>${closeIcon}`
+      )
+    }
+    if (this.dismissable || this.type === "error") {
+      this.addEventListener("click", this)
+    }
     if (this.dismissable && this.type !== "error") {
-      setTimeout(() => {
+      this.#dismissTimeoutId = setTimeout(() => {
         this.dismiss()
       }, this.dismissDelay)
     }
   }
 
+  disconnectedCallback() {
+    if (this.#dismissTimeoutId !== null) {
+      clearTimeout(this.#dismissTimeoutId)
+      this.#dismissTimeoutId = null
+    }
+  }
+
   dismiss() {
     this.addEventListener("transitionend", () => this.remove())
     this.classList.add("dismissed")

data/app/javascript/alchemy_admin/components/overlay.js

@@ -1,13 +1,11 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
-
-class Overlay extends AlchemyHTMLElement {
-  render() {
-    return `
+class Overlay extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
       <alchemy-spinner></alchemy-spinner>
       <div id="overlay_text_box">
-        <span id="overlay_text">${this.getAttribute("text")}</span>
+        <span id="overlay_text">${this.getAttribute("text") ?? ""}</span>
       </div>
-      `
+    `
   }
 
   set show(value) {