alchemy_cms 7.1.13 → 7.2.0.b

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

@@ -0,0 +1,57 @@
+class TagsAutocomplete extends HTMLElement {
+  connectedCallback() {
+    this.classList.add("autocomplete_tag_list")
+    $(this.input).select2(this.select2Config)
+  }
+
+  get input() {
+    return this.getElementsByTagName("input")[0]
+  }
+
+  get select2Config() {
+    return {
+      tags: true,
+      tokenSeparators: [","],
+      openOnEnter: false,
+      minimumInputLength: 1,
+      createSearchChoice: this.#createSearchChoice,
+      ajax: {
+        url: this.getAttribute("url"),
+        dataType: "json",
+        data: (term) => {
+          return { term }
+        },
+        results: (data) => {
+          return { results: data }
+        }
+      },
+      initSelection: this.#initSelection
+    }
+  }
+
+  #createSearchChoice(term, data) {
+    if (
+      $(data).filter(function () {
+        return this.text.localeCompare(term) === 0
+      }).length === 0
+    ) {
+      return {
+        id: term,
+        text: term
+      }
+    }
+  }
+
+  #initSelection(element, callback) {
+    const data = []
+    $(element.val().split(",")).each(function () {
+      data.push({
+        id: this.trim(),
+        text: this
+      })
+    })
+    callback(data)
+  }
+}
+
+customElements.define("alchemy-tags-autocomplete", TagsAutocomplete)

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

@@ -1,6 +1,7 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { formatFileSize } from "alchemy_admin/utils/format"
 import { translate } from "alchemy_admin/i18n"
