alchemy_cms 7.4.10 → 8.0.0.b

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

@@ -2,6 +2,9 @@ import "tinymce"
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { currentLocale } from "alchemy_admin/i18n"
 
+const DARK_THEME = "alchemy-dark"
+const LIGHT_THEME = "alchemy"
+
 class Tinymce extends AlchemyHTMLElement {
   #min_height = null
 
@@ -32,6 +35,9 @@ class Tinymce extends AlchemyHTMLElement {
       options
     )
     this.tinymceIntersectionObserver.observe(this)
+
+    // Set up theme change listener
+    this._setupThemeChangeListener()
   }
 
   /**
@@ -42,6 +48,9 @@ class Tinymce extends AlchemyHTMLElement {
       this.tinymceIntersectionObserver.disconnect()
     }
 
+    // Remove theme change listener
+    this._removeThemeChangeListener()
+
     tinymce.get(this.editorId)?.remove(this.editorId)
   }
 
@@ -66,22 +75,84 @@ class Tinymce extends AlchemyHTMLElement {
    */
   _initTinymceEditor() {
     tinymce.init(this.configuration).then((editors) => {
-      editors.forEach((editor) => {
-        // mark the editor container as visible
-        // without these correction the editor remains hidden
-        // after a drag and drop action
-        editor.show()
-
-        // remove the spinner after the Tinymce initialized
-        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))
-      })
+      editors.forEach((editor) => this._setupEditor(editor))
     })
   }
 
+  /**
+   * Setup editor after initialization
+   * @param {Object} editor - The TinyMCE editor instance
+   * @private
+   */
+  _setupEditor(editor) {
+    // mark the editor container as visible
+    // without these correction the editor remains hidden
+    // after a drag and drop action
+    editor.show()
+
+    // remove the spinner after the Tinymce initialized (only on first init)
+    const spinner = this.getElementsByTagName("alchemy-spinner")[0]
+    if (spinner) {
+      spinner.remove()
+    }
+
+    // event listener to mark the editor as dirty
+    if (this.elementEditor) {
+      editor.on("dirty", (evt) => {
+        this.elementEditor.setDirty(evt.target.editorContainer)
+      })
+      editor.on("click", () => this.elementEditor.onClickElement(false))
+    }
+  }
+
+  /**
+   * Set up listener for OS theme changes
+   * @private
+   */
+  _setupThemeChangeListener() {
+    this.darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    this.themeChangeHandler = (event) => this._handleThemeChange(event)
+    this.darkModeMediaQuery.addEventListener("change", this.themeChangeHandler)
+  }
+
+  /**
+   * Remove theme change listener
+   * @private
+   */
+  _removeThemeChangeListener() {
+    if (this.darkModeMediaQuery && this.themeChangeHandler) {
+      this.darkModeMediaQuery.removeEventListener(
+        "change",
+        this.themeChangeHandler
+      )
+    }
+  }
+
+  /**
+   * Handle OS theme change and update TinyMCE skin
+   * @param {MediaQueryListEvent} event - The media query change event
+   * @private
+   */
+  _handleThemeChange(event) {
+    const editor = tinymce.get(this.editorId)
+    if (editor) {
+      const skin = event.matches ? DARK_THEME : LIGHT_THEME
+      const content_css = event.matches ? DARK_THEME : LIGHT_THEME
+
+      // Update the skin by reinitializing the editor with new configuration
+      editor.remove()
+      tinymce
+        .init({
+          content_css,
+          ...this.configuration,
+          skin
+        })
+        .then((editors) => {
+          editors.forEach((editor) => this._setupEditor(editor))
+        })
+    }
+  }
+
   get configuration() {
     const customConfig = {}
 
@@ -101,10 +172,12 @@ class Tinymce extends AlchemyHTMLElement {
     })
 
     const config = {
+      content_css: this.preferredTheme,
       ...Alchemy.TinymceDefaults,
       ...customConfig,
       language: currentLocale(),
-      selector: `#${this.editorId}`
+      selector: `#${this.editorId}`,
+      skin: this.preferredTheme
     }
 
     // Tinymce has a height of 400px by default
