alchemy_cms 8.3.11 → 8.4.0

data/app/javascript/alchemy_admin/turbo_stream_actions.js

@@ -0,0 +1,88 @@
+import { Turbo } from "@hotwired/turbo-rails"
+import { closeCurrentDialog } from "alchemy_admin/dialog"
+import { reloadPreview } from "alchemy_admin/components/preview_window"
+import { removeTab } from "alchemy_admin/fixed_elements"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
+
+// A dialog form submits into the dialog frame, so a redirect would be followed
+// inside the dialog and render the target page in it. The server answers a
+// successful submission with this action instead: close the dialog, then visit
+// the destination the action would have redirected to.
+Turbo.StreamActions.dialog_visit = function () {
+  const url = this.getAttribute("url")
+
+  if (!closeCurrentDialog(() => Turbo.visit(url))) {
+    Turbo.visit(url)
+  }
+}
+
+// The editors observe their form field for mutations, so it must not be replaced.
+
+Turbo.StreamActions.assign_picture = function () {
+  const [formField] = this.targetElements
+
+  if (!formField) return
+
+  formField.value = this.getAttribute("picture-id")
+  formField.setAttribute(
+    "data-image-file-width",
+    this.getAttribute("image-file-width")
+  )
+  formField.setAttribute(
+    "data-image-file-height",
+    this.getAttribute("image-file-height")
+  )
+
+  closeCurrentDialog(() => {
+    formField.closest("alchemy-element-editor")?.setDirty()
+  })
+}
+
+Turbo.StreamActions.assign_attachment = function () {
+  const [formField] = this.targetElements
+
+  if (!formField) return
+
+  const fileEditor = formField.parentElement
+
+  formField.value = this.getAttribute("attachment-id")
+  fileEditor.querySelector(":scope > .file_name").textContent =
+    this.getAttribute("attachment-name")
+  fileEditor
+    .querySelector(":scope > .file_icon")
+    .replaceChildren(this.templateContent)
+  fileEditor
+    .querySelector(":scope > .remove_file_link")
+    .classList.remove("hidden")
+
+  closeCurrentDialog(() => {
+    formField.closest("alchemy-element-editor")?.setDirty(formField)
+  })
+}
+
+// An intermediate action that closes the current dialog. This will be gone once
+// all dialogs resolve through a promise and no longer have to be closed
+// implicitly.
+Turbo.StreamActions.close_current_dialog = function () {
+  closeCurrentDialog()
+}
+
+Turbo.StreamActions.reload_preview = function () {
+  reloadPreview()
+}
+
+Turbo.StreamActions.remove_fixed_element = function () {
+  removeTab(this.getAttribute("element-id"))
+}
+
+Turbo.StreamActions.update_anchor_icon = function () {
+  IngredientAnchorLink.updateIcon(
+    this.getAttribute("ingredient-id"),
+    this.getAttribute("active") === "true"
+  )
+}
+
+Turbo.StreamActions.hide_please_wait_overlay = function () {
+  pleaseWaitOverlay(false)
+}

data/app/javascript/alchemy_admin/utils/ajax.js