+import { growl } from "alchemy_admin/growler"
 
 export class FileUpload extends AlchemyHTMLElement {
   /**
@@ -33,7 +34,7 @@ export class FileUpload extends AlchemyHTMLElement {
       </div>
       <sl-tooltip content="${translate("Abort upload")}">
         <button class="icon_button" aria-label="${translate("Abort upload")}">
-          <i class="icon ri-close-line ri-fw"></i>
+          <alchemy-icon name="close"></alchemy-icon>
         </button>
       </sl-tooltip>
     `
@@ -116,7 +117,7 @@ export class FileUpload extends AlchemyHTMLElement {
     this.request.onload = () => {
       if (this.request.status < 400) {
         this.status = "successful"
-        Alchemy.growl(this.responseMessage)
+        growl(this.responseMessage)
       } else {
         this.status = "failed"
         this.errorMessage = this.responseMessage
@@ -153,7 +154,7 @@ export class FileUpload extends AlchemyHTMLElement {
     if (errorMessageContainer) {
       errorMessageContainer.textContent = message
     }
-    Alchemy.growl(message, "error")
+    growl(message, "error")
   }
 
   /**

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

@@ -77,7 +77,7 @@ export class Progress extends AlchemyHTMLElement {
 
         <sl-tooltip content="${this.buttonLabel}">
           <button class="icon_button" aria-label="${this.buttonLabel}">
-            <i class="icon ri-close-line ri-fw"></i>
+            <alchemy-icon name="close"></alchemy-icon>
           </button>
         </sl-tooltip>
       </div>

data/app/javascript/alchemy_admin/confirm_dialog.js

@@ -0,0 +1,133 @@
+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"
+
+class ConfirmDialog {
+  constructor(message, options = {}) {
+    const DEFAULTS = {
+      size: "300x100",
+      title: translate("Please confirm"),
+      ok_label: translate("Yes"),
+      cancel_label: translate("No"),
+      on_ok() {}
+    }
+
+    options = { ...DEFAULTS, ...options }
+
+    this.message = message
+    this.options = options
+    this.#build()
+    this.#bindEvents()
+  }
+
+  open() {
+    requestAnimationFrame(() => {
+      this.dialog.show()
+    })
+  }
+
+  #build() {
+    const width = this.options.size.split("x")[0]
+    this.dialog = createHtmlElement(`
+      <sl-dialog label="${this.options.title}" style="--width: ${width}px">
+        ${this.message}
+        <button slot="footer" type="reset" class="secondary mx-1 my-0" autofocus>
+          ${this.options.cancel_label}
+        </button>
+        <button slot="footer" type="submit" class="mx-1 my-0">
+          ${this.options.ok_label}
+        </button>
+      </sl-dialog>
+    `)
+    document.body.append(this.dialog)
+  }
+
+  #bindEvents() {
+    this.cancelButton.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.dialog.hide()
+    })
+    this.okButton.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.options.on_ok()
+      this.dialog.hide()
+    })
+    // Prevent the dialog from closing when the user clicks on the overlay
+    this.dialog.addEventListener("sl-request-close", (event) => {
+      if (event.detail.source === "overlay") {
+        event.preventDefault()
+      }
+    })
+    // Remove the dialog from the DOM after it has been hidden
+    this.dialog.addEventListener("sl-after-hide", () => {
+      this.dialog.remove()
+    })
+  }
+
+  get cancelButton() {
+    return this.dialog.querySelector("button[type=reset]")
+  }
+
+  get okButton() {
+    return this.dialog.querySelector("button[type=submit]")
+  }
+}
+
+// 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)
+//
+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 = {
+      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)
+          }
+        })
+      }
+    }
+
+    openConfirmDialog(opts.message, { ...options, ...opts })
+  })
+}

data/app/javascript/alchemy_admin/dirty.js

@@ -1,6 +1,6 @@
-function isPageDirty() {
-  return $("#element_area").find("alchemy-element-editor.dirty").length > 0
-}
+import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
+import { translate } from "alchemy_admin/i18n"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 
 function checkPageDirtyness(element) {
   let callback = () => {}
@@ -13,18 +13,21 @@ function checkPageDirtyness(element) {
       $form.append($(element).find("input"))
       $form.appendTo("body")
 
-      Alchemy.pleaseWaitOverlay()
-      $form.submit()
+      pleaseWaitOverlay()
+      $form.trigger("submit")
     }
   } else if ($(element).is("a")) {
     callback = () => Turbo.visit(element.pathname)
   }
 
-  if (isPageDirty()) {
-    Alchemy.openConfirmDialog(Alchemy.t("page_dirty_notice"), {
-      title: Alchemy.t("warning"),
-      ok_label: Alchemy.t("ok"),
-      cancel_label: Alchemy.t("cancel"),
+  const isPageDirty =
+    document.querySelectorAll("alchemy-element-editor.dirty").length > 0
+
+  if (isPageDirty) {
+    openConfirmDialog(translate("page_dirty_notice"), {
+      title: translate("warning"),
+      ok_label: translate("ok"),
+      cancel_label: translate("cancel"),
       on_ok: function () {
         window.onbeforeunload = void 0
         callback()
@@ -36,10 +39,12 @@ function checkPageDirtyness(element) {
 }
 
 function PageLeaveObserver() {
-  $("#main_navi a").on("click", function (event) {
-    if (!checkPageDirtyness(event.currentTarget)) {
-      event.preventDefault()
-    }
+  document.querySelectorAll("#main_navi a").forEach((element) => {
+    element.addEventListener("click", (event) => {
+      if (!checkPageDirtyness(event.currentTarget)) {
+        event.preventDefault()
+      }
+    })
   })
 }
 

data/app/javascript/alchemy_admin/fixed_elements.js

@@ -0,0 +1,24 @@
+// Creates a fixed element tab.
+export function createTab(element_id, label) {
+  const fixed_elements = document.getElementById("fixed-elements")
+  const panel_name = `fixed-element-${element_id}`
+
+  const tab = `<sl-tab slot="nav" panel="${panel_name}">${label}</sl-tab>`
+  const panel = `<sl-tab-panel name="${panel_name}" style="--padding: 0" />`
+
+  fixed_elements.innerHTML += tab + panel
+
+  window.requestAnimationFrame(function () {
+    fixed_elements.show(panel_name)
+  })
+}
+
+export function removeTab(element_id) {
+  const fixed_elements = document.getElementById("fixed-elements")
+  const panel_name = `fixed-element-${element_id}`
+
+  fixed_elements.querySelector(`sl-tab[panel="${panel_name}"]`).remove()
+  fixed_elements.querySelector(`sl-tab-panel[name="${panel_name}"]`).remove()
+
+  fixed_elements.show("main-content-elements")
+}

data/app/javascript/alchemy_admin/growler.js

@@ -0,0 +1,15 @@
+import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+
+function build(message, flashType) {
+  const flashNotices = document.getElementById("flash_notices")
+  const flashMessage = createHtmlElement(`
+    <alchemy-message type="${flashType}" dismissable>
+      ${message}
+    </alchemy-message>
+  `)
+  flashNotices.append(flashMessage)
+}
+
+export function growl(message, style = "notice") {
+  build(message, style)
+}

data/app/javascript/alchemy_admin/gui.js

@@ -1,12 +1,10 @@
-import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
+import Hotkeys from "alchemy_admin/hotkeys"
 
 function init(scope) {
   if (!scope) {
     Alchemy.watchForDialogs()
   }
-  Alchemy.Hotkeys(scope)
-  Alchemy.ListFilter(scope)
-  TagsAutocomplete(scope)
+  Hotkeys(scope)
 }
 
 export default {

data/app/javascript/alchemy_admin/hotkeys.js

@@ -0,0 +1,60 @@
+import "keymaster"
+
+const bindedHotkeys = []
+
+function showHelp(evt) {
+  if (
+    !$(evt.target).is("input, textarea") &&
+    String.fromCharCode(evt.which) === "?"
+  ) {
+    Alchemy.openDialog("/admin/help", {
+      title: Alchemy.t("help"),
+      size: "400x492"
+    })
+    return false
+  } else {
+    return true
+  }
+}
+
+export default function (scope = document) {
+  // The scope can be a jQuery object because we still use jQuery in Alchemy.Dialog.
+  if (scope instanceof jQuery) {
+    scope = scope[0]
+  }
+
+  // Unbind all previously registered hotkeys if we are not inside a dialog.
+  if (scope === document) {
+    document.removeEventListener("keypress", showHelp)
+    document.addEventListener("keypress", showHelp)
+    bindedHotkeys.forEach((hotkey) => key.unbind(hotkey))
+  }
+
+  // Binds keyboard shortcuts to search fields.
+  const search_fields = scope.querySelectorAll(".search_input_field")
+  const search_fields_clear = scope.querySelectorAll(
+    ".search_field_clear, .js_filter_field_clear"
+  )
+  key("alt+f", function () {
+    key.setScope("search")
+    search_fields.forEach((el) => el.focus({ focusVisible: true }))
+    return false
+  })
+  bindedHotkeys.push("alt+f")
+  key("esc", "search", function () {
+    search_fields_clear.forEach((el) => el.click())
+    search_fields.forEach((el) => el.blur())
+  })
+  bindedHotkeys.push("esc")
+
+  // Binds click events to buttons with hotkeys.
+  //
+  // Simply add a data-alchemy-hotkey attribute to your link.
+  // If a hotkey is triggered by user, the click event of the element gets triggerd.
+  //
+  scope.querySelectorAll("[data-alchemy-hotkey]").forEach(function (el) {
+    const hotkey = el.dataset.alchemyHotkey
+    key(hotkey, () => el.click())
+    bindedHotkeys.push(hotkey)
+  })
+}

data/app/javascript/alchemy_admin/image_loader.js

@@ -38,9 +38,9 @@ export default class ImageLoader {
   }
 
   onError(evt) {
-    const message = `Could not load "${this.image.src}"`
+    const message = `Could not load ${this.image.src}`
     this.spinner.stop()
-    this.parent.innerHTML = `<span class="icon error ri-alert-line" title="${message}" />`
+    this.parent.innerHTML = `<alchemy-icon name="alert" class="error" title="${message}" />`
     console.error(message, evt)
     this.unbind()
   }

data/app/javascript/alchemy_admin/ingredient_anchor_link.js

@@ -5,10 +5,9 @@ export default class IngredientAnchorLink {
     )
     if (ingredientEditor) {
       const icon = ingredientEditor.querySelector(
-        ".edit-ingredient-anchor-link > a > .icon"
+        ".edit-ingredient-anchor-link alchemy-icon"
       )
-      icon?.classList.toggle("ri-bookmark-fill", active)
-      icon?.classList.toggle("ri-bookmark-line", !active)
+      icon.setAttribute("icon-style", active ? "fill" : "line")
     }
   }
 }

data/app/javascript/alchemy_admin/initializer.js

@@ -18,18 +18,13 @@ function selectHandler(selectId, parameterName, forcedReload = false) {
   })
 }
 
-function Initialize() {
+export default function Initializer() {
   // We obviously have javascript enabled.
   $("html").removeClass("no-js")
 
   // Initialize the GUI.
   Alchemy.GUI.init()
 
-  // Fade all growl notifications.
-  if ($("#flash_notices").length > 0) {
-    Alchemy.Growler.fade()
-  }
-
   // Add observer for please wait overlay.
   $(".please_wait")
     .not("*[data-alchemy-confirm]")
@@ -61,5 +56,3 @@ function Initialize() {
     )
   }
 }
-
-export default Initialize

data/app/javascript/alchemy_admin/link_dialog.js

@@ -0,0 +1,131 @@
+import { translate } from "alchemy_admin/i18n"
+
+// 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)
+//
+export class LinkDialog extends Alchemy.Dialog {
+  #onCreateLink
+
+  constructor(link) {
+    const url = new URL(Alchemy.routes.link_admin_pages_path, window.location)
+    const parameterMapping = {
+      url: link.url,
+      selected_tab: link.type,
+      link_title: link.title,
+      link_target: link.target
+    }
+
+    // searchParams.set would also add undefined values
+    Object.keys(parameterMapping).forEach((key) => {
+      if (parameterMapping[key]) {
+        url.searchParams.set(key, parameterMapping[key])
+      }
+    })
+
+    super(url.href, {
+      size: "600x320",
+      title: translate("Link")
+    })
+  }
+
+  /**
+   *  Called from Dialog class after the url was loaded
+   */
+  replace(data) {
+    // let Dialog class handle the content replacement
+    super.replace(data)
+    this.#attachEvents()
+  }
+
+  /**
+   * make the open method a promise
+   * maybe in a future version the whole Dialog will respond with a promise result if the dialog is closing
+   * @returns {Promise<unknown>}
+   */
+  open() {
+    super.open()
+    return new Promise((resolve) => (this.#onCreateLink = resolve))
+  }
+
+  /**
+   * Attaches click events to forms in the link dialog.
+   */
+  #attachEvents() {
+    // enable the dom selection in internal link tab
+    const internalForm = document.querySelector(
+      '[data-link-form-type="internal"]'
+    )
+    const attachmentSelect = document.querySelector(
+      '[data-link-form-type="file"] alchemy-attachment-select'
+    )
+
+    internalForm.addEventListener("Alchemy.RemoteSelect.Change", (e) => {
+      this.#updatePage(e.detail.added)
+    })
+
+    attachmentSelect.addEventListener("Alchemy.RemoteSelect.Change", (e) => {
+      const attachment = e.detail.added
+      document.getElementById("file_link").value = attachment
+        ? attachment.url
+        : ""
+    })
+
+    document.querySelectorAll("[data-link-form-type]").forEach((form) => {
+      form.addEventListener("submit", (e) => {
+        e.preventDefault()
+        this.#submitForm(e.target.dataset.linkFormType)
+      })
+    })
+  }
+
+  /**
+   * update page select and set anchor select
+   * @param page
+   */
+  #updatePage(page = null) {
+    const internalLink = document.getElementById("internal_link")
+    const domIdSelect = document.querySelector(
+      '[data-link-form-type="internal"] alchemy-dom-id-api-select'
+    )
+
+    internalLink.value = page ? page.url_path : ""
+    domIdSelect.page = page ? page.id : undefined
+  }
+
+  /**
+   * submit the form itself
+   * @param linkType
+   */
+  #submitForm(linkType) {
+    const elementAnchor = document.getElementById("element_anchor")
+    let url = document.getElementById(`${linkType}_link`).value
+
+    if (linkType === "internal" && elementAnchor.value !== "") {
+      // remove possible fragments on the url and attach the fragment (which contains the #)
+      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()
+      return
+    }
+
+    // Create the link
+    this.#onCreateLink({
+      url: url.trim(),
+      title: document.getElementById(`${linkType}_link_title`).value,
+      target: document.getElementById(`${linkType}_link_target`)?.value,
+      type: linkType
+    })
+    this.close()
+  }
+
+  /**
+   * Shows validation errors
+   */
+  #showValidationError() {
+    const errors = document.getElementById("errors")
+    errors.querySelector("ul").innerHTML =
+      `<li>${Alchemy.t("url_validation_failed")}</li>`
+    errors.style.display = "block"
+  }
+}