@@ -115,6 +188,12 @@ class Tinymce extends AlchemyHTMLElement {
     return config
   }
 
+  get preferredTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? DARK_THEME
+      : LIGHT_THEME
+  }
+
   get editorId() {
     return this.editor.id
   }

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/dialog.js

@@ -233,7 +233,7 @@ export class Dialog {
     this.dialog_header = $('<div class="alchemy-dialog-header" />')
     this.dialog_title = $('<div class="alchemy-dialog-title" />')
     this.close_button = $(
-      '<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>'
+      '<button class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></button>'
     )
     this.dialog_title.text(this.options.title)
     this.dialog_header.append(this.dialog_title)

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/file_editors.js

@@ -16,7 +16,7 @@ class FileEditor {
     this.fileIcon.innerHTML = ""
     this.fileName.innerHTML = ""
     this.deleteLink.classList.add("hidden")
-    this.container.closest("alchemy-element-editor").setDirty()
+    this.container.closest("alchemy-element-editor").setDirty(this.formField)
     return false
   }
 }

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/image_loader.js

@@ -1,6 +1,8 @@
 // Shows spinner while loading images and
 // fades the image after its been loaded
 
+import Spinner from "alchemy_admin/spinner"
+
 export default class ImageLoader {
   static init(scope = document) {
     if (typeof scope === "string") {
@@ -15,7 +17,7 @@ export default class ImageLoader {
   constructor(image) {
     this.image = image
     this.parent = image.parentNode
-    this.spinner = new Alchemy.Spinner("small")
+    this.spinner = new Spinner("small")
     this.bind()
   }
 
@@ -28,7 +30,7 @@ export default class ImageLoader {
     if (!force && this.image.complete) return
 
     this.image.classList.add("loading")
-    this.spinner.spin(this.image.parentElement)
+    this.spinner.spin(this.parent)
   }
 
   onLoaded() {

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/picture_editors.js

@@ -5,7 +5,7 @@ import { growl } from "alchemy_admin/growler"
 import ImageLoader from "alchemy_admin/image_loader"
 
 const UPDATE_DELAY = 125
-const IMAGE_PLACEHOLDER = '<alchemy-icon name="image"></alchemy-icon>'
+const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
 const THUMBNAIL_SIZE = "160x120"
 
 export class PictureEditor {
@@ -75,6 +75,7 @@ export class PictureEditor {
         this.image.src = data.url
         this.image.alt = data.alt
         this.image.title = data.title
+        this.setElementDirty()
       })
       .catch((error) => {
         console.error(error.message || error)
@@ -83,8 +84,6 @@ export class PictureEditor {
   }
 
   ensureImage() {
-    if (this.image) return
-
     const img = new Image()
     this.thumbnailBackground.replaceChildren(img)
     this.image = img
@@ -96,7 +95,11 @@ export class PictureEditor {
     this.pictureIdField.value = ""
     this.image = null
     this.cropLink.classList.add("disabled")
-    this.container.closest(".element-editor").setDirty()
+    this.setElementDirty()
+  }
+
+  setElementDirty() {
+    this.container.closest(".element-editor").setDirty(this.container)
   }
 
   updateCropLink() {

data/app/javascript/alchemy_admin/picture_selector.js

@@ -15,13 +15,13 @@ function checkedInputs() {
 }
 
 function editMultiplePicturesUrl(href) {
-  const searchParameters = new URLSearchParams()
+  const url = new URL(href)
+
   checkedInputs().forEach((entry) =>
-    searchParameters.append(entry.name, entry.value)
+    url.searchParams.append(entry.name, entry.value)
   )
-  const url = href + "?" + searchParameters.toString()
 
-  return url
+  return url.toString()
 }
 
 /**