alchemy_cms 8.3.10 → 8.4.0

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

@@ -1,17 +1,15 @@
 import TomSelect from "tom-select"
+import "alchemy_admin/components/icon"
 import { translate } from "alchemy_admin/i18n"
 import {
-  autoUpdate,
-  computePosition,
-  flip,
-  offset,
-  size
-} from "@floating-ui/dom"
-
-const DROPDOWN_WINDOW_MARGIN = 16
-const DROPDOWN_MIN_HEIGHT = 120
-
-class Select extends HTMLSelectElement {
+  createDropdownPositioning,
+  dropdownMessages,
+  focusTomSelect,
+  removeButton,
+  teardownTomSelect
+} from "alchemy_admin/utils/tom_select"
+
+export class Select extends HTMLSelectElement {
   #tomSelect = null
 
   connectedCallback() {
@@ -33,6 +31,10 @@ class Select extends HTMLSelectElement {
     this.#tomSelect?.disable()
   }
 
+  focus() {
+    focusTomSelect(this.#tomSelect, () => super.focus())
+  }
+
   setOptions(data, prompt = undefined) {
     const selectedValue = this.value
 
@@ -62,21 +64,22 @@ class Select extends HTMLSelectElement {
     return this.getAttribute("placeholder")
   }
 
+  // Subclasses may return extra Tom Select render functions (e.g. custom
+  // `option`/`item` templates) to merge on top of the defaults below.
+  get renderers() {
+    return {}
+  }
+
   #initTomSelect() {
     const plugins = {}
     const hasPlaceholder = !!this.placeholder
     // Capture this before Tom Select initializes, since it rewrites the
     // select's selected option during setup.
     const hasSelectedOption = !!this.querySelector("option[selected]")
-    const dropdownMask = document.createElement("div")
-    dropdownMask.className = "ts-dropdown-mask"
-
-    let removeAutoUpdater = () => {}
+    const { onDropdownOpen, onDropdownClose } = createDropdownPositioning()
 
     if (this.multiple) {
-      plugins.remove_button = {
-        title: translate("Remove")
-      }
+      plugins.remove_button = removeButton()
     }
 
     if (this.allowClear) {
@@ -111,63 +114,8 @@ class Select extends HTMLSelectElement {
       },
       // remove the transition after selection of option.
       refreshThrottle: 0,
-      onDropdownOpen: async function () {
-        // 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, especially in dialogs.
-        document.body.append(dropdownMask)
-        document.body.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, {
-            middleware: [
-              // Flip to the opposite side if there’s not enough space
-              flip(),
-              // Make some space between the control and the dropdown to prevent overlap
-              offset(2),
-              // Ensure the dropdown fits within the viewport
-              size({
-                apply({ availableHeight, elements }) {
-                  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: function () {
-        this.control_input.classList.remove("has-value")
-        // Remove the dropdown from DOM when closed.
-        this.dropdown.remove()
-        dropdownMask.remove()
-        // Cleanup the position auto-update when the dropdown is closed.
-        removeAutoUpdater()
-      },
+      onDropdownOpen,
+      onDropdownClose,
       allowEmptyOption: true,
       openOnFocus: false,
       // Keep options in their original order instead of sorting by value.
@@ -176,14 +124,8 @@ class Select extends HTMLSelectElement {
       maxOptions: null,
       // Customize the "create" and "no results" dropdown messages with i18n.
       render: {
-        option_create(data, escape) {
-          return `<div class="create">
-            ${translate("Add")}<strong>${escape(data.input)}</strong>&hellip;
-          </div>`
-        },
-        no_results() {
-          return `<div class="no-results">${translate("No results found")}</div>`
-        }
+        ...dropdownMessages,
+        ...this.renderers
       }
     }
 
@@ -197,11 +139,7 @@ class Select extends HTMLSelectElement {
   }
 
   #destroyTomSelect() {
-    // Tom Select's destroy() removes the dropdown, but it never closes it, so
-    // the onDropdownClose handler does not run and the full window dropdown
-    // mask would be left behind, swallowing every click.
-    this.#tomSelect?.close(false)
-    this.#tomSelect?.destroy()
+    teardownTomSelect(this.#tomSelect)
     this.#tomSelect = null
   }
 }

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

@@ -3,6 +3,7 @@ import { growl } from "alchemy_admin/growler"
 import { patch } from "alchemy_admin/utils/ajax"
 import { translate } from "alchemy_admin/i18n"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
+import { routes } from "alchemy_admin/routes"
 
 /**
  * Custom element for the sitemap container
@@ -160,7 +161,7 @@ export class AlchemySitemap extends HTMLElement {
     // evt.item is the <alchemy-page-node> element being dragged
     const pageNode = evt.item
     const pageId = pageNode.pageId
-    const url = Alchemy.routes.move_admin_page_path(pageId)
+    const url = routes.move_admin_page_path(pageId)
     const data = {
       target_parent_id: evt.to.dataset.parentId,
       new_position: evt.newIndex

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

@@ -3,6 +3,7 @@ import { growl } from "alchemy_admin/growler"
 import { post } from "alchemy_admin/utils/ajax"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { dispatchPageDirtyEvent } from "alchemy_admin/utils/dispatch_page_dirty_event"
+import { routes } from "alchemy_admin/routes"
 
 const SORTABLE_OPTIONS = {
   draggable: ".element-editor",
@@ -36,7 +37,7 @@ function onSort(event) {
   // or sorted in the same list. Not on the old list in order to avoid incrementing
   // the position of the other elements.
   if (event.target === event.to) {
-    post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
+    post(routes.order_admin_elements_path, params).then((response) => {
       const data = response.data
       growl(data.message)
       if (data.pageHasUnpublishedChanges) {

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

@@ -1,69 +1,84 @@
-import { setupSelectLocale } from "alchemy_admin/i18n"
+import TomSelect from "tom-select"
+import "alchemy_admin/components/icon"
+import { get } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
+import {
+  createDropdownPositioning,
+  dropdownMessages,
+  focusTomSelect,
+  removeButton,
+  teardownTomSelect
+} from "alchemy_admin/utils/tom_select"
 
 export class TagsAutocomplete extends HTMLElement {
-  #select2 = null
-
-  async connectedCallback() {
-    await setupSelectLocale()
-    if (!this.isConnected) return
+  #tomSelect = null
 
+  connectedCallback() {
     this.classList.add("autocomplete_tag_list")
-    this.#select2 = $(this.input).select2(this.select2Config)
+    // Reuse the shared Tom Select styling by tagging the source input, whose
+    // class Tom Select copies onto the generated wrapper.
+    this.input.classList.add("alchemy_selectbox")
+    this.#tomSelect = new TomSelect(this.input, this.settings)
   }
 
   disconnectedCallback() {
-    this.#select2?.select2("destroy")
-    this.#select2 = null
+    teardownTomSelect(this.#tomSelect)
+    this.#tomSelect = null
+  }
+
+  focus() {
+    focusTomSelect(this.#tomSelect, () => super.focus())
   }
 
   get input() {
     return this.getElementsByTagName("input")[0]
   }
 
-  get select2Config() {
+  get settings() {
     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 }
-        }
+      plugins: {
+        remove_button: removeButton()
       },
-      initSelection: this.#initSelection
-    }
-  }
-
-  #createSearchChoice(term, data) {
-    if (
-      $(data).filter(function () {
-        return this.text.localeCompare(term) === 0
-      }).length === 0
-    ) {
-      return {
-        id: term,
-        text: term
+      // The autocomplete endpoint returns each tag as `{ id, text }`.
+      valueField: "id",
+      // Tags are entered and stored as a comma separated list.
+      delimiter: ",",
+      // Allow free tagging.
+      create: true,
+      // Hide the "Add …" create option while suggestions are still loading, so
+      // it doesn't flash and then disappear once a matching tag arrives from
+      // the server. When idle, keep Tom Select's default of not offering to
+      // create a tag that already exists.
+      createFilter(input) {
+        if (this.loading) return false
+        return this.settings.duplicates || !this.options[input]
+      },
+      // Do not keep a removed tag around as a lingering suggestion.
+      persist: false,
+      // Clear the typed text once a tag is added, so it doesn't linger in the
+      // input after selecting an existing tag.
+      clearAfterSelect: true,
+      // Show every matching tag returned by the server.
+      maxOptions: null,
+      openOnFocus: false,
+      // Apply the placeholder set on the wrapper element.
+      placeholder: this.getAttribute("placeholder"),
+      // Load matching tags from the server as the user types.
+      load: (query, callback) => {
+        get(this.getAttribute("url"), { term: query })
+          .then((response) => callback(response.data))
+          .catch((error) => {
+            growl(error.message || error, "error")
+            // Tom Select stays in loading state until the callback runs.
+            callback()
+          })
+      },
+      ...createDropdownPositioning(),
+      render: {
+        ...dropdownMessages
       }
     }
   }
-
-  #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/tinymce.js

@@ -1,5 +1,6 @@
 import "tinymce"
 import { currentLocale } from "alchemy_admin/i18n"
+import { readJSONScript } from "alchemy_admin/utils/json_script"
 
 const DARK_THEME = "alchemy-dark"
 const LIGHT_THEME = "alchemy"
@@ -172,7 +173,7 @@ export class Tinymce extends HTMLElement {
 
     const config = {
       content_css: this.preferredTheme,
-      ...Alchemy.TinymceDefaults,
+      ...readJSONScript("alchemy_tinymce_defaults"),
       ...customConfig,
       language: currentLocale(),
       selector: `#${this.editorId}`,

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

@@ -1,6 +1,7 @@
 import { formatFileSize } from "alchemy_admin/utils/format"
 import { translate } from "alchemy_admin/i18n"
 import { growl } from "alchemy_admin/growler"
+import { readJSONScript } from "alchemy_admin/utils/json_script"
 
 export class FileUpload extends HTMLElement {
   // public — used by callers (Uploader, Progress, tests)
@@ -78,10 +79,10 @@ export class FileUpload extends HTMLElement {
   }
 
   /**
-   * validate given file with the `Alchemy.uploader_defaults` - configuration
+   * validate given file with the uploader configuration
    */
   #validateFile() {
-    const config = Alchemy.uploader_defaults
+    const config = readJSONScript("alchemy_uploader_defaults")
     const maxFileSize = config.file_size_limit * Math.pow(1024, 2) // in Byte
     let errorMessage = undefined
 

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

@@ -6,6 +6,7 @@
 import { Progress } from "alchemy_admin/components/uploader/progress"
 import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
 import { translate } from "alchemy_admin/i18n"
+import { readJSONScript } from "alchemy_admin/utils/json_script"
 import { getToken } from "alchemy_admin/utils/ajax"
 
 export class Uploader extends HTMLElement {
@@ -110,13 +111,14 @@ export class Uploader extends HTMLElement {
   uploadFiles(files) {
     // prepare file progress bars and server request
     let fileUploadCount = 0
+    const config = readJSONScript("alchemy_uploader_defaults")
 
     const fileUploads = files.map((file) => {
       const request = new XMLHttpRequest()
       const fileUpload = new FileUpload()
       fileUpload.initialize(file, request)
 
-      if (Alchemy.uploader_defaults.upload_limit - 1 < fileUploadCount) {
+      if (config.upload_limit - 1 < fileUploadCount) {
         fileUpload.valid = false
         fileUpload.errorMessage = translate("Maximum number of files exceeded")
       } else if (fileUpload.valid) {
@@ -154,23 +156,37 @@ export class Uploader extends HTMLElement {
   #createProgress(fileUploads) {
     if (this.uploadProgress) {
       this.uploadProgress.cancel()
-      document.body.removeChild(this.uploadProgress)
+      this.uploadProgress.remove()
     }
     this.uploadProgress = new Progress()
     this.uploadProgress.initialize(fileUploads)
+    this.uploadProgress.setAttribute("layout", this.layout)
     this.uploadProgress.onComplete = (status) => {
       this.dispatchEvent(
         new CustomEvent(`Alchemy.upload.${status}`, { bubbles: true })
       )
     }
 
-    document.body.append(this.uploadProgress)
+    this.#progressContainer.append(this.uploadProgress)
+  }
+
+  // The dropzone doubles as the progress container so the upload indicators
+  // render inside the archive (and inside dialogs). Falls back to the body for
+  // uploaders without a dropzone (e.g. the attachment replace button).
+  get #progressContainer() {
+    return this.#dropzoneElement ?? document.body
   }
 
   get dropzone() {
     return this.getAttribute("dropzone")
   }
 
+  // Shape of the upload indicators. Defaults to "row" so uploads fit naturally
+  // into resource table views; set layout="card" for the thumbnail grid.
+  get layout() {
+    return this.getAttribute("layout") || "row"
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

data/app/javascript/alchemy_admin/confirm_dialog.js

@@ -1,4 +1,5 @@
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+import { currentDialog } from "alchemy_admin/dialog"
 import { translate } from "alchemy_admin/i18n"
 
 const getDefaults = () => ({
@@ -37,7 +38,12 @@ class ConfirmDialog {
         </button>
       </sl-dialog>
     `)
-    document.body.append(this.dialog)
+    // A native <dialog> opened with showModal() sits in the top layer and makes
+    // everything outside its subtree inert. Append the confirm into the open
+    // dialog (if any) so it stays visible and interactable above it, instead of
+    // rendering below and unclickable on the body.
+    const container = currentDialog()?.dialog_container ?? document.body
+    container.append(this.dialog)
   }
 
   #bindEvents() {