alchemy_cms 8.3.10 → 8.4.0

data/app/javascript/alchemy_admin/dialog.js

@@ -1,9 +1,18 @@
+import { Turbo } from "@hotwired/turbo-rails"
 import Hotkeys from "alchemy_admin/hotkeys"
 import Spinner from "alchemy_admin/spinner"
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+import { dispatchCustomEvent } from "alchemy_admin/utils/events"
 
 // Collection of all current dialog instances
 const currentDialogs = []
 
+// Id of the Turbo Frame wrapping the dialog content.
+// Keep in sync with Alchemy::Admin::DIALOG_FRAME_ID.
+export const DIALOG_FRAME_ID = "alchemy_dialog_frame"
+
+const TURBO_STREAM_CONTENT_TYPE = "text/vnd.turbo-stream.html"
+
 const DEFAULTS = {
   header_height: 36,
   size: "400x300",
@@ -16,6 +25,9 @@ const DEFAULTS = {
 }
 
 export class Dialog {
+  #previousFlashParent = null
+  #closing = false
+
   // Arguments:
   //  - url: The url to load the content from via ajax
   //  - options: A object holding options
@@ -24,9 +36,6 @@ export class Dialog {
   constructor(url, options = {}) {
     this.url = url
     this.options = { ...DEFAULTS, ...options }
-    this.$document = $(document)
-    this.$window = $(window)
-    this.$body = $("body")
     const size = this.options.size.split("x")
     this.width = parseInt(size[0], 10)
     this.height = parseInt(size[1], 10)
@@ -36,85 +45,153 @@ export class Dialog {
 
   // Opens the Dialog and loads the content via ajax.
   open() {
-    this.dialog.trigger("Alchemy.DialogOpen")
+    dispatchCustomEvent(this.dialog, "Alchemy.DialogOpen")
     this.bind_close_events()
+    if (this.options.modal) {
+      this.dialog_container.showModal()
+      this.#adoptFlashNotices()
+    } else {
+      this.dialog_container.show()
+    }
     window.requestAnimationFrame(() => {
-      this.dialog_container.addClass("open")
-      if (this.overlay != null) {
-        return this.overlay.addClass("open")
-      }
+      this.dialog_container.classList.add("open")
     })
-    this.$body.addClass("prevent-scrolling")
+    document.body.classList.add("prevent-scrolling")
     currentDialogs.push(this)
     this.load()
   }
 
   // Closes the Dialog and removes it from the DOM
   close() {
-    this.dialog.trigger("DialogClose.Alchemy")
-    this.$document.off("keydown")
-    this.dialog_container.removeClass("open")
-    if (this.overlay != null) {
-      this.overlay.removeClass("open")
+    // The container stays open during the closing transition, so close() can be
+    // called again mid-fade (mashing Esc, a double click on the close button or
+    // backdrop). Guard against re-entry, otherwise a second transitionend
+    // listener is registered and the teardown runs twice.
+    if (this.#closing) {
+      return true
     }
-    this.$document.on(
-      "webkitTransitionEnd transitionend oTransitionEnd",
+    this.#closing = true
+    dispatchCustomEvent(this.dialog, "DialogClose.Alchemy")
+    this.dialog_container.classList.remove("open")
+    this.dialog_container.addEventListener(
+      "transitionend",
       () => {
-        this.$document.off("webkitTransitionEnd transitionend oTransitionEnd")
+        // Move the flash notices back out before removing the container, so
+        // they are not destroyed together with the dialog.
+        this.#releaseFlashNotices()
+        this.dialog_container.close()
         this.dialog_container.remove()
-        if (this.overlay != null) {
-          this.overlay.remove()
+        currentDialogs.pop()
+        if (currentDialogs.length === 0) {
+          document.body.classList.remove("prevent-scrolling")
         }
-        this.$body.removeClass("prevent-scrolling")
-        currentDialogs.pop(this)
         if (this.options.closed != null) {
-          return this.options.closed()
+          this.options.closed()
         }
-      }
+      },
+      { once: true }
     )
     return true
   }
 
+  // A modal <dialog> makes everything outside its subtree inert, so flash
+  // notices rendered on the body would be visible but not interactable while
+  // the dialog is open. Move them into the dialog, which is in the top layer
+  // and not inert, for the dialog's lifetime and restore them on close.
+  #adoptFlashNotices() {
+    const flashNotices = document.getElementById("flash_notices")
+    if (flashNotices) {
+      this.#previousFlashParent = flashNotices.parentElement
+      this.dialog_container.append(flashNotices)
+      this.#clearTransientNotices(flashNotices)
+    }
+  }
+
+  // The notices are not cleared on the way back. Anything transient left at
+  // this point was raised by the dialog itself, typically the growl of the
+  // response that closes it, and has to outlive the dialog. Moving it re-arms
+  // its dismiss timer, which is what a just-raised notice wants anyway.
+  #releaseFlashNotices() {
+    const flashNotices = document.getElementById("flash_notices")
+    if (flashNotices && this.#previousFlashParent) {
+      this.#previousFlashParent.append(flashNotices)
+    }
+  }
+
+  // Only the persistent error notices need to travel with the dialog to stay
+  // interactable. Moving the auto-dismissing ones would restart their dismiss
+  // timers (their connectedCallback re-arms the timer), making them linger, so
+  // remove them instead. A fade-out is skipped on purpose: the just-moved
+  // element has no transition baseline, so dismiss()'s transitionend would never
+  // fire and the node would be stranded invisible-but-present.
+  #clearTransientNotices(flashNotices) {
+    flashNotices
+      .querySelectorAll('alchemy-message[dismissable]:not([type="error"])')
+      .forEach((message) => message.remove())
+  }
+
   // Loads the content via ajax and replaces the Dialog body with server response.
+  //
+  // The Turbo-Frame header tells the server this content is rendered for a
+  // dialog, so it wraps the response in the dialog frame (see set_layout). The
+  // same action requested as a full page is not wrapped.
   load() {
     this.show_spinner()
-    $.get(this.url, (data) => {
-      this.replace(data)
-    }).fail((xhr) => {
-      this.show_error(xhr)
+    fetch(this.url, {
+      headers: { "Turbo-Frame": DIALOG_FRAME_ID }
     })
+      .then(async (response) => {
+        const responseText = await response.text()
+        // A stream answers a request the frame must not render, whatever the
+        // status: an expired session sends a `dialog_visit` to the login page.
+        // Without this the stream is never run and the dialog shows a 401 the
+        // user cannot act on.
+        if (
+          response.headers
+            .get("content-type")
+            ?.includes(TURBO_STREAM_CONTENT_TYPE)
+        ) {
+          Turbo.renderStreamMessage(responseText)
+        } else if (response.ok) {
+          this.replace(responseText)
+        } else {
+          this.show_error({
+            status: response.status,
+            statusText: response.statusText,
+            responseText
+          })
+        }
+      })
+      .catch(() => {
+        this.show_error({ status: 0 })
+      })
   }
 
   // Reloads the Dialog content
   reload() {
-    this.dialog_body.empty()
+    this.dialog_body.innerHTML = ""
     this.load()
   }
 
   // Replaces the dialog body with given content and initializes it.
   replace(data) {
     this.remove_spinner()
-    this.dialog_body.hide()
-    this.dialog_body.html(data)
+    this.dialog_body.style.display = "none"
+    this.dialog_body.innerHTML = data
     this.init()
-    this.dialog[0].dispatchEvent(
-      new CustomEvent("DialogReady.Alchemy", {
-        bubbles: true,
-        detail: {
-          body: this.dialog_body[0]
-        }
-      })
-    )
+    dispatchCustomEvent(this.dialog, "DialogReady.Alchemy", {
+      body: this.dialog_body
+    })
     if (this.options.ready != null) {
       this.options.ready(this.dialog_body)
     }
-    this.dialog_body.show()
+    this.dialog_body.style.display = ""
   }
 
   // Adds a spinner into Dialog body
   show_spinner() {
     this.spinner = new Spinner("medium")
-    this.spinner.spin(this.dialog_body[0])
+    this.spinner.spin(this.dialog_body)
   }
 
   // Removes the spinner from Dialog body
@@ -125,38 +202,27 @@ export class Dialog {
   // Initializes the Dialog body
   init() {
     Hotkeys(this.dialog_body)
-    this.watch_remote_forms()
-    window.requestAnimationFrame(() => {
-      this.dialog_body.find("[autofocus]").focus()
-    })
+    window.requestAnimationFrame(() => this.#focusInitialElement())
   }
 
-  // Watches ajax requests inside of dialog body and replaces the content accordingly
-  watch_remote_forms() {
-    const $form = $('[data-remote="true"]', this.dialog_body)
-
-    $form.on("ajax:success", (event) => {
-      const xhr = event.detail[2]
-      const content_type = xhr.getResponseHeader("Content-Type")
-      if (content_type.match(/javascript/)) {
-        return
-      } else {
-        this.dialog_body.html(xhr.responseText)
-        this.init()
-      }
-    })
-
-    $form.on("ajax:error", (event) => {
-      const statusText = event.detail[1]
-      const xhr = event.detail[2]
-      this.show_error(xhr, statusText)
-    })
+  // Shoelace tab panels (link, page configure) only render a few frames after
+  // the content loaded, so their fields can not take focus yet. Hence the retry.
+  #focusInitialElement(attempts = 0) {
+    const target =
+      this.dialog_body.querySelector("[autofocus]") ??
+      this.dialog_body.querySelector("form [type='submit']")
+    target?.focus()
+    if (document.activeElement === this.close_button && attempts < 20) {
+      window.requestAnimationFrame(() =>
+        this.#focusInitialElement(attempts + 1)
+      )
+    }
   }
 
   // Displays an error message
   show_error(xhr, statusText) {
     if (xhr.status === 422) {
-      this.dialog_body.html(xhr.responseText)
+      this.dialog_body.innerHTML = xhr.responseText
       this.init()
       return
     }
@@ -166,12 +232,10 @@ export class Dialog {
       statusText
     )
 
-    const $errorDiv = $(`<alchemy-message type="${error_type}">
+    this.dialog_body.innerHTML = `<alchemy-message type="${error_type}">
       <h1>${error_header}</h1>
       <p>${error_body}</p>
-    </alchemy-message>`)
-
-    this.dialog_body.html($errorDiv)
+    </alchemy-message>`
   }
 
   // Returns error message based on xhr status
@@ -206,55 +270,69 @@ export class Dialog {
   // Binds close events on:
   // - Close button
   // - Overlay (if the Dialog is a modal)
-  // - ESC Key
+  // - ESC Key (the dialog element's cancel event)
   bind_close_events() {
-    this.close_button.on("click", () => {
+    this.close_button.addEventListener("click", (e) => {
+      e.preventDefault()
       this.close()
     })
-    this.dialog_container.addClass("closable").on("click", (e) => {
-      if (e.target !== this.dialog_container.get(0)) {
-        return true
-      }
+    this.dialog_container.addEventListener("close", (e) => {
+      e.preventDefault()
       this.close()
-      return false
     })
-    this.$document.keydown((e) => {
-      if (e.which === 27) {
+    this.dialog_container.classList.add("closable")
+    // Use pointerdown, not click: a click whose mousedown and mouseup land on
+    // different nodes is dispatched to their common ancestor — this element for
+    // anything inside the dialog — closing it although the backdrop was never
+    // hit, e.g. when selecting text and releasing outside.
+    this.dialog_container.addEventListener("pointerdown", (e) => {
+      if (e.target === this.dialog_container) {
         this.close()
-        return false
-      } else {
-        return true
       }
     })
+    this.dialog_container.addEventListener("cancel", (e) => {
+      // The <dialog>'s own cancel event (Esc) targets the container, but a file
+      // input's native cancel event (dismissing the OS file picker) bubbles up
+      // to the same node. Only the former should close the dialog.
+      if (e.target !== this.dialog_container) {
+        return
+      }
+      e.preventDefault()
+      this.close()
+    })
   }
 
   // Builds the html structure of the Dialog
   build() {
-    this.dialog_container = $('<div class="alchemy-dialog-container" />')
-    this.dialog = $('<div class="alchemy-dialog" />')
-    this.dialog_body = $('<div class="alchemy-dialog-body" />')
-    this.dialog_header = $('<div class="alchemy-dialog-header" />')
-    this.dialog_title = $('<div class="alchemy-dialog-title" />')
-    this.close_button = $(
+    this.dialog_container = createHtmlElement(
+      '<dialog class="alchemy-dialog-container"></dialog>'
+    )
+    this.dialog = createHtmlElement('<div class="alchemy-dialog"></div>')
+    this.dialog_body = createHtmlElement(
+      '<div class="alchemy-dialog-body"></div>'
+    )
+    this.dialog_header = createHtmlElement(
+      '<div class="alchemy-dialog-header"></div>'
+    )
+    this.dialog_title = createHtmlElement(
+      '<div class="alchemy-dialog-title"></div>'
+    )
+    this.close_button = createHtmlElement(
       '<button class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></button>'
     )
-    this.dialog_title.text(this.options.title)
+    this.dialog_title.textContent = this.options.title
     this.dialog_header.append(this.dialog_title)
     this.dialog_header.append(this.close_button)
     this.dialog.append(this.dialog_header)
     this.dialog.append(this.dialog_body)
     this.dialog_container.append(this.dialog)
     if (this.options.modal) {
-      this.dialog.addClass("modal")
+      this.dialog.classList.add("modal")
     }
     if (this.options.padding) {
-      this.dialog_body.addClass("padded")
-    }
-    if (this.options.modal) {
-      this.overlay = $('<div class="alchemy-dialog-overlay" />')
-      this.$body.append(this.overlay)
+      this.dialog_body.classList.add("padded")
     }
-    this.$body.append(this.dialog_container)
+    document.body.append(this.dialog_container)
   }
 
   // Sets the correct size of the dialog
@@ -262,29 +340,23 @@ export class Dialog {
   resize() {
     const { width, height } = this.getSize()
 
-    this.dialog.css({
-      width: width,
-      "min-height": height,
-      overflow: this.options.overflow
-    })
+    this.dialog.style.width = `${width}px`
+    this.dialog.style.minHeight = `${height}px`
+    this.dialog.style.overflow = this.options.overflow
 
     if (this.options.overflow === "hidden") {
-      this.dialog_body.css({
-        height: height,
-        overflow: "auto"
-      })
+      this.dialog_body.style.height = `${height}px`
+      this.dialog_body.style.overflow = "auto"
     } else {
-      this.dialog_body.css({
-        "min-height": height,
-        overflow: "visible"
-      })
+      this.dialog_body.style.minHeight = `${height}px`
+      this.dialog_body.style.overflow = "visible"
     }
   }
 
   getSize() {
     const padding = this.options.padding ? 16 : 0
-    const doc_width = this.$window.width()
-    const doc_height = this.$window.height()
+    const doc_width = window.innerWidth
+    const doc_height = window.innerHeight
 
     let width = this.width
     let height = this.height

data/app/javascript/alchemy_admin/hotkeys.js

@@ -3,11 +3,6 @@ import "keymaster"
 const bindedHotkeys = []
 
 export default function (scope = document) {
-  // The scope can be a jQuery object because we still use jQuery in alchemy_admin/dialog.js.
-  if (scope instanceof jQuery) {
-    scope = scope[0]
-  }
-
   // Unbind all previously registered hotkeys if we are not inside a dialog.
   if (scope === document) {
     bindedHotkeys.forEach((hotkey) => key.unbind(hotkey))

data/app/javascript/alchemy_admin/i18n.js

@@ -11,7 +11,9 @@ function nestedTranslation(translations, key) {
 
 function getTranslation(key) {
   const locale = currentLocale()
-  const translations = Alchemy.translations
+  // Host engines import components standalone, outside of the admin layout
+  // that defines the global.
+  const translations = window.Alchemy?.translations
 
   if (!translations) {
     console.warn(`Translations for locale ${locale} not found!`)
@@ -39,11 +41,3 @@ export function translate(key, replacement = undefined) {
   }
   return translation
 }
-
-export async function setupSelectLocale() {
-  const locale = currentLocale()
-  if (locale === "en") return
-
-  await import(`select2/${locale}.js`)
-  $.extend($.fn.select2.defaults, $.fn.select2.locales[locale])
-}

data/app/javascript/alchemy_admin/image_overlay.js

@@ -1,71 +1,87 @@
 import { Dialog } from "alchemy_admin/dialog"
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
 
 export default class ImageOverlay extends Dialog {
-  constructor(url, options = {}) {
-    super(url, options)
-  }
-
-  init() {
-    $(".zoomed-picture-background").on("click", (e) => {
+  // The picture is rendered in a Turbo frame that replaces its content on every
+  // navigation, so the picture elements are looked up on demand instead of being
+  // bound once.
+  #clickHandler = (e) => {
+    if (e.target.closest(".picture-overlay-handle")) {
+      e.preventDefault()
+      this.dialog.classList.toggle("hide-form")
+      return
+    }
+    if (e.target.closest(".zoomed-picture-background")) {
       e.stopPropagation()
       if (e.target.nodeName === "IMG") {
         return
       }
       this.close()
-      return false
-    })
-    $(".picture-overlay-handle").on("click", (e) => {
-      this.dialog.toggleClass("hide-form")
-      return false
-    })
-    this.$previous = $(".previous-picture")
-    this.$next = $(".next-picture")
+    }
+  }
+
+  #keydownHandler = (e) => {
+    if (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA") {
+      return
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        this.previous()
+        e.preventDefault()
+        break
+      case "ArrowRight":
+        this.next()
+        e.preventDefault()
+        break
+    }
+  }
+
+  // The overlay always fills the viewport via its stylesheet, so the inline
+  // dimensions the generic dialog applies would only cap it.
+  resize() {}
+
+  init() {
+    this.dialog_body.removeEventListener("click", this.#clickHandler)
+    this.dialog_body.addEventListener("click", this.#clickHandler)
     this.#initKeyboardNavigation()
     super.init()
   }
 
   previous() {
-    if (this.$previous[0] != null) {
-      this.$previous[0].click()
-    }
+    this.dialog_body.querySelector(".previous-picture")?.click()
   }
 
   next() {
-    if (this.$next[0] != null) {
-      this.$next[0].click()
-    }
+    this.dialog_body.querySelector(".next-picture")?.click()
+  }
+
+  close() {
+    document.removeEventListener("keydown", this.#keydownHandler)
+    return super.close()
   }
 
   build() {
-    this.dialog_container = $('<div class="alchemy-image-overlay-container" />')
-    this.dialog = $('<div class="alchemy-image-overlay-dialog" />')
-    this.dialog_body = $('<div class="alchemy-image-overlay-body" />')
-    this.close_button = $(`<a class="alchemy-image-overlay-close">
+    this.dialog_container = createHtmlElement(
+      '<dialog class="alchemy-image-overlay-container"></dialog>'
+    )
+    this.dialog = createHtmlElement(
+      '<div class="alchemy-image-overlay-dialog"></div>'
+    )
+    this.dialog_body = createHtmlElement(
+      '<div class="alchemy-image-overlay-body"></div>'
+    )
+    this.close_button =
+      createHtmlElement(`<a class="alchemy-image-overlay-close">
       <alchemy-icon name="close" size="xl"></alchemy-icon>
     </a>`)
     this.dialog.append(this.close_button)
     this.dialog.append(this.dialog_body)
     this.dialog_container.append(this.dialog)
-    this.overlay = $('<div class="alchemy-image-overlay" />')
-    this.$body.append(this.overlay)
-    this.$body.append(this.dialog_container)
+    document.body.append(this.dialog_container)
   }
 
   #initKeyboardNavigation() {
-    this.$document.keydown((e) => {
-      if (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA") {
-        return true
-      }
-      switch (e.which) {
-        case 37:
-          this.previous()
-          return false
-        case 39:
-          this.next()
-          return false
-        default:
-          return true
-      }
-    })
+    document.removeEventListener("keydown", this.#keydownHandler)
+    document.addEventListener("keydown", this.#keydownHandler)
   }
 }

data/app/javascript/alchemy_admin/initializer.js

@@ -5,12 +5,12 @@ import { openDialog } from "alchemy_admin/dialog"
 // Opens the help dialog when the user presses the "?" key outside of a field.
 function showHelp(evt) {
   if (
-    !$(evt.target).is("input, textarea") &&
+    !evt.target.matches("input, textarea") &&
     String.fromCharCode(evt.which) === "?"
   ) {
     openDialog("/admin/help", {
       title: Alchemy.t("help"),
-      size: "400x492"
+      size: "500x400"
     })
     return false
   } else {

data/app/javascript/alchemy_admin/link_dialog.js

@@ -1,11 +1,24 @@
 import { translate } from "alchemy_admin/i18n"
 import { Dialog } from "alchemy_admin/dialog"
+import { routes } from "alchemy_admin/routes"
 
 // Matches a URL fragment (#anchor) at the end of a string.
 // Covers RFC 3986 unreserved characters (ALPHA, DIGIT, "-", ".", "_", "~")
 // which are the characters valid in URL fragments and common in DOM element IDs.
 const ANCHOR_REGEX = /#[\w.~-]+$/
 
+// The server renders the expression as a JavaScript literal, so that whatever
+// a host application configures keeps the meaning it had as an inline script.
+// A replaced external tab may not render it, the server validates urls anyway.
+function isLinkUrl(url) {
+  const literal =
+    document.getElementById("external_link")?.dataset.linkUrlRegexp
+  if (!literal) return true
+
+  const end = literal.lastIndexOf("/")
+  return new RegExp(literal.slice(1, end), literal.slice(end + 1)).test(url)
+}
+
 // Represents the link Dialog that appears, if a user clicks the link buttons
 // in TinyMCE or on an Ingredient that has links enabled (e.g. Picture)
 //
@@ -13,7 +26,7 @@ export class LinkDialog extends Dialog {
   #onCreateLink
 
   constructor(link) {
-    const url = new URL(Alchemy.routes.link_admin_pages_path, window.location)
+    const url = new URL(routes.link_admin_pages_path, window.location)
     const parameterMapping = {
       url: link.url,
       selected_tab: link.type,
@@ -109,7 +122,7 @@ export class LinkDialog extends Dialog {
     if (linkType === "internal" && elementAnchor.value !== "") {
       // remove possible fragments on the url and attach the fragment (which contains the #)
       url = url.replace(ANCHOR_REGEX, "") + elementAnchor.value
-    } else if (linkType === "external" && !url.match(Alchemy.link_url_regexp)) {
+    } else if (linkType === "external" && !isLinkUrl(url)) {
       // show validation error and prevent link creation
       this.#showValidationError()
       return

data/app/javascript/alchemy_admin/routes.js

@@ -0,0 +1,18 @@
+import { readJSONScript } from "alchemy_admin/utils/json_script"
+
+// Member routes are rendered with 1 as the record id and become functions
+// that put the given id in its place.
+function buildRoutes({ collection = {}, member = {} } = {}) {
+  const routes = { ...collection }
+
+  Object.entries(member).forEach(([name, path]) => {
+    routes[name] =
+      typeof path === "string"
+        ? (id) => path.replace(/1/, id)
+        : buildRoutes({ member: path })
+  })
+
+  return routes
+}
+
+export const routes = buildRoutes(readJSONScript("alchemy_routes"))