alchemy_cms 8.2.7 → 8.3.0

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

@@ -21,9 +21,7 @@ const formatItem = (icon, text, hint) => {
 }
 
 class ElementSelect extends HTMLElement {
-  constructor() {
-    super()
-  }
+  #select2 = null
 
   connectedCallback() {
     const results = this.options
@@ -48,7 +46,12 @@ 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) {

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

@@ -1,31 +1,44 @@
 // Handles the page publication date fields
 export class PagePublicationFields extends HTMLElement {
   connectedCallback() {
-    const public_on_picker = this.querySelector("input#page_public_on")
-    const public_until_picker = this.querySelector("input#page_public_until")
-    const publication_date_fields = this.querySelector(
-      ".page-publication-date-fields"
-    )
-    const public_field = this.querySelector("#page_public")
-
-    if (!public_field) return
-
-    public_field.addEventListener("click", function (evt) {
-      const checkbox = evt.target
-      const date = new Date()
-      const now = new Date(
-        date.getTime() - date.getTimezoneOffset() * 60000
-      ).toISOString()
-
-      if (checkbox.checked) {
-        publication_date_fields.classList.remove("hidden")
-        public_on_picker.value = now.substring(0, now.indexOf("T") + 6)
-      } else {
-        publication_date_fields.classList.add("hidden")
-        public_on_picker.value = ""
-      }
-      public_until_picker.value = ""
-    })
+    this.publicField?.addEventListener("click", this.#onClick)
+  }
+
+  disconnectedCallback() {
+    this.publicField?.removeEventListener("click", this.#onClick)
+  }
+
+  #onClick = (evt) => {
+    const checkbox = evt.target
+    const date = new Date()
+    const now = new Date(
+      date.getTime() - date.getTimezoneOffset() * 60000
+    ).toISOString()
+
+    if (checkbox.checked) {
+      this.publicationDateFields.classList.remove("hidden")
+      this.publicOnPicker.value = now.substring(0, now.indexOf("T") + 6)
+    } else {
+      this.publicationDateFields.classList.add("hidden")
+      this.publicOnPicker.value = ""
+    }
+    this.publicUntilPicker.value = ""
+  }
+
+  get publicField() {
+    return this.querySelector("#page_public")
+  }
+
+  get publicOnPicker() {
+    return this.querySelector("input#page_public_on")
+  }
+
+  get publicUntilPicker() {
+    return this.querySelector("input#page_public_until")
+  }
+
+  get publicationDateFields() {
+    return this.querySelector(".page-publication-date-fields")
   }
 }
 

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

@@ -1,9 +1,12 @@
 class PictureDescriptionSelect extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("change", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("change", this)
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "change":

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

@@ -8,9 +8,7 @@ const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
 const THUMBNAIL_SIZE = "160x120"
 
 export class PictureEditor extends HTMLElement {
-  constructor() {
-    super()
-
+  connectedCallback() {
     this.cropFromField = this.querySelector("[data-crop-from]")
     this.cropSizeField = this.querySelector("[data-crop-size]")
     this.pictureIdField = this.querySelector("[data-picture-id]")
@@ -31,12 +29,9 @@ export class PictureEditor extends HTMLElement {
       this.updateCropLink()
     }, UPDATE_DELAY)
 
-    this.deleteButton?.addEventListener("click", this.removeImage.bind(this))
-  }
-
-  connectedCallback() {
-    this.observer = new MutationObserver(this.mutationCallback.bind(this))
+    this.deleteButton?.addEventListener("click", this.removeImage)
 
+    this.observer = new MutationObserver(this.mutationCallback)
     this.observer.observe(this.cropFromField, { attributes: true })
     this.observer.observe(this.cropSizeField, { attributes: true })
     this.observer.observe(this.pictureIdField, { attributes: true })
@@ -46,7 +41,7 @@ export class PictureEditor extends HTMLElement {
     this.observer.disconnect()
   }
 
-  mutationCallback(mutationsList) {
+  mutationCallback = (mutationsList) => {
     for (const mutation of mutationsList) {
       if ("pictureId" in mutation.target.dataset) {
         this.cropFromField.value = ""
@@ -80,7 +75,7 @@ export class PictureEditor extends HTMLElement {
       })
   }
 
-  removeImage() {
+  removeImage = () => {
     this.pictureThumbnail.innerHTML = IMAGE_PLACEHOLDER
     this.pictureIdField.value = ""
     this.image = null

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

@@ -7,12 +7,7 @@ export default class PictureThumbnail extends HTMLElement {
   constructor() {
     super()
 
-    this.classList.add("thumbnail_background")
     this.spinner = new Spinner("small")
-
-    if (this.src) {
-      this.start()
-    }
   }
 
   handleEvent(evt) {
@@ -29,6 +24,10 @@ export default class PictureThumbnail extends HTMLElement {
   }
 
   connectedCallback() {
+    this.classList.add("thumbnail_background")
+    if (this.src && !this.image) {
+      this.start()
+    }
     this.#setImage()
   }