alchemy_cms 8.2.7 → 8.3.0

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

@@ -5,13 +5,6 @@ class PreviewWindow extends HTMLIFrameElement {
   #afterLoad
   #reloadIcon
   #loadTimeout
-  #previewReadyHandler
-
-  constructor() {
-    super()
-    this.addEventListener("load", this)
-    this.#previewReadyHandler = this.#handlePreviewReadyMessage.bind(this)
-  }
 
   handleEvent(evt) {
     if (evt.type === "load") {
@@ -21,7 +14,7 @@ class PreviewWindow extends HTMLIFrameElement {
     }
   }
 
-  #handlePreviewReadyMessage(event) {
+  #onPreviewReady = (event) => {
     if (event.data.message === "Alchemy.previewReady") {
       this.#clearLoadTimeout()
       this.#stopSpinner()
@@ -32,8 +25,9 @@ class PreviewWindow extends HTMLIFrameElement {
   connectedCallback() {
     let url = this.url
 
+    this.addEventListener("load", this)
     this.#attachEvents()
-    window.addEventListener("message", this.#previewReadyHandler)
+    window.addEventListener("message", this.#onPreviewReady)
 
     if (window.localStorage.getItem("alchemy-preview-url")) {
       url = window.localStorage.getItem("alchemy-preview-url")
@@ -44,8 +38,9 @@ class PreviewWindow extends HTMLIFrameElement {
   }
 
   disconnectedCallback() {
+    this.removeEventListener("load", this)
     key.unbind("alt+r")
-    window.removeEventListener("message", this.#previewReadyHandler)
+    window.removeEventListener("message", this.#onPreviewReady)
   }
 
   postMessage(data) {

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

@@ -1,14 +1,11 @@
 class PublishPageButton extends HTMLElement {
-  constructor() {
-    super()
-    this.addEventListener("submit", this)
-  }
-
   connectedCallback() {
+    this.addEventListener("submit", this)
     document.addEventListener("alchemy:page-dirty", this)
   }
 
   disconnectedCallback() {
+    this.removeEventListener("submit", this)
     document.removeEventListener("alchemy:page-dirty", this)
   }
 

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

@@ -1,40 +1,38 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { setupSelectLocale } from "alchemy_admin/i18n"
 
 export function hightlightTerm(name, term) {
   return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
 }
 
-export class RemoteSelect extends AlchemyHTMLElement {
-  static properties = {
-    allowClear: { default: false },
-    selection: { default: undefined },
-    placeholder: { default: "" },
-    queryParams: { default: "{}" },
-    url: { default: "" }
-  }
-
-  // Select2 manages its own DOM after initialization, so attribute changes
-  // must not trigger the default re-render which would destroy the widget.
-  static get observedAttributes() {
-    return []
-  }
+export class RemoteSelect extends HTMLElement {
+  #select2 = null
 
-  async connected() {
+  async connectedCallback() {
     await setupSelectLocale()
+    // Bail out if the element was disconnected while the locale was loading.
+    // Otherwise Select2 would leak onto a detached input.
+    if (!this.isConnected) return
 
     this.input.classList.add("alchemy_selectbox")
 
-    $(this.input)
+    this.#select2 = $(this.input)
       .select2(this.select2Config)
-      .on("select2-open", (evt) => {
-        this.onOpen(evt)
-      })
-      .on("change", (evt) => {
-        this.onChange(evt)
-      })
+      .on("select2-open", this.#onOpen)
+      .on("change", this.#onChange)
+  }
+
+  disconnectedCallback() {
+    if (this.#select2) {
+      this.#select2.off("select2-open", this.#onOpen)
+      this.#select2.off("change", this.#onChange)
+      this.#select2.select2("destroy")
+      this.#select2 = null
+    }
   }
 
+  #onOpen = (evt) => this.onOpen(evt)
+  #onChange = (evt) => this.onChange(evt)
+
   /**
    * Optional on change handler called by Select2.
    * @param {Event} event
@@ -65,6 +63,38 @@ export class RemoteSelect extends AlchemyHTMLElement {
     }, 100)
   }
 
+  /**
+   * Dispatches a custom event with given name, namespaced under `Alchemy.`.
+   * Subclasses may call this to emit their own events.
+   * @param {string} name The name of the custom event
+   * @param {object} detail Optional event details
+   */
+  dispatchCustomEvent(name, detail = {}) {
+    this.dispatchEvent(
+      new CustomEvent(`Alchemy.${name}`, { bubbles: true, detail })
+    )
+  }
+
+  get allowClear() {
+    return this.hasAttribute("allow-clear")
+  }
+
+  get selection() {
+    return this.getAttribute("selection")
+  }
+
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? ""
+  }
+
+  get queryParams() {
+    return this.getAttribute("query-params") ?? "{}"
+  }
+
+  get url() {
+    return this.getAttribute("url") ?? ""
+  }
+
   get input() {
     return this.getElementsByTagName("input")[0]
   }

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

@@ -1,37 +1,44 @@
+import TomSelect from "tom-select"
+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 {
-  #select2Element
+  #tomSelect = null
 
   connectedCallback() {
     this.classList.add("alchemy_selectbox")
+    this.#initTomSelect()
+  }
 
-    this.#select2Element = $(this).select2({
-      minimumResultsForSearch: 5,
-      dropdownAutoWidth: true,
-      allowClear: !!this.allowClear
-    })
-
-    // For single selects, remove the close button if allowClear is not set
-    // For multiple selects, always keep the close buttons
-    if (!this.allowClear && !this.multiple) {
-      this.#select2Element
-        .prev(".select2-container")
-        .find(".select2-search-choice-close")
-        .remove()
-    }
+  disconnectedCallback() {
+    this.#destroyTomSelect()
   }
 
   enable() {
     this.removeAttribute("disabled")
-    this.#updateSelect2()
+    this.#tomSelect?.enable()
   }
 
   disable() {
     this.setAttribute("disabled", "disabled")
-    this.#updateSelect2()
+    this.#tomSelect?.disable()
   }
 
   setOptions(data, prompt = undefined) {
-    let selectedValue = this.value
+    const selectedValue = this.value
+
+    // Tom Select needs to be rebuilt from the new native options, so tear it
+    // down, replace the options and initialize it again.
+    this.#destroyTomSelect()
 
     // reset the old options and insert the placeholder(s) first
     this.innerHTML = ""
@@ -44,19 +51,155 @@ class Select extends HTMLSelectElement {
       this.add(new Option(item.text, item.id, false, item.id === selectedValue))
     })
 
-    this.#updateSelect2()
-  }
-
-  /**
-   * inform Select2 to update
-   */
-  #updateSelect2() {
-    this.#select2Element.trigger("change")
+    this.#initTomSelect()
   }
 
   get allowClear() {
     return this.dataset.hasOwnProperty("allowClear") || this.multiple
   }
+
+  get placeholder() {
+    return this.getAttribute("placeholder")
+  }
+
+  #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 = () => {}
+
+    if (this.multiple) {
+      plugins.remove_button = {
+        title: translate("Remove")
+      }
+    }
+
+    if (this.allowClear) {
+      plugins.clear_button = {
+        html() {
+          return `<button type="button" class="clear-button" aria-label="${translate(
+            "Clear selection"
+          )}">
+            <alchemy-icon name="close" size="1x"></alchemy-icon>
+          </button>`
+        }
+      }
+    }
+
+    const settings = {
+      plugins,
+      closeAfterSelect: !this.multiple,
+      onInitialize: function () {
+        if (this.input.autofocus) {
+          this.focus()
+        }
+        // Tom Select auto-selects the first option when none is selected. With
+        // a placeholder we want it to start empty instead, but only clear when
+        // no option was explicitly marked selected, so a preselected value is
+        // preserved.
+        if (hasPlaceholder && !hasSelectedOption) {
+          this.clear()
+        }
+      },
+      onType(term) {
+        this.control_input.classList.toggle("has-value", term.length > 0)
+      },
+      // 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()
+      },
+      allowEmptyOption: true,
+      openOnFocus: false,
+      // Keep options in their original order instead of sorting by value.
+      sortField: "$order",
+      // Show every option, not just the first 50 (e.g. the timezone select).
+      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>`
+        }
+      }
+    }
+
+    this.#tomSelect = new TomSelect(this, settings)
+
+    // Mimick the native select's click-to-open behavior.
+    this.#tomSelect.control.addEventListener(
+      "click",
+      this.#tomSelect.open.bind(this.#tomSelect)
+    )
+  }
+
+  #destroyTomSelect() {
+    this.#tomSelect?.destroy()
+    this.#tomSelect = null
+  }
 }
 
 customElements.define("alchemy-select", Select, { extends: "select" })

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

@@ -2,7 +2,7 @@ import Sortable from "sortablejs"
 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/components/element_editor"
+import { dispatchPageDirtyEvent } from "alchemy_admin/utils/dispatch_page_dirty_event"
 
 const SORTABLE_OPTIONS = {
   draggable: ".element-editor",

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

@@ -1,15 +1,7 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
-
-class Spinner extends AlchemyHTMLElement {
-  static properties = {
-    size: { default: "medium" },
-    color: { default: "currentColor" }
-  }
-
-  render() {
+class Spinner extends HTMLElement {
+  connectedCallback() {
     this.className = `spinner spinner--${this.size}`
-
-    return `
+    this.innerHTML = `
       <svg width="100%" viewBox="0 0 28 28" style="--spinner-color: ${this.color}">
         <path
           class="hex1"
@@ -26,6 +18,14 @@ class Spinner extends AlchemyHTMLElement {
       </svg>
     `
   }
+
+  get size() {
+    return this.getAttribute("size") || "medium"
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor"
+  }
 }
 
 customElements.define("alchemy-spinner", Spinner)

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

@@ -1,11 +1,19 @@
 import { setupSelectLocale } from "alchemy_admin/i18n"
 
 class TagsAutocomplete extends HTMLElement {
+  #select2 = null
+
   async connectedCallback() {
     await setupSelectLocale()
+    if (!this.isConnected) return
 
     this.classList.add("autocomplete_tag_list")
-    $(this.input).select2(this.select2Config)
+    this.#select2 = $(this.input).select2(this.select2Config)
+  }
+
+  disconnectedCallback() {
+    this.#select2?.select2("destroy")
+    this.#select2 = null
   }
 
   get input() {

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

@@ -1,19 +1,30 @@
 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 {
+class Tinymce extends HTMLElement {
   #min_height = null
 
   /**
    * the observer will initialize Tinymce if the textarea becomes visible
    */
-  connected() {
+  connectedCallback() {
     this.className = "tinymce_container"
 
+    // Append the spinner if not already present (idempotent on reconnect/clone)
+    if (!this.querySelector(":scope > alchemy-spinner")) {
+      this.insertAdjacentHTML(
+        "beforeend",
+        `<alchemy-spinner size="small"></alchemy-spinner>`
+      )
+    }
+
+    // hide the textarea until TinyMCE is ready to show the editor
+    this.style.minHeight = `${this.minHeight}px`
+    this.editor.style.display = "none"
+
     const observerCallback = (entries, observer) => {
       entries.forEach((entry) => {
         if (entry.intersectionRatio > 0) {
@@ -43,10 +54,8 @@ class Tinymce extends AlchemyHTMLElement {
   /**
    * disconnect intersection observer and remove Tinymce editor if the web components get destroyed
    */
-  disconnected() {
-    if (this.tinymceIntersectionObserver !== null) {
-      this.tinymceIntersectionObserver.disconnect()
-    }
+  disconnectedCallback() {
+    this.tinymceIntersectionObserver?.disconnect()
 
     // Remove theme change listener
     this._removeThemeChangeListener()
@@ -54,21 +63,6 @@ class Tinymce extends AlchemyHTMLElement {
     tinymce.get(this.editorId)?.remove(this.editorId)
   }
 
-  render() {
-    return `
-      ${this.initialContent}
-      <alchemy-spinner size="small"></alchemy-spinner>
-    `
-  }
-
-  /**
-   * hide the textarea until TinyMCE is ready to show the editor
-   */
-  afterRender() {
-    this.style.minHeight = `${this.minHeight}px`
-    this.editor.style.display = "none"
-  }
-
   /**
    * initialize Richtext area after the Intersection observer triggered
    * @private