data/app/javascript/alchemy_admin/locales/en.js

@@ -21,6 +21,9 @@ export const en = {
   "Uploaded bytes exceed file size": "Uploaded bytes exceed file size",
   "Abort upload": "Abort upload",
   "Cancel all uploads": "Cancel all uploads",
+  None: "None",
+  "No anchors found": "No anchors found",
+  "Select a page first": "Select a page first",
   Close: "Close",
   formats: {
     datetime: "Y-m-d H:i",

data/app/javascript/alchemy_admin/node_tree.js

@@ -1,6 +1,7 @@
 import Sortable from "sortablejs"
 import { patch } from "alchemy_admin/utils/ajax"
 import { on } from "alchemy_admin/utils/events"
+import { growl } from "alchemy_admin/growler"
 
 function displayNodeFolders() {
   document.querySelectorAll("li.menu-item").forEach((el) => {
@@ -32,11 +33,11 @@ function onFinishDragging(evt) {
   patch(url, data)
     .then(() => {
       const message = Alchemy.t("Successfully moved menu item")
-      Alchemy.growl(message)
+      growl(message)
       displayNodeFolders()
     })
     .catch((error) => {
-      Alchemy.growl(error.message || error, "error")
+      growl(error.message || error, "error")
     })
 }
 
@@ -56,7 +57,7 @@ function handleNodeFolders() {
         displayNodeFolders()
       })
       .catch((error) => {
-        Alchemy.growl(error.message || error)
+        growl(error.message || error)
       })
   })
 }