alchemy_cms 7.4.16 → 8.0.0.a

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

@@ -1,7 +1,7 @@
 import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
-import { confirmToDeleteDialog } from "alchemy_admin/confirm_dialog"
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 
 export class DeleteElementButton extends HTMLElement {
   constructor() {
@@ -9,12 +9,12 @@ export class DeleteElementButton extends HTMLElement {
     this.addEventListener("click", this)
   }
 
-  handleEvent() {
-    confirmToDeleteDialog(this.url, { message: this.message }).then(
-      (response) => {
-        this.#removeElement(response)
-      }
-    )
+  async handleEvent() {
+    const confirmed = await openConfirmDialog(this.message)
+    if (confirmed) {
+      const response = await fetch(this.url, { method: "DELETE" })
+      this.#removeElement(await response.json())
+    }
   }
 
   #removeElement(response) {

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

@@ -231,7 +231,7 @@ export class ElementEditor extends HTMLElement {
   setDirty() {
     if (this.hasEditors) {
       this.dirty = true
-      window.onbeforeunload = () => Alchemy.t("page_dirty_notice")
+      window.onbeforeunload = (event) => event.preventDefault()
     }
   }
 

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

@@ -1,6 +1,3 @@
-"use strict"
-// ^ add support for top-level await in Terser
-
 import "alchemy_admin/components/action"
 import "alchemy_admin/components/attachment_select"
 import "alchemy_admin/components/button"
@@ -27,6 +24,7 @@ import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tags_autocomplete"
 import "alchemy_admin/components/tinymce"
+import "alchemy_admin/components/update_check"
 
 await Promise.race([
   // Load all global custom elements

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

@@ -1,4 +1,5 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { setupSelectLocale } from "alchemy_admin/i18n"
 
 export class RemoteSelect extends AlchemyHTMLElement {
   static properties = {
@@ -9,7 +10,9 @@ export class RemoteSelect extends AlchemyHTMLElement {
     url: { default: "" }
   }
 
-  connected() {
+  async connected() {
+    await setupSelectLocale()
+
     this.input.classList.add("alchemy_selectbox")
 
     $(this.input)

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

@@ -1,5 +1,9 @@
+import { setupSelectLocale } from "alchemy_admin/i18n"
+
 class TagsAutocomplete extends HTMLElement {
-  connectedCallback() {
+  async connectedCallback() {
+    await setupSelectLocale()
+
     this.classList.add("autocomplete_tag_list")
     $(this.input).select2(this.select2Config)
   }

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

@@ -76,8 +76,10 @@ class Tinymce extends AlchemyHTMLElement {
         this.getElementsByTagName("alchemy-spinner")[0].remove()
 
         // event listener to mark the editor as dirty
-        editor.on("dirty", () => this.elementEditor.setDirty())
-        editor.on("click", () => this.elementEditor.onClickElement(false))
+        if (this.elementEditor) {
+          editor.on("dirty", () => this.elementEditor.setDirty())
+          editor.on("click", () => this.elementEditor.onClickElement(false))
+        }
       })
     })
   }

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

@@ -0,0 +1,42 @@
+import Spinner from "alchemy_admin/spinner"
+
+class UpdateCheck extends HTMLElement {
+  async connectedCallback() {
+    const spinner = new Spinner("small")
+    spinner.spin(this)
+
+    try {
+      const response = await fetch(this.url)
+      const responseText = await response.text()
+
+      if (response.ok) {
+        this.showStatus(responseText)
+      } else {
+        this.showError(response)
+      }
+    } catch (error) {
+      this.showError(error)
+    } finally {
+      spinner.stop()
+    }
+  }
+
+  get url() {
+    return this.getAttribute("url")
+  }
+
+  showStatus(responseText) {
+    if (responseText == "true") {
+      this.querySelector(".update_available").classList.remove("hidden")
+    } else {
+      this.querySelector(".up_to_date").classList.remove("hidden")
+    }
+  }
+
+  showError(error) {
+    this.querySelector(".error").classList.remove("hidden")
+    console.error("[alchemy] Error fetching update status", error)
+  }
+}
+
+customElements.define("alchemy-update-check", UpdateCheck)

data/app/javascript/alchemy_admin/components/uploader/file_upload.js

@@ -4,21 +4,28 @@ import { translate } from "alchemy_admin/i18n"
 import { growl } from "alchemy_admin/growler"
 
 export class FileUpload extends AlchemyHTMLElement {
+  constructor() {
+    super()
+
+    this.file = null
+    this.request = null
+
+    this.progressEventLoaded = 0
+    this.progressEventTotal = 0
+    this.className = "in-progress"
+    this.valid = true
+    this.value = 0
+  }
+
   /**
+   * Initialize the component with file and request
    * @param {File} file
    * @param {XMLHttpRequest} request
    */
-  constructor(file, request) {
-    super({})
-
+  initialize(file, request) {
     this.file = file
     this.request = request
-
-    this.progressEventLoaded = 0
     this.progressEventTotal = file ? file.size : 0
-    this.className = "in-progress"
-    this.valid = true
-    this.value = 0
 
     this._validateFile()
     this._addRequestEventListener()

data/app/javascript/alchemy_admin/components/uploader/progress.js

@@ -6,19 +6,25 @@ import { translate } from "alchemy_admin/i18n"
 export class Progress extends AlchemyHTMLElement {
   #visible = false
 
-  /**
-   * @param {FileUpload[]} fileUploads
-   */
-  constructor(fileUploads = []) {
+  constructor() {
     super()
     this.buttonLabel = translate("Cancel all uploads")
-    this.fileUploads = fileUploads
-    this.fileCount = fileUploads.length
+    this.fileUploads = []
+    this.fileCount = 0
     this.className = "in-progress"
     this.visible = true
     this.handleFileChange = () => this._updateView()
   }
 
+  /**
+   * Initialize the component with file uploads
+   * @param {FileUpload[]} fileUploads
+   */
+  initialize(fileUploads = []) {
+    this.fileUploads = fileUploads
+    this.fileCount = fileUploads.length
+  }
+
   /**
    * append file progress - components for each file
    */

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

@@ -68,7 +68,8 @@ export class Uploader extends AlchemyHTMLElement {
 
     const fileUploads = files.map((file) => {
       const request = new XMLHttpRequest()
-      const fileUpload = new FileUpload(file, request)
+      const fileUpload = new FileUpload()
+      fileUpload.initialize(file, request)
 
       if (Alchemy.uploader_defaults.upload_limit - 1 < fileUploadCount) {
         fileUpload.valid = false
@@ -110,7 +111,8 @@ export class Uploader extends AlchemyHTMLElement {
       this.uploadProgress.cancel()
       document.body.removeChild(this.uploadProgress)
     }
-    this.uploadProgress = new Progress(fileUploads)
+    this.uploadProgress = new Progress()
+    this.uploadProgress.initialize(fileUploads)
     this.uploadProgress.onComplete = (status) => {
       this.dispatchCustomEvent(`upload.${status}`)
     }

data/app/javascript/alchemy_admin/confirm_dialog.js

@@ -1,20 +1,19 @@
-import { growl } from "alchemy_admin/growler"
-import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
 import { translate } from "alchemy_admin/i18n"
 
-const DEFAULTS = {
+const getDefaults = () => ({
+  // The default size of the dialog
   size: "300x100",
   title: translate("Please confirm"),
   ok_label: translate("Yes"),
   cancel_label: translate("No"),
   on_ok() {}
-}
+})
 
 class ConfirmDialog {
   constructor(message, options = {}) {
     this.message = message
-    this.options = { ...DEFAULTS, ...options }
+    this.options = { ...getDefaults(), ...options }
     this.#build()
     this.#bindEvents()
   }
@@ -44,6 +43,7 @@ class ConfirmDialog {
   #bindEvents() {
     this.cancelButton.addEventListener("click", (evt) => {
       evt.preventDefault()
+      this.options.on_cancel()
       this.dialog.hide()
     })
     this.okButton.addEventListener("click", (evt) => {
@@ -54,6 +54,7 @@ class ConfirmDialog {
     // Prevent the dialog from closing when the user clicks on the overlay
     this.dialog.addEventListener("sl-request-close", (event) => {
       if (event.detail.source === "overlay") {
+        this.options.on_cancel()
         event.preventDefault()
       }
     })
@@ -72,60 +73,29 @@ class ConfirmDialog {
   }
 }
 
-// Opens a confirm dialog
-//
-// Arguments:
-//
-// message - The message that will be displayed to the user (String)
-//
-// Options:
-//
-//   title: ''         - The title of the overlay window (String)
-//   cancel_label: ''   - The label of the cancel button (String)
-//   ok_label: ''       - The label of the ok button (String)
-//   on_ok: null  - The function to invoke on confirmation (Function)
-//
+/* Opens a confirm dialog
+ *
+ * @param {string} message - The message that will be displayed to the user
+ * @param {Object} [options={}] - Configuration options for the dialog
+ * @param {string} [options.title="Please confirm"] - The title of the overlay window
+ * @param {string} [options.cancel_label="No"] - The label of the cancel button
+ * @param {string} [options.ok_label="Yes"] - The label of the ok button
+ *
+ * @returns {Promise<void>} A promise that resolves to true when the OK button is clicked and
+ *   resolves to false when the cancel button is clicked. Works as confirm dialog replacement
+ *   for Turbo.confirm.
+ */
 export function openConfirmDialog(message, options = {}) {
-  const dialog = new ConfirmDialog(message, options)
-  dialog.open()
-  return dialog
-}
-
-// Opens a confirm to delete dialog
-//
-// Arguments:
-//
-//   url  - The url to the server delete action. Uses DELETE as HTTP method. (String)
-//   opts - An options object (Object)
-//
-// Options:
-//
-//   title: ''        - The title of the confirmation window (String)
-//   message: ''      - The message that will be displayed to the user (String)
-//   ok_label: ''      - The label for the ok button (String)
-//   cancel_label: ''  - The label for the cancel button (String)
-//
-export function confirmToDeleteDialog(url, opts = {}) {
-  return new Promise((resolve, reject) => {
-    const options = {
+  return new Promise((resolve) => {
+    const dialog = new ConfirmDialog(message, {
+      ...options,
       on_ok() {
-        pleaseWaitOverlay()
-        $.ajax({
-          url,
-          type: "DELETE",
-          error(xhr, _status, error) {
-            const type = xhr.status === 403 ? "warning" : "error"
-            growl(xhr.responseText || error, type)
-            reject(error)
-          },
-          complete(response) {
-            pleaseWaitOverlay(false)
-            resolve(response)
-          }
-        })
+        resolve(true)
+      },
+      on_cancel() {
+        resolve(false)
       }
-    }
-
-    openConfirmDialog(opts.message, { ...options, ...opts })
+    })
+    dialog.open()
   })
 }

data/app/javascript/alchemy_admin/dirty.js

@@ -27,8 +27,9 @@ function checkPageDirtyness(element) {
     openConfirmDialog(translate("page_dirty_notice"), {
       title: translate("warning"),
       ok_label: translate("ok"),
-      cancel_label: translate("cancel"),
-      on_ok: function () {
+      cancel_label: translate("cancel")
+    }).then((proceed) => {
+      if (proceed) {
         window.onbeforeunload = void 0
         callback()
       }

data/app/javascript/alchemy_admin/i18n.js

@@ -1,20 +1,5 @@
-import { en } from "alchemy_admin/locales/en"
-
-Alchemy.translations = Object.assign(Alchemy.translations || {}, { en })
-
 const KEY_SEPARATOR = /\./
 
-function getTranslations() {
-  const locale = currentLocale()
-  const translations = Alchemy.translations && Alchemy.translations[locale]
-
-  if (translations) {
-    return translations
-  }
-  console.warn(`Translations for locale ${locale} not found!`)
-  return {}
-}
-
 function nestedTranslation(translations, key) {
   const keys = key.split(KEY_SEPARATOR)
   const group = translations[keys[0]]
@@ -25,7 +10,13 @@ function nestedTranslation(translations, key) {
 }
 
 function getTranslation(key) {
-  const translations = getTranslations()
+  const locale = currentLocale()
+  const translations = Alchemy.translations
+
+  if (!translations) {
+    console.warn(`Translations for locale ${locale} not found!`)
+    return key
+  }
 
   if (KEY_SEPARATOR.test(key)) {
     return nestedTranslation(translations, key)
@@ -48,3 +39,11 @@ 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/initializer.js

@@ -1,8 +1,3 @@
-import {
-  confirmToDeleteDialog,
-  openConfirmDialog
-} from "alchemy_admin/confirm_dialog"
-
 import Hotkeys from "alchemy_admin/hotkeys"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 
@@ -26,44 +21,6 @@ function selectHandler(selectId, parameterName, forcedReload = false) {
   })
 }
 
-// Watches elements for Alchemy Dialogs
-//
-// Links having a data-alchemy-confirm-delete
-// and input/buttons having a data-alchemy-confirm attribute get watched.
-//
-// You can pass a scope so that only elements inside this scope are queried.
-//
-// The href attribute of the link is the url for the overlay window.
-//
-// See Dialog for further options you can add to the data attribute.
-//
-function watchForConfirmDialogs(scope) {
-  if (scope == null) {
-    scope = "#alchemy"
-  }
-  $(scope).on("click", "[data-alchemy-confirm-delete]", function (event) {
-    const $this = $(this)
-    const options = $this.data("alchemy-confirm-delete")
-    confirmToDeleteDialog($this.attr("href"), options)
-    event.preventDefault()
-  })
-  $(scope).on("click", "[data-alchemy-confirm]", function (event) {
-    const options = $(this).data("alchemy-confirm")
-    openConfirmDialog(
-      options.message,
-      $.extend(options, {
-        ok_label: options.ok_label,
-        cancel_label: options.cancel_label,
-        on_ok: () => {
-          pleaseWaitOverlay()
-          this.form.submit()
-        }
-      })
-    )
-    event.preventDefault()
-  })
-}
-
 export default function Initializer() {
   // We obviously have javascript enabled.
   $("html").removeClass("no-js")
@@ -71,13 +28,8 @@ export default function Initializer() {
   // Initialize hotkeys.
   Hotkeys()
 
-  // Watch for click on confirm dialog links.
-  watchForConfirmDialogs()
-
   // Add observer for please wait overlay.
-  $(".please_wait")
-    .not("*[data-alchemy-confirm]")
-    .on("click", Alchemy.pleaseWaitOverlay)
+  $(".please_wait").on("click", pleaseWaitOverlay)
 
   // Hack for enabling tab focus for <a>'s styled as button.
   $("a.button").attr({ tabindex: 0 })

data/app/javascript/alchemy_admin/link_dialog.js

@@ -1,11 +1,6 @@
 import { translate } from "alchemy_admin/i18n"
 import { Dialog } from "alchemy_admin/dialog"
 
-// 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.~-]+$/
-
 // 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)
 //
@@ -108,7 +103,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
+      url = url.replace(/#\w+$/, "") + elementAnchor.value
     } else if (linkType === "external" && !url.match(Alchemy.link_url_regexp)) {
       // show validation error and prevent link creation
       this.#showValidationError()

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

@@ -1,27 +1,37 @@
-function buildPromise(xhr) {
-  return new Promise((resolve, reject) => {
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 400) {
-        try {
-          resolve({
-            data: JSON.parse(xhr.responseText),
-            status: xhr.status
-          })
-        } catch (error) {
-          reject(error)
-        }
-      } else {
-        try {
-          reject(JSON.parse(xhr.responseText))
-        } catch (error) {
-          reject(error)
-        }
-      }
-    }
-    xhr.onerror = () => {
-      reject(new Error("An error occurred during the transaction"))
-    }
-  })
+const JSON_CONTENT_TYPE = "application/json"
+
+function isGetRequest(method) {
+  return method.toLowerCase() === "get"
+}
+
+function prepareURL(path, data, method) {
+  const url = new URL(window.location.origin + path)
+
+  if (data && isGetRequest(method)) {
+    url.search = new URLSearchParams(data).toString()
+  }
+
+  return url.toString()
+}
+
+function prepareHeaders(accept) {
+  return {
+    "Content-Type": "application/json; charset=utf-8",
+    Accept: accept,
+    "X-Requested-With": "XMLHttpRequest",
+    "X-CSRF-Token": getToken()
+  }
+}
+
+function prepareOptions(method, data, accept) {
+  const headers = prepareHeaders(accept)
+  const options = { method, headers }
+
+  if (data && !isGetRequest(method)) {
+    options.body = JSON.stringify(data)
+  }
+
+  return options
 }
 
 export function getToken() {
@@ -37,30 +47,27 @@ export function patch(url, data) {
   return ajax("PATCH", url, data)
 }
 
-export function post(url, data, accept = "application/json") {
+export function post(url, data, accept = JSON_CONTENT_TYPE) {
   return ajax("POST", url, data, accept)
 }
 
-export default function ajax(method, path, data, accept = "application/json") {
-  const xhr = new XMLHttpRequest()
-  const promise = buildPromise(xhr)
-  const url = new URL(window.location.origin + path)
+export default async function ajax(
+  method,
+  path,
+  data,
+  accept = JSON_CONTENT_TYPE
+) {
+  const response = await fetch(
+    prepareURL(path, data, method),
+    prepareOptions(method, data, accept)
+  )
+  const contentType = response.headers.get("content-type")
+  const isJson = contentType?.includes(JSON_CONTENT_TYPE)
+  const responseData = isJson ? await response.json() : null
 
-  if (data && method.toLowerCase() === "get") {
-    url.search = new URLSearchParams(data).toString()
-  }
-
-  xhr.open(method, url.toString())
-  xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
-  xhr.setRequestHeader("Accept", accept)
-  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
-  xhr.setRequestHeader("X-CSRF-Token", getToken())
-
-  if (data && method.toLowerCase() !== "get") {
-    xhr.send(JSON.stringify(data))
+  if (response.ok) {
+    return { data: responseData, status: response.status }
   } else {
-    xhr.send()
+    throw responseData || new Error("An error occurred during the transaction")
   }
-
-  return promise
 }

data/app/javascript/alchemy_admin.js

@@ -20,10 +20,7 @@ import Sitemap from "alchemy_admin/sitemap"
 import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
-import {
-  openConfirmDialog,
-  confirmToDeleteDialog
-} from "alchemy_admin/confirm_dialog"
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 
 // Web Components
 import "alchemy_admin/components"
@@ -53,11 +50,9 @@ Object.assign(Alchemy, {
   Sitemap,
   Spinner,
   PagePublicationFields,
-  reloadPreview,
-  openConfirmDialog,
-  confirmToDeleteDialog
+  reloadPreview
 })
 
 Rails.start()
-
+Turbo.config.forms.confirm = openConfirmDialog
 $(document).on("turbo:load", Initializer)