alchemy_cms 8.3.11 → 8.4.1

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

@@ -1,29 +1,61 @@
-const formatItem = (object) => {
-  const optionEl = object.element[0]
-  const swatch = optionEl.dataset.swatch || optionEl.value
-  const customColor = optionEl.value === "custom_color"
-  const colorIndicator = customColor
-    ? `<alchemy-icon name="palette"></alchemy-icon>`
-    : `<span class="color-indicator" style="--color: ${swatch}"></span>`
+import { Select } from "alchemy_admin/components/select"
+
+const renderColorOption = (data, escape) => {
+  const swatch = data.swatch || data.value
+  const colorIndicator =
+    data.value === "custom_color"
+      ? `<alchemy-icon name="palette"></alchemy-icon>`
+      : `<span class="color-indicator" style="--color: ${escape(swatch)}"></span>`
 
   return `
     <div class="select-color-option">
       ${colorIndicator}
-      <span>${object.text}</span>
+      <span>${escape(data.text)}</span>
     </div>`
 }
 
-class ColorSelect extends HTMLElement {
-  #select2 = null
+// A color options select enhanced by Tom Select. It inherits from the shared
+// alchemy-select component to reuse the Tom Select setup, renders each option
+// and the selected item with a color swatch (or the custom-color icon), and
+// enables the adjacent color picker while a custom color is selected.
+export class ColorSelect extends Select {
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("change", this.#onChange)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("change", this.#onChange)
+  }
+
+  get renderers() {
+    return {
+      item: renderColorOption,
+      option: renderColorOption
+    }
+  }
+
+  #onChange = () => {
+    const colorPicker = this.parentElement?.querySelector("input[type='color']")
+    if (colorPicker) {
+      colorPicker.disabled = this.value !== "custom_color"
+    }
+  }
+}
+
+customElements.define("alchemy-color-select", ColorSelect, {
+  extends: "select"
+})
 
+// Free-form color input used when no color options are configured. Keeps the
+// text field and the native color picker in sync and enables the picker.
+export class ColorInput extends HTMLElement {
   connectedCallback() {
-    if (this.select) {
-      this.#initializeSelect2()
-      this.#select2.on("change", this.#onSelectChange)
-    } else {
-      this.colorInput?.addEventListener("input", this)
-      this.textInput?.addEventListener("input", this)
-      this.#toggleColorPicker(true)
+    this.colorInput?.addEventListener("input", this)
+    this.textInput?.addEventListener("input", this)
+    if (this.colorInput) {
+      this.colorInput.disabled = false
     }
   }
 
@@ -41,29 +73,6 @@ 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() {
-    this.select.classList.add("alchemy_selectbox")
-    const options = {
-      minimumResultsForSearch: 10,
-      formatResult: formatItem,
-      formatSelection: formatItem
-    }
-    this.#select2 = $(this.select).select2(options)
-  }
-
-  #toggleColorPicker(enabled = true) {
-    this.colorInput.disabled = !enabled
   }
 
   get colorInput() {
@@ -73,10 +82,6 @@ class ColorSelect extends HTMLElement {
   get textInput() {
     return this.querySelector("input[type='text']")
   }
-
-  get select() {
-    return this.querySelector("select")
-  }
 }
 
-customElements.define("alchemy-color-select", ColorSelect)
+customElements.define("alchemy-color-input", ColorInput)

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

@@ -0,0 +1,50 @@
+/**
+ * Shows its fields only while the controlling checkbox is checked.
+ *
+ * Hidden fields are disabled as well, so they are not submitted and the stored
+ * value is left untouched while the condition does not apply. A disabled
+ * control (a fixed page attribute for example) keeps the fields disabled.
+ *
+ *   <alchemy-conditional-field control="page_restricted">
+ *     <input type="text" name="page[foo]">
+ *   </alchemy-conditional-field>
+ */
+class ConditionalField extends HTMLElement {
+  connectedCallback() {
+    this.control?.addEventListener("change", this)
+    this.toggle()
+  }
+
+  disconnectedCallback() {
+    this.control?.removeEventListener("change", this)
+  }
+
+  handleEvent(event) {
+    if (event.type === "change") this.toggle()
+  }
+
+  toggle() {
+    const active = !!this.control?.checked && !this.control.disabled
+
+    this.hidden = !active
+    this.fields.forEach((field) => {
+      // Custom elements like alchemy-select need their own API to keep their
+      // rendered control in sync, but might not be upgraded yet.
+      if (typeof field.disable === "function") {
+        active ? field.enable() : field.disable()
+      } else {
+        field.disabled = !active
+      }
+    })
+  }
+
+  get control() {
+    return document.getElementById(this.getAttribute("control"))
+  }
+
+  get fields() {
+    return this.querySelectorAll("input, select, textarea")
+  }
+}
+
+customElements.define("alchemy-conditional-field", ConditionalField)

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

@@ -0,0 +1,77 @@
+import { Turbo } from "@hotwired/turbo-rails"
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
+import { translate } from "alchemy_admin/i18n"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
+
+// Set once the user agreed to leave, so that the navigation they agreed to is
+// not questioned again: a guarded form's redirect comes back through
+// turbo:before-visit.
+let leaveConfirmed = false
+
+// Warns before a wrapped form takes the user away from a page that has unsaved
+// element changes. Links need no wrapping, turbo:before-visit covers them, but
+// Turbo dispatches that for a form only once its request has returned, which is
+// too late for a form that changes something on the server.
+//
+// Guards in the capture phase, so that a cancelled submit never reaches
+// Turbo's document level handlers, nor any component the guard sits in.
+//
+// Wrap an sl-tooltip, never the element inside it: Shoelace anchors to its
+// first slotted child, and this element has no box of its own to anchor to.
+class DirtyGuard extends HTMLElement {
+  connectedCallback() {
+    this.addEventListener("submit", this.#guard, true)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("submit", this.#guard, true)
+  }
+
+  #guard = (event) => {
+    if (leaveConfirmed || !isPageDirty()) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const form = event.target
+    confirmLeave().then((confirmed) => {
+      if (confirmed) {
+        pleaseWaitOverlay()
+        form.requestSubmit()
+      }
+    })
+  }
+}
+
+function isPageDirty() {
+  return document.querySelectorAll("alchemy-element-editor.dirty").length > 0
+}
+
+async function confirmLeave() {
+  const confirmed = await openConfirmDialog(translate("page_dirty_notice"), {
+    title: translate("warning"),
+    ok_label: translate("ok"),
+    cancel_label: translate("cancel")
+  })
+  if (confirmed) {
+    leaveConfirmed = true
+    window.onbeforeunload = void 0
+  }
+  return confirmed
+}
+
+document.addEventListener("turbo:before-visit", (event) => {
+  if (leaveConfirmed || !isPageDirty()) return
+
+  event.preventDefault()
+
+  confirmLeave().then((confirmed) => {
+    if (confirmed) Turbo.visit(event.detail.url)
+  })
+})
+
+document.addEventListener("turbo:load", () => {
+  leaveConfirmed = false
+})
+
+customElements.define("alchemy-dirty-guard", DirtyGuard)

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

@@ -1,5 +1,7 @@
 import { get } from "alchemy_admin/utils/ajax"
 import { translate } from "alchemy_admin/i18n"
+import { growl } from "alchemy_admin/growler"
+import { routes } from "alchemy_admin/routes"
 
 class DomIdSelect extends HTMLElement {
   dataItem(hash) {
@@ -22,17 +24,22 @@ class DomIdApiSelect extends DomIdSelect {
   }
 
   async #fetchDomIds() {
-    const result = await get(Alchemy.routes.api_ingredients_path, {
-      page_id: this.#pageId
-    })
-    const options = result.data.ingredients
-      .filter((ingredient) => ingredient.data?.dom_id)
-      .map((ingredient) => this.dataItem(ingredient.data.dom_id))
-    const prompt =
-      options.length > 0 ? translate("None") : translate("No anchors found")
+    try {
+      const result = await get(routes.api_ingredients_path, {
+        page_id: this.#pageId
+      })
+      const options = result.data.ingredients
+        .filter((ingredient) => ingredient.data?.dom_id)
+        .map((ingredient) => this.dataItem(ingredient.data.dom_id))
+      const prompt =
+        options.length > 0 ? translate("None") : translate("No anchors found")
 
-    this.selectElement.setOptions(options, prompt)
-    this.selectElement.enable()
+      this.selectElement.setOptions(options, prompt)
+      this.selectElement.enable()
+    } catch (error) {
+      growl(error.message || error, "error")
+      console.error(error)
+    }
   }
 
   #reset() {

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

@@ -17,8 +17,13 @@ export class DeleteElementButton extends HTMLElement {
   async handleEvent() {
     const confirmed = await openConfirmDialog(this.message)
     if (confirmed) {
-      const response = await ajax("DELETE", this.url)
-      this.#removeElement(response.data)
+      try {
+        const response = await ajax("DELETE", this.url)
+        this.#removeElement(response.data)
+      } catch (error) {
+        growl(error.message || error, "error")
+        console.error(error)
+      }
     }
   }
 

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

@@ -1,11 +1,9 @@
-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"
+import { routes } from "alchemy_admin/routes"
 
 export class ElementEditor extends HTMLElement {
   #form = null
@@ -22,14 +20,12 @@ export class ElementEditor extends HTMLElement {
     this.addEventListener("click", this)
     // Triggered by child elements
     this.addEventListener("alchemy:element-update-title", this)
-    // We use of @rails/ujs for Rails remote forms
-    this.addEventListener("ajax:complete", this)
 
-    // Dirty observer still needs to be jQuery
-    // in order to support select2.
     this.#form = this.form
     if (this.#form) {
-      $(this.#form).on("change", this.onChange)
+      this.#form.addEventListener("change", this.onChange)
+      this.#form.addEventListener("turbo:submit-start", this)
+      this.#form.addEventListener("turbo:submit-end", this)
     }
 
     this.#header = this.header
@@ -51,9 +47,10 @@ 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.removeEventListener("change", this.onChange)
+      this.#form.removeEventListener("turbo:submit-start", this)
+      this.#form.removeEventListener("turbo:submit-end", this)
       this.#form = null
     }
     this.#header?.removeEventListener("dblclick", this.#onHeaderDblclick)
@@ -70,12 +67,11 @@ export class ElementEditor extends HTMLElement {
           this.onClickElement()
         }
         break
-      case "ajax:complete":
-        if (event.target === this.body) {
-          const xhr = event.detail[0]
-          event.stopPropagation()
-          this.onSaveElement(xhr)
-        }
+      case "turbo:submit-start":
+        this.setClean()
+        break
+      case "turbo:submit-end":
+        this.onSaveElement(event.detail.success)
         break
       case "alchemy:element-update-title":
         if (!this.hasEditors && event.target == this.firstChild) {
@@ -128,46 +124,20 @@ export class ElementEditor extends HTMLElement {
   }
 
   /**
-   * Sets the element to saved state
-   * Updates title
-   * JS event bubbling will also update the parents element quote.
-   * Shows error messages if ingredient validations fail
-   * @argument {XMLHttpRequest} xhr
-   */
-  onSaveElement(xhr) {
-    const data = JSON.parse(xhr.responseText)
-    // Reset errors that might be visible from last save attempt
-    this.setClean()
-    // If validation failed
-    if (xhr.status === 422) {
-      const warning = data.warning
-      // Create error messages
-      // Mark ingredients as failed
-      data.ingredientsWithErrors.forEach((ingredient) => {
-        const ingredientEditor = this.querySelector(
-          `[data-ingredient-id="${ingredient.id}"]`
-        )
-        const errorDisplay = createHtmlElement(
-          `<small class="error">${ingredient.errorMessage}</small>`
-        )
-        ingredientEditor?.appendChild(errorDisplay)
-        ingredientEditor?.classList.add("validation_failed")
-      })
-      // Show message
-      growl(warning, "warn")
-      this.elementErrors.classList.remove("hidden")
-    } else {
-      growl(data.notice)
+   * Applies the client-side effects of a save once the turbo stream rendered.
+   *
+   * The notice, error markup, header title, anchor icons and publish button are
+   * server-rendered turbo streams. Only the preview refresh (which must focus
+   * this element afterwards) and the error box toggle remain client-side.
+   * @argument {boolean} success
+   */
+  onSaveElement(success) {
+    if (success) {
       this.previewWindow?.refresh().then(() => {
         this.focusElementPreview()
       })
-      this.updateTitle(data.previewText)
-      data.ingredientAnchors.forEach((anchor) => {
-        IngredientAnchorLink.updateIcon(anchor.ingredientId, anchor.active)
-      })
-      if (data.pageHasUnpublishedChanges) {
-        dispatchPageDirtyEvent(data)
-      }
+    } else {
+      this.elementErrors.classList.remove("hidden")
     }
   }
 
@@ -286,7 +256,7 @@ export class ElementEditor extends HTMLElement {
     const spinner = new Alchemy.Spinner("small")
     spinner.spin(this.toggleButton)
     this.toggleIcon?.classList?.add("hidden")
-    return post(Alchemy.routes.collapse_admin_element_path(this.elementId))
+    return post(routes.collapse_admin_element_path(this.elementId))
       .then((response) => {
         const data = response.data
 
@@ -331,7 +301,7 @@ export class ElementEditor extends HTMLElement {
       this.toggleIcon?.classList.add("hidden")
 
       return new Promise((resolve, reject) => {
-        post(Alchemy.routes.expand_admin_element_path(this.elementId))
+        post(routes.expand_admin_element_path(this.elementId))
           .then((response) => {
             const data = response.data
 
@@ -567,10 +537,13 @@ export class ElementEditor extends HTMLElement {
   /**
    * The form element if present
    *
+   * Scoped to this element's own form so a wrapper element without ingredients
+   * does not return a nested child's form.
+   *
    * @returns {HTMLFormElement|undefined}
    */
   get form() {
-    return this.querySelector("form.element-body")
+    return this.querySelector(`#${this.id} > form.element-body`)
   }
 
   /**

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

@@ -1,70 +1,30 @@
-import { hightlightTerm } from "alchemy_admin/components/remote_select"
-
-const formatSelection = (option) => {
-  return `
-    <div class="element-select-name">
-      ${option.icon}<span>${option.text}</span>
-    </div>
-  `
-}
-
-const formatItem = (icon, text, hint) => {
-  const description = hint
-    ? `<div class="element-select-description">${hint}</div>`
-    : ""
-  return `
-    <div class="element-select-item">
-      ${formatSelection({ icon, text })}
-      ${description}
-    </div>
-  `
-}
-
-export class ElementSelect extends HTMLElement {
-  #select2 = null
-
-  connectedCallback() {
-    const results = this.options
-    const options = {
-      minimumResultsForSearch: 3,
-      dropdownAutoWidth: true,
-      data() {
-        return { results }
-      },
-      formatResult: (option, _el, search) => {
-        let text
-
-        if (option.id === "") return option.text
-        if (search.term !== "") {
-          text = hightlightTerm(option.text, search.term)
-        } else {
-          text = option.text
-        }
-
-        return formatItem(option.icon, text, option.hint)
-      },
-      formatSelection,
-      placeholder: this.placeholder
+import { Select } from "alchemy_admin/components/select"
+
+const renderName = (icon, text) => `
+  <div class="element-select-name">
+    ${icon}<span>${text}</span>
+  </div>
+`
+
+export class ElementSelect extends Select {
+  get renderers() {
+    return {
+      item: (data, escape) => renderName(data.icon, escape(data.text)),
+      option: (data, escape) => {
+        const description = data.hint
+          ? `<div class="element-select-description">${escape(data.hint)}</div>`
+          : ""
+        return `
+          <div class="element-select-item">
+            ${renderName(data.icon, escape(data.text))}
+            ${description}
+          </div>
+        `
+      }
     }
-    this.#select2 = $(this.inputField).select2(options)
-  }
-
-  disconnectedCallback() {
-    this.#select2?.select2("destroy")
-    this.#select2 = null
-  }
-
-  get options() {
-    return JSON.parse(this.getAttribute("options"))
-  }
-
-  get placeholder() {
-    return this.getAttribute("placeholder")
-  }
-
-  get inputField() {
-    return this.querySelector("input")
   }
 }
 
-customElements.define("alchemy-element-select", ElementSelect)
+customElements.define("alchemy-element-select", ElementSelect, {
+  extends: "select"
+})

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

@@ -5,9 +5,10 @@ class Icon extends HTMLElement {
 
   constructor() {
     super()
-    this.spriteUrl = document
-      .querySelector('link[rel="preload"][as="image"]')
-      .getAttribute("href")
+    this.spriteUrl =
+      document
+        .querySelector('link[rel="preload"][as="image"]')
+        ?.getAttribute("href") ?? ""
   }
 
   connectedCallback() {
@@ -48,4 +49,8 @@ class Icon extends HTMLElement {
   }
 }
 
-customElements.define("alchemy-icon", Icon)
+// Standalone components import this module next to the admin bundle, which
+// already defined the element from its own copy.
+if (!customElements.get("alchemy-icon")) {
+  customElements.define("alchemy-icon", Icon)
+}