alchemy_cms 8.3.11 → 8.4.0

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

@@ -1,7 +1,4 @@
-import {
-  RemoteSelect,
-  escapeHtml
-} from "alchemy_admin/components/remote_select"
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
 
 export class PageSelect extends RemoteSelect {
   get pageId() {
@@ -11,7 +8,7 @@ export class PageSelect extends RemoteSelect {
   _searchQuery(term, page) {
     return {
       q: {
-        name_cont: term,
+        name_i_cont: term,
         ...JSON.parse(this.queryParams)
       },
       page: page
@@ -26,37 +23,22 @@ export class PageSelect extends RemoteSelect {
     }
   }
 
-  /**
-   * result which is visible if a page was selected
-   * @param {object} page
-   * @returns {string}
-   * @private
-   */
-  _renderResult(page) {
-    return escapeHtml(page.text || page.name)
+  _entry(page, term) {
+    return {
+      icon: "file-3",
+      primary: this._hightlightTerm(page.name, term),
+      aside: page.site?.name,
+      secondary: { text: page.url_path, truncate: "head" },
+      secondaryAside: { badge: page.language_code }
+    }
   }
 
-  /**
-   * html template for each list entry
-   * @param {object} page
-   * @param {string} term
-   * @returns {string}
-   * @private
-   */
-  _renderListEntry(page, term) {
-    return `
-      <div class="page-select--page">
-        <div class="page-select--top">
-          <alchemy-icon name="file-3"></alchemy-icon>
-          <span class="page-select--page-name">${this._hightlightTerm(page.name, term)}</span>
-          <span class="page-select--site-name">${escapeHtml(page.site.name)}</span>
-        </div>
-        <div class="page-select--bottom">
-          <span class="page-select--page-urlname">${escapeHtml(page.url_path)}</span>
-          <span class="page-select--language-code">${escapeHtml(page.language_code)}</span>
-        </div>
-      </div>
-    `
+  _selectedEntry(page) {
+    return {
+      icon: "file-3",
+      primary: page.text || page.name,
+      secondary: { text: page.url_path, truncate: "head" }
+    }
   }
 }
 

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

@@ -0,0 +1,92 @@
+import { openDialog } from "alchemy_admin/dialog"
+
+// Multiple picture select handler for the picture archive.
+export class PictureArchive extends HTMLElement {
+  #selectAllButton
+
+  connectedCallback() {
+    this.addEventListener("change", this.#onCheckboxChange)
+    this.addEventListener("click", this.#onEditMultipleClick)
+    // The select all button lives in the toolbar, outside of this element.
+    this.#selectAllButton = document.querySelector("#select_all_pictures")
+    this.#selectAllButton?.addEventListener("click", this.#onSelectAllClick)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("change", this.#onCheckboxChange)
+    this.removeEventListener("click", this.#onEditMultipleClick)
+    this.#selectAllButton?.removeEventListener("click", this.#onSelectAllClick)
+  }
+
+  #onSelectAllClick = (event) => {
+    event.preventDefault()
+
+    this.#selectAllButton.classList.toggle("active")
+
+    const state = this.#selectAllButton.classList.contains("active")
+
+    this.#toggleCheckboxes(state)
+
+    this.selectedItemTools.classList.toggle("hidden", !state)
+  }
+
+  // make the item toolbar visible and show the checkbox also if it is not hovered anymore
+  #onCheckboxChange = (event) => {
+    const checkbox = event.target.closest(".picture_tool.select input")
+
+    if (!checkbox) {
+      return
+    }
+
+    this.selectedItemTools.classList.toggle(
+      "hidden",
+      this.checkedInputs.length === 0
+    )
+    checkbox.parentElement.classList.toggle("visible", checkbox.checked)
+  }
+
+  // open the edit view in a dialog modal
+  #onEditMultipleClick = (event) => {
+    const link = event.target.closest("a#edit_multiple_pictures")
+
+    if (!link) {
+      return
+    }
+
+    event.preventDefault()
+
+    openDialog(this.#editMultiplePicturesUrl(link.href), {
+      title: link.title,
+      size: "500x242"
+    })
+  }
+
+  #toggleCheckboxes(state) {
+    this.querySelectorAll(
+      ".picture_tool.select input[type='checkbox']"
+    ).forEach((checkbox) => {
+      checkbox.checked = state
+      checkbox.closest(".picture_thumbnail").classList.toggle("active", state)
+    })
+  }
+
+  #editMultiplePicturesUrl(href) {
+    const url = new URL(href)
+
+    this.checkedInputs.forEach((entry) =>
+      url.searchParams.append(entry.name, entry.value)
+    )
+
+    return url.toString()
+  }
+
+  get checkedInputs() {
+    return this.querySelectorAll("input:checked")
+  }
+
+  get selectedItemTools() {
+    return this.querySelector(".selected_item_tools")
+  }
+}
+
+customElements.define("alchemy-picture-archive", PictureArchive)

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

@@ -2,6 +2,7 @@ import debounce from "alchemy_admin/utils/debounce"
 import max from "alchemy_admin/utils/max"
 import { get } from "alchemy_admin/utils/ajax"
 import { growl } from "alchemy_admin/growler"
+import { routes } from "alchemy_admin/routes"
 
 const UPDATE_DELAY = 125
 const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
@@ -56,7 +57,7 @@ export class PictureEditor extends HTMLElement {
     if (!this.pictureId) return
 
     this.pictureThumbnail.loading = true
-    get(Alchemy.routes.url_admin_picture_path(this.pictureId), {
+    get(routes.url_admin_picture_path(this.pictureId), {
       crop: this.imageCropperEnabled,
       crop_from: this.cropFrom,
       crop_size: this.cropSize,

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

@@ -18,7 +18,10 @@ class PreviewWindow extends HTMLIFrameElement {
     if (event.data.message === "Alchemy.previewReady") {
       this.#clearLoadTimeout()
       this.#stopSpinner()
-      this.#afterLoad?.call(this, event)
+      // Deliberately does not resolve #afterLoad: previewReady fires before the
+      // images are loaded, so the page is not yet tall enough to scroll and a
+      // scrollIntoView triggered now (e.g. focusing the saved element) is a
+      // no-op. The load event handler resolves it once the layout is final.
     }
   }
 
@@ -60,12 +63,12 @@ class PreviewWindow extends HTMLIFrameElement {
       this.src = this.url
     }
 
-    // Set 5s timeout as fallback - if iframe doesn't load, stop spinner anyway
+    // Set timeout as fallback - if iframe doesn't load, stop spinner anyway
     this.#clearLoadTimeout()
     this.#loadTimeout = setTimeout(() => {
       this.#stopSpinner()
       growl(translate("Preview failed to load"), "warning")
-    }, 5000)
+    }, this.loadTimeout)
 
     return new Promise((resolve) => {
       this.#afterLoad = resolve
@@ -126,6 +129,11 @@ class PreviewWindow extends HTMLIFrameElement {
     return this.getAttribute("url")
   }
 
+  get loadTimeout() {
+    const seconds = parseInt(this.getAttribute("load-timeout"), 10)
+    return (Number.isNaN(seconds) ? 5 : seconds) * 1000
+  }
+
   get sizeSelect() {
     return document.querySelector("select#preview_size")
   }