alchemy_cms 8.0.11 → 8.1.0

data/app/javascript/alchemy_admin/{picture_editors.js → components/picture_editor.js}

@@ -2,32 +2,28 @@ 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 ImageLoader from "alchemy_admin/image_loader"
 
 const UPDATE_DELAY = 125
 const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
 const THUMBNAIL_SIZE = "160x120"
 
-export class PictureEditor {
-  constructor(container) {
-    this.container = container
-    this.cropFromField = container.querySelector("[data-crop-from]")
-    this.cropSizeField = container.querySelector("[data-crop-size]")
-    this.pictureIdField = container.querySelector("[data-picture-id]")
-    this.targetSizeField = container.querySelector("[data-target-size]")
-    this.imageCropperField = container.querySelector("[data-image-cropper]")
-    this.image = container.querySelector("img")
-    this.thumbnailBackground = container.querySelector(".thumbnail_background")
-    this.deleteButton = container.querySelector(".picture_tool.delete")
-    this.cropLink = container.querySelector(".crop_link")
+export class PictureEditor extends HTMLElement {
+  constructor() {
+    super()
+
+    this.cropFromField = this.querySelector("[data-crop-from]")
+    this.cropSizeField = this.querySelector("[data-crop-size]")
+    this.pictureIdField = this.querySelector("[data-picture-id]")
+    this.targetSizeField = this.querySelector("[data-target-size]")
+    this.imageCropperField = this.querySelector("[data-image-cropper]")
+    this.image = this.querySelector("img")
+    this.pictureThumbnail = this.querySelector("alchemy-picture-thumbnail")
+    this.deleteButton = this.querySelector(".picture_tool.delete")
+    this.cropLink = this.querySelector(".crop_link")
 
     this.targetSize = this.targetSizeField.dataset.targetSize
     this.pictureId = this.pictureIdField.value
 
-    if (this.image) {
-      this.imageLoader = new ImageLoader(this.image)
-    }
-
     // The mutation observer is observing multiple fields that all get updated
     // simultaneously. We only want to update the image once, so we debounce.
     this.update = debounce(() => {
@@ -35,15 +31,19 @@ export class PictureEditor {
       this.updateCropLink()
     }, UPDATE_DELAY)
 
-    this.deleteButton.addEventListener("click", this.removeImage.bind(this))
+    this.deleteButton?.addEventListener("click", this.removeImage.bind(this))
   }
 
-  observe() {
-    const observer = new MutationObserver(this.mutationCallback.bind(this))
+  connectedCallback() {
+    this.observer = new MutationObserver(this.mutationCallback.bind(this))
+
+    this.observer.observe(this.cropFromField, { attributes: true })
+    this.observer.observe(this.cropSizeField, { attributes: true })
+    this.observer.observe(this.pictureIdField, { attributes: true })
+  }
 
-    observer.observe(this.cropFromField, { attributes: true })
-    observer.observe(this.cropSizeField, { attributes: true })
-    observer.observe(this.pictureIdField, { attributes: true })
+  disconnectedCallback() {
+    this.observer.disconnect()
   }
 
   mutationCallback(mutationsList) {
@@ -60,10 +60,7 @@ export class PictureEditor {
   updateImage() {
     if (!this.pictureId) return
 
-    this.ensureImage()
-    this.image.removeAttribute("alt")
-    this.image.removeAttribute("src")
-    this.imageLoader.load(true)
+    this.pictureThumbnail.loading = true
     get(Alchemy.routes.url_admin_picture_path(this.pictureId), {
       crop: this.imageCropperEnabled,
       crop_from: this.cropFrom,
@@ -72,9 +69,9 @@ export class PictureEditor {
       size: THUMBNAIL_SIZE
     })
       .then(({ data }) => {
-        this.image.src = data.url
-        this.image.alt = data.alt
-        this.image.title = data.title
+        this.pictureThumbnail.src = data.url
+        this.pictureThumbnail.image.alt = data.alt
+        this.pictureThumbnail.image.title = data.title
         this.setElementDirty()
       })
       .catch((error) => {
@@ -83,15 +80,8 @@ export class PictureEditor {
       })
   }
 
-  ensureImage() {
-    const img = new Image()
-    this.thumbnailBackground.replaceChildren(img)
-    this.image = img
-    this.imageLoader = new ImageLoader(img)
-  }
-
   removeImage() {
-    this.thumbnailBackground.innerHTML = IMAGE_PLACEHOLDER
+    this.pictureThumbnail.innerHTML = IMAGE_PLACEHOLDER
     this.pictureIdField.value = ""
     this.image = null
     this.cropLink.classList.add("disabled")
@@ -99,7 +89,7 @@ export class PictureEditor {
   }
 
   setElementDirty() {
-    this.container.closest(".element-editor").setDirty(this.container)
+    this.closest(".element-editor").setDirty(this)
   }
 
   updateCropLink() {
@@ -167,9 +157,4 @@ export class PictureEditor {
   }
 }
 
-export default function init(selector) {
-  document.querySelectorAll(selector).forEach((node) => {
-    const thumbnail = new PictureEditor(node)
-    thumbnail.observe()
-  })
-}
+customElements.define("alchemy-picture-editor", PictureEditor)

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

@@ -0,0 +1,107 @@
+// Shows spinner while loading images and
+// fades the image after its been loaded
+
+import Spinner from "alchemy_admin/spinner"
+
+export default class PictureThumbnail extends HTMLElement {
+  constructor() {
+    super()
+
+    this.classList.add("thumbnail_background")
+    this.spinner = new Spinner("small")
+
+    if (this.src) {
+      this.start()
+    }
+  }
+
+  handleEvent(evt) {
+    switch (evt.type) {
+      case "load":
+        this.#onLoaded()
+        break
+      case "error":
+        this.#onError(evt)
+        break
+      default:
+        break
+    }
+  }
+
+  connectedCallback() {
+    if (this.image) {
+      this.replaceChildren(this.image)
+    }
+  }
+
+  disconnectedCallback() {
+    this.image?.removeEventListener("load", this)
+    this.image?.removeEventListener("error", this)
+    this.stop()
+  }
+
+  createImage(src = this.src, alt = this.name) {
+    this.image = new Image()
+    this.image.src = src
+    if (alt) {
+      this.image.alt = alt
+    }
+    this.image.loading = "lazy"
+  }
+
+  start(src) {
+    this.createImage(src)
+    this.image.addEventListener("load", this)
+    this.image.addEventListener("error", this)
+    this.load()
+  }
+
+  load() {
+    if (this.image?.complete) {
+      return
+    }
+    this.setAttribute("loading", "loading")
+    this.innerHTML = ""
+    this.spinner.spin(this)
+  }
+
+  stop() {
+    this.classList.remove("loading")
+    this.spinner.stop()
+  }
+
+  #onLoaded() {
+    this.spinner.stop()
+    this.removeAttribute("loading")
+  }
+
+  #onError(evt) {
+    const message = `Could not load ${this.image.src}`
+    this.spinner.stop()
+    this.innerHTML = `
+      <sl-tooltip content="${message}">
+        <alchemy-icon name="alert" class="error"></alchemy-icon>
+      </sl-tooltip>
+    `
+    console.error(message, evt)
+  }
+
+  set loading(value) {
+    value ? this.load() : this.stop()
+  }
+
+  set src(src) {
+    this.start(src)
+    this.replaceChildren(this.image)
+  }
+
+  get name() {
+    return this.getAttribute("name")
+  }
+
+  get src() {
+    return this.getAttribute("src")
+  }
+}
+
+customElements.define("alchemy-picture-thumbnail", PictureThumbnail)

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

@@ -0,0 +1,41 @@
+class PublishPageButton extends HTMLElement {
+  constructor() {
+    super()
+    this.addEventListener("submit", this)
+  }
+
+  connectedCallback() {
+    document.addEventListener("alchemy:page-dirty", this)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("alchemy:page-dirty", this)
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "alchemy:page-dirty":
+        this.markDirty(event.detail)
+        break
+      case "submit":
+        this.button.loading = true
+        break
+    }
+  }
+
+  markDirty(detail) {
+    this.button.variant = "primary"
+    this.button.disabled = false
+    this.tooltip.content = detail.tooltip
+  }
+
+  get button() {
+    return this.querySelector("sl-button")
+  }
+
+  get tooltip() {
+    return this.querySelector("sl-tooltip")
+  }
+}
+
+customElements.define("alchemy-publish-page-button", PublishPageButton)

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

@@ -10,7 +10,9 @@ class Select extends HTMLSelectElement {
       allowClear: !!this.allowClear
     })
 
-    if (!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")

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

@@ -0,0 +1,210 @@
+import Sortable from "sortablejs"
+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"
+
+/**
+ * Custom element for the sitemap container
+ * Handles search/filter functionality and drag-and-drop sorting
+ */
+export class AlchemySitemap extends HTMLElement {
+  connectedCallback() {
+    this.searchInput = document.querySelector(".search_input_field")
+    this.clearButton = document.querySelector("#search_field_clear")
+    this.resultCounter = document.querySelector("#page_filter_result")
+
+    this.setupSearch()
+
+    // Wait for child custom elements to be defined before setting up sortables
+    requestAnimationFrame(() => {
+      this.setupSortables()
+    })
+
+    // Set up MutationObserver to re-initialize sortables when children containers are added
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType !== Node.ELEMENT_NODE) return
+
+          // If the added node itself is a children container, initialize it
+          if (node.classList?.contains("children")) {
+            this.setupSortable(node)
+          }
+
+          // Also check for children containers nested within the added node
+          // This handles cases where a parent element with nested children is added at once
+          node
+            .querySelectorAll(".children")
+            .forEach((el) => this.setupSortable(el))
+        })
+      })
+    })
+
+    // Observe the sitemap for added nodes
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true
+    })
+  }
+
+  disconnectedCallback() {
+    this.teardownSearch()
+    this.observer?.disconnect()
+  }
+
+  setupSearch() {
+    this.searchInput?.addEventListener("input", this)
+    this.clearButton?.addEventListener("click", this)
+  }
+
+  teardownSearch() {
+    this.searchInput?.removeEventListener("input", this)
+    this.clearButton?.removeEventListener("click", this)
+  }
+
+  handleEvent(event) {
+    if (event.type === "input" && event.target === this.searchInput) {
+      this.handleSearch(event)
+    } else if (event.type === "click" && event.target === this.clearButton) {
+      this.handleClearSearch(event)
+    }
+  }
+
+  handleSearch(event) {
+    const term = event.target.value.toLowerCase().trim()
+
+    if (term === "") {
+      this.clearFilter()
+      return
+    }
+
+    this.filterPages(term)
+  }
+
+  filterPages(term) {
+    const allPages = this.querySelectorAll(".sitemap_page")
+    let matchCount = 0
+    let firstMatch = null
+
+    allPages.forEach((pageElement) => {
+      const pageName = pageElement.getAttribute("name") || ""
+
+      if (pageName.toLowerCase().includes(term)) {
+        pageElement.classList.add("highlight")
+        pageElement.classList.remove("no-match")
+        matchCount++
+        if (!firstMatch) firstMatch = pageElement
+      } else {
+        pageElement.classList.remove("highlight")
+        pageElement.classList.add("no-match")
+      }
+    })
+
+    // Update result counter
+
+    if (matchCount === 1) {
+      this.resultCounter.textContent = `1 ${translate("page_found")}`
+      this.resultCounter.style.display = "block"
+    } else if (matchCount > 1) {
+      this.resultCounter.textContent = `${matchCount} ${translate("pages_found")}`
+      this.resultCounter.style.display = "block"
+    } else {
+      this.resultCounter.style.display = "none"
+    }
+
+    // Scroll first match into view
+    if (firstMatch) {
+      firstMatch.scrollIntoView({ behavior: "smooth", block: "center" })
+    }
+  }
+
+  clearFilter() {
+    const allPages = this.querySelectorAll(".sitemap_page")
+    allPages.forEach((pageElement) => {
+      pageElement.classList.remove("highlight", "no-match")
+    })
+
+    this.resultCounter.style.display = "none"
+  }
+
+  handleClearSearch(event) {
+    event.preventDefault()
+    this.searchInput.value = ""
+    this.clearFilter()
+  }
+
+  setupSortable(container) {
+    new Sortable(container, {
+      group: "pages",
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      handle: ".page-icon.handle",
+      draggable: "alchemy-page-node",
+      onEnd: (evt) => this.handleSort(evt)
+    })
+  }
+
+  setupSortables() {
+    const sortables = this.querySelectorAll(".children")
+    sortables.forEach((el) => this.setupSortable(el))
+  }
+
+  async handleSort(evt) {
+    // Only proceed if actually moved to different position/container
+    if (evt.from === evt.to && evt.oldIndex === evt.newIndex) {
+      return
+    }
+
+    // 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 data = {
+      target_parent_id: evt.to.dataset.parentId,
+      new_position: evt.newIndex
+    }
+
+    pleaseWaitOverlay(true)
+
+    try {
+      const response = await patch(url, data)
+      const pageData = await response.data
+
+      // Update the URL path of the moved page
+      const pageEl = pageNode.querySelector(`#page_${pageId}`)
+      if (pageEl) {
+        const urlPathEl = pageEl.querySelector(".sitemap_url")
+        if (urlPathEl && pageData.url_path) {
+          urlPathEl.textContent = pageData.url_path
+        }
+      }
+
+      // Update folder icons for affected parent pages
+      this.updateFolderIcons(evt.from, evt.to)
+
+      growl(translate("Successfully moved page"))
+    } catch (error) {
+      growl(error.message || error, "error")
+      // Revert the DOM change by reloading on error
+      window.location.reload()
+    } finally {
+      pleaseWaitOverlay(false)
+    }
+  }
+
+  updateFolderIcons(fromContainer, toContainer) {
+    // Update folder icon for source parent (might now have no children)
+    const fromParent = fromContainer.closest("alchemy-page-node")
+    fromParent?.updateFolderButton()
+
+    // Update folder icon for destination parent (now definitely has children)
+    if (fromContainer !== toContainer) {
+      const toParent = toContainer.closest("alchemy-page-node")
+      toParent?.updateFolderButton()
+    }
+  }
+}
+
+customElements.define("alchemy-sitemap", AlchemySitemap)