@@ -9,7 +9,9 @@ function prepareURL(path, data, method) {
   const url = new URL(window.location.origin + path)
 
   if (data && isGetRequest(method)) {
-    url.search = new URLSearchParams(data).toString()
+    new URLSearchParams(data).forEach((value, key) => {
+      url.searchParams.set(key, value)
+    })
   }
 
   return url.toString()
@@ -79,7 +81,16 @@ export default async function ajax(
 
   if (response.ok) {
     return { data: responseData, status: response.status }
-  } else {
-    throw responseData || new Error("An error occurred during the transaction")
   }
+
+  // The session expired while the tab was open. Send the user to the login
+  // page instead of leaving them with an error they cannot act on. Never
+  // settle, so callers skip their error handling: the login page is what the
+  // user needs to see, not a growl about a request they cannot retry.
+  if (response.status === 401 && responseData?.redirect_url) {
+    Turbo.visit(responseData.redirect_url)
+    return new Promise(() => {})
+  }
+
+  throw responseData || new Error("An error occurred during the transaction")
 }

data/app/javascript/alchemy_admin/utils/events.js

@@ -1,3 +1,8 @@
+// Dispatches a bubbling CustomEvent from the given element.
+export function dispatchCustomEvent(element, name, detail = {}) {
+  element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
+}
+
 export function on(eventName, baseSelector, targetSelector, callback) {
   document.querySelectorAll(baseSelector).forEach((baseNode) => {
     baseNode.addEventListener(eventName, (evt) => {

data/app/javascript/alchemy_admin/utils/json_script.js

@@ -0,0 +1,12 @@
+/**
+ * Reads the data the server rendered into a JSON script tag
+ * @param {string} id
+ * @returns {any|undefined} undefined if no such script tag is present
+ */
+export function readJSONScript(id) {
+  const script = document.getElementById(id)
+
+  if (!script) return undefined
+
+  return JSON.parse(script.textContent)
+}

data/app/javascript/alchemy_admin/utils/tom_select.js

@@ -0,0 +1,171 @@
+import { translate } from "alchemy_admin/i18n"
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom"
+
+const DROPDOWN_WINDOW_MARGIN = 16
+const DROPDOWN_MIN_HEIGHT = 120
+const DROPDOWN_MAX_WIDTH = 480
+
+// Tom Select hides the native element it enhances, so the element can not take
+// focus itself. Focus the Tom Select control instead, falling back to the
+// native focus while Tom Select has not initialized yet. Tom Select based custom
+// elements use this for their focus() override, so acting on an autofocus
+// attribute (e.g. from a dialog) lands on the visible control.
+export function focusTomSelect(tomSelect, focusFallback) {
+  if (tomSelect) {
+    tomSelect.focus()
+  } else {
+    focusFallback()
+  }
+}
+
+// Tom Select's `destroy()` removes the dropdown, but it never closes it, so the
+// `dropdown_close` handler below would not run. Close first, so a select that is
+// torn down while its dropdown is open (e.g. because a Turbo render replaces the
+// form) does not leave the full window dropdown mask behind, swallowing every
+// click.
+export function teardownTomSelect(tomSelect) {
+  tomSelect?.close(false)
+  tomSelect?.destroy()
+}
+
+// Dropdown positioning shared by the Tom Select based components. It appends the
+// dropdown to the body and keeps it positioned with Floating UI so it is not
+// clipped inside dialogs or scrollable panels. The returned handlers are used as
+// Tom Select `onDropdownOpen`/`onDropdownClose` callbacks and are therefore
+// invoked with the Tom Select instance as `this`.
+export function createDropdownPositioning() {
+  const dropdownMask = document.createElement("div")
+  dropdownMask.className = "ts-dropdown-mask"
+
+  let removeAutoUpdater = () => {}
+
+  return {
+    async onDropdownOpen() {
+      // Make the dropdown at least as wide as the control.
+      const styles = {
+        minWidth: `${this.control.offsetWidth}px`
+      }
+      // If the select is inside a dialog, we need to ensure the dropdown appears above it.
+      if (this.control.closest(".alchemy-dialog-body, .alchemy-popover")) {
+        styles.zIndex = "101"
+      }
+      Object.assign(this.dropdown.style, styles)
+      // Append the dropdown to the body to avoid overflow issues. Inside a
+      // native modal dialog it has to go into the dialog element instead,
+      // because content outside of the top layer would be inert and
+      // unreachable.
+      const dropdownRoot = this.control.closest("dialog") || document.body
+      dropdownRoot.append(dropdownMask)
+      dropdownRoot.append(this.dropdown)
+      // Use Floating UI to position the dropdown relative to the control.
+      const updatePosition = async () => {
+        // Use Floating UI to calculate the dropdown position
+        const { x, y } = await computePosition(this.control, this.dropdown, {
+          // Line the dropdown up with the left edge of the control. Without this
+          // it is centered on the control and a dropdown grown wide by long
+          // entries hangs over into the page left of the field.
+          placement: "bottom-start",
+          middleware: [
+            // Make some space between the control and the dropdown to prevent overlap
+            offset(2),
+            // Flip to the opposite side if there’s not enough space
+            flip(),
+            // Keep the dropdown inside the window
+            shift({ padding: DROPDOWN_WINDOW_MARGIN }),
+            // Ensure the dropdown fits within the viewport
+            size({
+              padding: DROPDOWN_WINDOW_MARGIN,
+              apply({ availableWidth, availableHeight, elements }) {
+                // Keep long entries from stretching the dropdown across the
+                // window, but never make it narrower than the control.
+                Object.assign(elements.floating.style, {
+                  maxWidth: `max(${elements.reference.offsetWidth}px, min(${availableWidth}px, var(--select-dropdown-max-width, ${DROPDOWN_MAX_WIDTH}px)))`
+                })
+                Object.assign(
+                  elements.floating.querySelector(".ts-dropdown-content").style,
+                  {
+                    maxHeight: `${Math.max(DROPDOWN_MIN_HEIGHT, availableHeight - DROPDOWN_WINDOW_MARGIN)}px`
+                  }
+                )
+              }
+            })
+          ]
+        })
+        // Position the dropdown
+        Object.assign(this.dropdown.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        })
+      }
+      // Update the dropdown position whenever the window resizes or scrolls.
+      removeAutoUpdater = autoUpdate(
+        this.control,
+        this.dropdown,
+        updatePosition
+      )
+    },
+    onDropdownClose() {
+      this.control_input.classList.remove("has-value")
+      this.control_input.blur()
+      // Remove the dropdown from DOM when closed.
+      this.dropdown.remove()
+      dropdownMask.remove()
+      // Cleanup the position auto-update when the dropdown is closed.
+      removeAutoUpdater()
+    }
+  }
+}
+
+// Configuration for Tom Select's `remove_button` plugin. The plugin renders its
+// control as a non-semantic element (a `<div role="button">` by default); render
+// a real `<button>` instead so assistive tech and the keyboard treat it as one.
+// The translated title also names the icon-only button via `aria-label`, like the
+// clear button does.
+export function removeButton() {
+  return {
+    title: translate("Remove"),
+    html(data) {
+      const button = document.createElement("button")
+      button.type = "button"
+      button.className = data.className
+      button.title = data.title
+      button.setAttribute("aria-label", data.title)
+      button.tabIndex = -1
+      button.innerHTML = `<alchemy-icon name="close" size="sm"></alchemy-icon>`
+      return button
+    }
+  }
+}
+
+// Customize the "create" and "no results" dropdown messages with i18n. Shared by
+// the Tom Select based components as `render` functions.
+export const dropdownMessages = {
+  option_create(data, escape) {
+    return `<div class="create">
+      ${translate("Add")} <strong>${escape(data.input)}</strong>&hellip;
+    </div>`
+  },
+  // Tom Select prepends this above the results it already has, which would
+  // shift them.
+  loading() {
+    if (Object.keys(this.options).length > 0) return
+    return `<div class="loading-results">${translate("Please wait, loading")}&hellip;</div>`
+  },
+  no_results() {
+    return `<div class="no-results">${translate("No results found")}</div>`
+  },
+  // Shown at the bottom of the dropdown while the virtual scroll plugin appends
+  // the next page of results.
+  loading_more: () =>
+    `<div class="loading-more">${translate("Loading more results")}&hellip;</div>`,
+  // Shown at the bottom of the dropdown once every page has been loaded.
+  no_more_results: () =>
+    `<div class="no-more-results">${translate("No more results")}</div>`
+}

data/app/javascript/alchemy_admin.js

@@ -1,15 +1,8 @@
-// We still use jQuery in some places (ie. select2)
-import "handlebars"
-import "jquery"
 import "@ungap/custom-elements"
 import { Turbo } from "@hotwired/turbo-rails"
-import "select2"
-
-import Rails from "@rails/ujs"
 
 import { translate } from "alchemy_admin/i18n"
 import { currentDialog, closeCurrentDialog } from "alchemy_admin/dialog"
-import Dirty from "alchemy_admin/dirty"
 import * as FixedElements from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import Initializer from "alchemy_admin/initializer"
@@ -19,12 +12,11 @@ import Spinner from "alchemy_admin/spinner"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 
+import "alchemy_admin/turbo_stream_actions"
+
 // Web Components
 import "alchemy_admin/components"
 
-// Handlebars Templates
-import "alchemy_admin/templates/compiled"
-
 // Shoelace Setup
 import "alchemy_admin/shoelace_theme"
 
@@ -37,7 +29,6 @@ if (typeof window.Alchemy === "undefined") {
 Object.assign(Alchemy, {
   closeCurrentDialog,
   currentDialog,
-  ...Dirty,
   t: translate, // Global utility method for translating a given string
   FixedElements,
   growl,
@@ -46,8 +37,6 @@ Object.assign(Alchemy, {
   Spinner,
   reloadPreview
 })
-
-Rails.start()
 Turbo.config.forms.confirm = openConfirmDialog
 document.addEventListener("turbo:load", Initializer)
 
@@ -59,9 +48,3 @@ export { ElementSelect } from "alchemy_admin/components/element_select"
 export { TagsAutocomplete } from "alchemy_admin/components/tags_autocomplete"
 export { Tinymce } from "alchemy_admin/components/tinymce"
 export { on } from "alchemy_admin/utils/events"
-
-// Page-specific modules - bundled to avoid dual-loading
-export { default as ImageCropper } from "alchemy_admin/image_cropper"
-export { default as ImageOverlay } from "alchemy_admin/image_overlay"
-export { default as pictureSelector } from "alchemy_admin/picture_selector"
-export { default as NodeTree } from "alchemy_admin/node_tree"

data/app/javascript/preview.js

@@ -1,125 +1,143 @@
-window.Alchemy = Alchemy || {}
-
-Object.assign(Alchemy, {
-  ElementSelector: {
-    styles: {
-      reset: {
-        outline: "",
-        "outline-offset": "",
-        cursor: ""
-      },
-      hover: {
-        outline: "2px dashed #f0b437",
-        "outline-offset": "4px",
-        cursor: "pointer"
-      },
-      selected: {
-        outline: "2px dashed #90b9d0",
-        "outline-offset": "4px"
-      }
-    },
+const STYLES = {
+  reset: {
+    outline: "",
+    "outline-offset": "",
+    cursor: ""
+  },
+  hover: {
+    outline: "2px dashed #f0b437",
+    "outline-offset": "4px",
+    cursor: "pointer"
+  },
+  selected: {
+    outline: "2px dashed #90b9d0",
+    "outline-offset": "4px"
+  }
+}
 
-    init() {
-      window.addEventListener("message", (event) => {
-        switch (event.data.message) {
-          case "Alchemy.blurElements":
-            this.blurElements()
-            break
-          case "Alchemy.focusElement":
-            this.focusElement(event.data)
-            break
-          default:
-            console.info("Received unknown message!", event.data)
-        }
-      })
-      this.elements = Array.from(
-        document.querySelectorAll("[data-alchemy-element]")
-      )
-      this.elements.forEach((element) => {
-        element.addEventListener("mouseover", () => {
-          if (!element.classList.contains("selected")) {
-            Object.assign(element.style, this.getStyle("hover"))
-          }
-        })
-        element.addEventListener("mouseout", () => {
-          if (!element.classList.contains("selected")) {
-            Object.assign(element.style, this.getStyle("reset"))
-          }
-        })
-        element.addEventListener("click", (e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          this.selectElement(element)
-          this.focusElementEditor(element)
-        })
-      })
-    },
+let elements = []
+let selection = null
 
-    // Mark element in preview frame as selected and scrolls to it.
-    selectElement(element) {
-      this.blurElements(element)
-      element.classList.add("selected")
-      Object.assign(element.style, this.getStyle("selected"))
-      element.scrollIntoView({
-        behavior: "smooth",
-        block: "start"
-      })
-    },
+// Mark element in preview frame as selected and scrolls to it.
+function selectElement(element) {
+  blurElements(element)
+  selection = element
+  Object.assign(element.style, STYLES.selected)
+  element.scrollIntoView({
+    behavior: "smooth",
+    block: "start"
+  })
+}
 
-    // Blur all elements in preview frame.
-    blurElements(selectedElement) {
-      this.elements.forEach((element) => {
-        if (element !== selectedElement) {
-          element.classList.remove("selected")
-          Object.assign(element.style, this.getStyle("reset"))
-        }
-      })
-    },
+// Blur all elements in preview frame.
+function blurElements(selectedElement) {
+  elements.forEach((element) => {
+    if (element !== selectedElement) {
+      Object.assign(element.style, STYLES.reset)
+    }
+  })
+  selection = null
+}
 
-    // Focus the element in the Alchemy preview window.
-    focusElement(data) {
-      const element = this.getElement(data.element_id)
-      if (element) {
-        return this.selectElement(element)
-      } else {
-        return console.warn("Could not focus element with id", data.element_id)
-      }
-    },
+function getElement(elementId) {
+  return elements.find(
+    (element) => element.dataset.alchemyElement === elementId.toString()
+  )
+}
 
-    getElement(element_id) {
-      return this.elements.find(
-        (element) => element.dataset.alchemyElement === element_id.toString()
-      )
-    },
+// Focus the element in the Alchemy preview window.
+function focusElement(data) {
+  const element = getElement(data.element_id)
 
-    // Focus the element editor in the Alchemy element window.
-    focusElementEditor(element) {
-      const element_id = element.dataset.alchemyElement
-      window.parent.postMessage(
-        {
-          message: "Alchemy.focusElementEditor",
-          element_id
-        },
-        window.location.origin
-      )
+  if (element) {
+    selectElement(element)
+  } else {
+    console.warn("Could not focus element with id", data.element_id)
+  }
+}
+
+// Focus the element editor in the Alchemy element window.
+function focusElementEditor(element) {
+  window.parent.postMessage(
+    {
+      message: "Alchemy.focusElementEditor",
+      element_id: element.dataset.alchemyElement
     },
+    window.location.origin
+  )
+}
 
-    getStyle(state) {
-      if (state === "reset") {
-        return this.styles["reset"]
-      } else {
-        return this.styles[state]
-      }
+function observeElement(element) {
+  element.addEventListener("mouseover", () => {
+    if (element !== selection) {
+      Object.assign(element.style, STYLES.hover)
+    }
+  })
+  element.addEventListener("mouseout", () => {
+    if (element !== selection) {
+      Object.assign(element.style, STYLES.reset)
     }
+  })
+}
+
+function selectClickedElement(event) {
+  const element = event.target.closest("[data-alchemy-element]")
+
+  if (element) {
+    selectElement(element)
+    focusElementEditor(element)
   }
-})
 
-Alchemy.ElementSelector.init()
+  return element
+}
 
-// Notify parent window that preview is ready
-window.parent.postMessage(
-  {
-    message: "Alchemy.previewReady"
-  },
-  window.location.origin
-)
+function navigates(target) {
+  if (target.closest("a")) return true
+
+  const control = target.closest("button, input")
+  return Boolean(control?.form) && ["submit", "image"].includes(control.type)
+}
+
+// Client side routers navigate from click handlers on the link itself, so
+// navigating clicks have to be taken before the event reaches the page.
+function onNavigatingClick(event) {
+  if (navigates(event.target) && selectClickedElement(event)) {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+}
+
+function init() {
+  window.addEventListener("message", (event) => {
+    switch (event.data.message) {
+      case "Alchemy.blurElements":
+        blurElements()
+        break
+      case "Alchemy.focusElement":
+        focusElement(event.data)
+        break
+      default:
+        console.info("Received unknown message!", event.data)
+    }
+  })
+
+  window.addEventListener("click", onNavigatingClick, { capture: true })
+  window.addEventListener("click", selectClickedElement)
+
+  elements = Array.from(document.querySelectorAll("[data-alchemy-element]"))
+  elements.forEach(observeElement)
+
+  // Notify parent window that preview is ready
+  window.parent.postMessage(
+    {
+      message: "Alchemy.previewReady"
+    },
+    window.location.origin
+  )
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init, { once: true })
+} else {
+  init()
+}

data/app/jobs/alchemy/invalidate_elements_cache_job.rb

@@ -12,7 +12,7 @@ module Alchemy
       all_element_ids = get_all_element_ids(elements, element_ids)
       Element.where(id: all_element_ids).touch_all
 
-      page_ids = elements.joins(page_version: :page).select("DISTINCT alchemy_pages.id")
+      page_ids = elements.joins(page_version: :page).distinct.pluck("alchemy_pages.id")
       Page.where(id: page_ids).touch_all
     end