data/app/javascript/alchemy_admin/{sortable_elements.js → components/sortable_elements.js}

@@ -2,10 +2,11 @@ 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"
 
 const SORTABLE_OPTIONS = {
   draggable: ".element-editor",
-  handle: ".element-handle",
+  handle: ".element-handle.draggable",
   ghostClass: "dragged",
   animation: 150,
   swapThreshold: 0.65,
@@ -38,6 +39,9 @@ function onSort(event) {
     post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
       const data = response.data
       growl(data.message)
+      if (data.pageHasUnpublishedChanges) {
+        dispatchPageDirtyEvent(data)
+      }
       reloadPreview()
       item.updateTitle(data.preview_text)
     })
@@ -51,31 +55,24 @@ function onEnd() {
   )
 }
 
-function createSortable(element, options = {}) {
-  const group = {
-    name: element.dataset.elementName,
-    put(to, _from, item) {
-      return to.el.dataset.droppableElements
-        .split(" ")
-        .includes(item.dataset.elementName)
+class SortableElements extends HTMLElement {
+  connectedCallback() {
+    const group = {
+      name: this.dataset.elementName,
+      put(to, _from, item) {
+        return to.el.dataset.droppableElements
+          .split(" ")
+          .includes(item.dataset.elementName)
+      }
     }
+    new Sortable(this, {
+      ...SORTABLE_OPTIONS,
+      onStart,
+      onSort,
+      onEnd,
+      group
+    })
   }
-  new Sortable(element, {
-    ...SORTABLE_OPTIONS,
-    ...options,
-    onStart,
-    onSort,
-    onEnd,
-    group
-  })
 }
 
-export default function SortableElements(selector) {
-  if (selector == null) selector = ".sortable-elements"
-
-  const sortable_areas = document.querySelectorAll(selector, {
-    direction: "vertical"
-  })
-
-  sortable_areas.forEach((element) => createSortable(element))
-}
+customElements.define("alchemy-sortable-elements", SortableElements)

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

@@ -162,11 +162,16 @@ class Tinymce extends AlchemyHTMLElement {
         const config = this.getAttribute(attributeName)
         const key = attributeName.replaceAll("-", "_")
 
-        try {
-          customConfig[key] = JSON.parse(config)
-        } catch (e) {
-          // also string values as parameter
-          customConfig[key] = config
+        // Handle boolean HTML attributes (e.g., readonly="readonly" or readonly="")
+        if (config === attributeName || config === "") {
+          customConfig[key] = true
+        } else {
+          try {
+            customConfig[key] = JSON.parse(config)
+          } catch (e) {
+            // also string values as parameter
+            customConfig[key] = config
+          }
         }
       }
     })

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

@@ -21,6 +21,32 @@ export class Uploader extends AlchemyHTMLElement {
     if (this.dropzone) {
       this._dragAndDropBehavior()
     }
+    this.addEventListener("Alchemy.upload.successful", this)
+  }
+
+  handleEvent(evt) {
+    switch (evt.type) {
+      case "Alchemy.upload.successful":
+        this._handleUploadComplete()
+        break
+    }
+  }
+
+  _handleUploadComplete() {
+    setTimeout(() => {
+      const url = this.redirectUrl
+      const turboFrame = this.closest("turbo-frame")
+      this.uploadProgress.visible = false
+
+      if (!url) return
+
+      if (turboFrame) {
+        turboFrame.setAttribute("src", url)
+        turboFrame.reload()
+      } else {
+        Turbo.visit(url)
+      }
+    }, 750)
   }
 
   /**
@@ -126,6 +152,10 @@ export class Uploader extends AlchemyHTMLElement {
   get fileInput() {
     return this.querySelector("input[type='file']")
   }
+
+  get redirectUrl() {
+    return this.getAttribute("redirect-url")
+  }
 }
 
 customElements.define("alchemy-uploader", Uploader)

data/app/javascript/alchemy_admin/image_overlay.js

@@ -1,4 +1,3 @@
-import ImageLoader from "alchemy_admin/image_loader"
 import { Dialog } from "alchemy_admin/dialog"
 
 export default class ImageOverlay extends Dialog {
@@ -7,7 +6,6 @@ export default class ImageOverlay extends Dialog {
   }
 
   init() {
-    ImageLoader.init(this.dialog_body[0])
     $(".zoomed-picture-background").on("click", (e) => {
       e.stopPropagation()
       if (e.target.nodeName === "IMG") {

data/app/javascript/alchemy_admin/initializer.js

@@ -45,9 +45,6 @@ export default function Initializer() {
     $(this.form).submit()
   })
 
-  // Attaches the image loader on all images
-  Alchemy.ImageLoader("#main_content")
-
   // Override the filter of keymaster.js so we can blur the fields on esc key.
   key.filter = function (event) {
     let tagName = (event.target || event.srcElement).tagName

data/app/javascript/alchemy_admin/link_dialog.js

@@ -1,11 +1,6 @@
 import { translate } from "alchemy_admin/i18n"
 import { Dialog } from "alchemy_admin/dialog"
 
-// Matches a URL fragment (#anchor) at the end of a string.
-// Covers RFC 3986 unreserved characters (ALPHA, DIGIT, "-", ".", "_", "~")
-// which are the characters valid in URL fragments and common in DOM element IDs.
-const ANCHOR_REGEX = /#[\w.~-]+$/
-
 // 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)
 //
@@ -108,7 +103,7 @@ export class LinkDialog extends Dialog {
 
     if (linkType === "internal" && elementAnchor.value !== "") {
       // remove possible fragments on the url and attach the fragment (which contains the #)
-      url = url.replace(ANCHOR_REGEX, "") + elementAnchor.value
+      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()