alchemy_cms 8.0.11 → 8.1.0

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

@@ -0,0 +1,73 @@
+const formatItem = (object) => {
+  const optionEl = object.element[0]
+  const swatch = optionEl.dataset.swatch || optionEl.value
+  const customColor = optionEl.value === "custom_color"
+  const colorIndicator = customColor
+    ? `<alchemy-icon name="palette"></alchemy-icon>`
+    : `<span class="color-indicator" style="--color: ${swatch}"></span>`
+
+  return `
+    <div class="select-color-option">
+      ${colorIndicator}
+      <span>${object.text}</span>
+    </div>`
+}
+
+class ColorSelect extends HTMLElement {
+  connectedCallback() {
+    if (this.select) {
+      this.#initializeSelect2()
+      $(this.select).on("change", (event) =>
+        this.#toggleColorPicker(event.val === "custom_color")
+      )
+    } else {
+      this.colorInput?.addEventListener("input", this)
+      this.textInput?.addEventListener("input", this)
+      this.#toggleColorPicker(true)
+    }
+  }
+
+  handleEvent(event) {
+    switch (event.target) {
+      case this.colorInput:
+        this.textInput.value = this.colorInput.value
+        break
+      case this.textInput:
+        this.colorInput.value = this.textInput.value
+        break
+    }
+  }
+
+  disconnectedCallback() {
+    this.colorInput?.removeEventListener("input", this)
+    this.textInput?.removeEventListener("input", this)
+  }
+
+  #initializeSelect2() {
+    this.select.classList.add("alchemy_selectbox")
+    const options = {
+      minimumResultsForSearch: 10,
+      formatResult: formatItem,
+      formatSelection: formatItem
+    }
+    $(this.select).select2(options)
+  }
+
+  #toggleColorPicker(enabled = true) {
+    this.colorInput.disabled = !enabled
+  }
+
+  get colorInput() {
+    return this.querySelector("input[type='color']")
+  }
+
+  get textInput() {
+    return this.querySelector("input[type='text']")
+  }
+
+  get select() {
+    return this.querySelector("select")
+  }
+}
+
+customElements.define("alchemy-color-select", ColorSelect)

data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js

@@ -3,11 +3,12 @@ import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
+import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
 
 export class DeleteElementButton extends HTMLElement {
   constructor() {
     super()
-    this.addEventListener("click", this)
+    this.button?.addEventListener("click", this)
   }
 
   async handleEvent() {
@@ -18,7 +19,7 @@ export class DeleteElementButton extends HTMLElement {
     }
   }
 
-  #removeElement(response) {
+  #removeElement(data) {
     const elementEditor = this.closest("alchemy-element-editor")
     elementEditor.addEventListener("transitionend", () => {
       if (elementEditor.fixed) {
@@ -27,7 +28,10 @@ export class DeleteElementButton extends HTMLElement {
       elementEditor.remove()
     })
     elementEditor.classList.add("dismiss")
-    growl(response.message)
+    growl(data.message)
+    if (data.pageHasUnpublishedChanges) {
+      dispatchPageDirtyEvent(data)
+    }
     reloadPreview()
   }
 
@@ -38,6 +42,10 @@ export class DeleteElementButton extends HTMLElement {
   get message() {
     return this.getAttribute("message")
   }
+
+  get button() {
+    return this.querySelector("button")
+  }
 }
 
 customElements.define("alchemy-delete-element-button", DeleteElementButton)

data/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js

@@ -1,6 +1,7 @@
 import { patch } from "alchemy_admin/utils/ajax"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 import { growl } from "alchemy_admin/growler"
+import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
 
 export class PublishElementButton extends HTMLElement {
   constructor() {
@@ -14,9 +15,13 @@ export class PublishElementButton extends HTMLElement {
     if (elementEditor === this.elementEditor) {
       patch(Alchemy.routes.publish_admin_element_path(this.elementId))
         .then((response) => {
-          this.elementEditor.published = response.data.public
-          this.tooltip.setAttribute("content", response.data.label)
+          const data = response.data
+          this.elementEditor.published = data.public
+          this.tooltip.setAttribute("content", data.label)
           reloadPreview()
+          if (data.pageHasUnpublishedChanges) {
+            dispatchPageDirtyEvent(data)
+          }
         })
         .catch((error) => growl(error.message, "error"))
     }

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

@@ -1,7 +1,3 @@
-import ImageLoader from "alchemy_admin/image_loader"
-import fileEditors from "alchemy_admin/file_editors"
-import pictureEditors from "alchemy_admin/picture_editors"
-import SortableElements from "alchemy_admin/sortable_elements"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
@@ -10,6 +6,14 @@ import { growl } from "alchemy_admin/growler"
 import "alchemy_admin/components/element_editor/publish_element_button"
 import "alchemy_admin/components/element_editor/delete_element_button"
 
+export function dispatchPageDirtyEvent(data) {
+  document.dispatchEvent(
+    new CustomEvent("alchemy:page-dirty", {
+      detail: { tooltip: data.publishButtonTooltip }
+    })
+  )
+}
+
 export class ElementEditor extends HTMLElement {
   constructor() {
     super()
@@ -50,14 +54,6 @@ export class ElementEditor extends HTMLElement {
       })
       this.removeAttribute("created")
     }
-
-    // Init GUI elements
-    ImageLoader.init(this)
-    fileEditors(
-      `#${this.id} .ingredient-editor.file, #${this.id} .ingredient-editor.audio, #${this.id} .ingredient-editor.video`
-    )
-    pictureEditors(`#${this.id} .ingredient-editor.picture`)
-    SortableElements(`#${this.id} .nested-elements`)
   }
 
   handleEvent(event) {
@@ -163,6 +159,9 @@ export class ElementEditor extends HTMLElement {
       data.ingredientAnchors.forEach((anchor) => {
         IngredientAnchorLink.updateIcon(anchor.ingredientId, anchor.active)
       })
+      if (data.pageHasUnpublishedChanges) {
+        dispatchPageDirtyEvent(data)
+      }
     }
   }
 

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

@@ -1,43 +1,65 @@
 import { hightlightTerm } from "alchemy_admin/components/remote_select"
 
-const formatItem = (icon, text) => {
-  return `<div class="element-select-item">${icon} ${text}</div>`
+const formatSelection = (option) => {
+  return `
+    <div class="element-select-name">${option.icon} ${option.name}</div>
+  `
 }
 
-class ElementSelect extends HTMLInputElement {
+const formatItem = (icon, name, hint) => {
+  const description = hint
+    ? `<div class="element-select-description">${hint}</div>`
+    : ""
+  return `
+    <div class="element-select-item">
+      ${formatSelection({ icon, name })}
+      ${description}
+    </div>
+  `
+}
+
+class ElementSelect extends HTMLElement {
   constructor() {
     super()
-    this.classList.add("alchemy_selectbox")
   }
 
   connectedCallback() {
-    const el = this
+    const results = this.options
     const options = {
       minimumResultsForSearch: 3,
       dropdownAutoWidth: true,
       data() {
-        return { results: JSON.parse(el.dataset.options) }
+        return { results }
       },
       formatResult: (option, _el, search) => {
         let text
 
-        if (option.id === "") return option.text
+        if (option.id === "") return option.name
         if (search.term !== "") {
-          text = hightlightTerm(option.text, search.term)
+          text = hightlightTerm(option.name, search.term)
         } else {
-          text = option.text
+          text = option.name
         }
 
-        return formatItem(option.icon, text)
+        return formatItem(option.icon, text, option.hint)
       },
-      formatSelection: (option) => {
-        return formatItem(option.icon, option.text)
-      }
+      formatSelection,
+      placeholder: this.placeholder
     }
-    $(this).select2(options)
+    $(this.inputField).select2(options)
+  }
+
+  get options() {
+    return JSON.parse(this.getAttribute("options"))
+  }
+
+  get placeholder() {
+    return this.getAttribute("placeholder")
+  }
+
+  get inputField() {
+    return this.querySelector("input")
   }
 }
 
-customElements.define("alchemy-element-select", ElementSelect, {
-  extends: "input"
-})
+customElements.define("alchemy-element-select", ElementSelect)

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

@@ -1,4 +1,3 @@
-import SortableElements from "alchemy_admin/sortable_elements"
 import { ElementEditor } from "alchemy_admin/components/element_editor"
 
 class ElementsWindow extends HTMLElement {
@@ -18,7 +17,6 @@ class ElementsWindow extends HTMLElement {
     if (window.location.hash) {
       this.focusElementEditor(window.location.hash)
     }
-    SortableElements()
     this.resize()
   }
 

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

@@ -0,0 +1,26 @@
+class FileEditor extends HTMLElement {
+  constructor() {
+    super()
+    this.deleteLink = this.querySelector(".remove_file_link")
+    this.fileIcon = this.querySelector(".file_icon")
+    this.fileName = this.querySelector(".file_name")
+    this.formFieldId = this.deleteLink?.dataset.formFieldId
+    this.formField = this.querySelector(`#${this.formFieldId}`)
+    this.deleteLink?.addEventListener("click", this)
+  }
+
+  handleEvent(event) {
+    if (event.type === "click") this.removeFile()
+    event.stopPropagation()
+  }
+
+  removeFile() {
+    this.formField.value = ""
+    this.fileIcon.innerHTML = ""
+    this.fileName.innerHTML = ""
+    this.deleteLink?.classList.add("hidden")
+    this.closest("alchemy-element-editor").setDirty(this.formField)
+  }
+}
+
+customElements.define("alchemy-file-editor", FileEditor)

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

@@ -7,6 +7,7 @@ import "alchemy_admin/components/auto_submit"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
 import "alchemy_admin/components/clipboard_button"
+import "alchemy_admin/components/color_select"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/dom_id_select"
@@ -14,6 +15,7 @@ import "alchemy_admin/components/element_editor"
 import "alchemy_admin/components/element_select"
 import "alchemy_admin/components/elements_window"
 import "alchemy_admin/components/elements_window_handle"
+import "alchemy_admin/components/file_editor"
 import "alchemy_admin/components/list_filter"
 import "alchemy_admin/components/message"
 import "alchemy_admin/components/growl"
@@ -23,10 +25,17 @@ import "alchemy_admin/components/link_buttons"
 import "alchemy_admin/components/node_select"
 import "alchemy_admin/components/uploader"
 import "alchemy_admin/components/overlay"
+import "alchemy_admin/components/page_node"
+import "alchemy_admin/components/page_publication_fields"
 import "alchemy_admin/components/page_select"
 import "alchemy_admin/components/picture_description_select"
+import "alchemy_admin/components/picture_editor"
+import "alchemy_admin/components/picture_thumbnail"
 import "alchemy_admin/components/preview_window"
+import "alchemy_admin/components/publish_page_button"
 import "alchemy_admin/components/select"
+import "alchemy_admin/components/sitemap"
+import "alchemy_admin/components/sortable_elements"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tags_autocomplete"
 import "alchemy_admin/components/tinymce"

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

@@ -1,14 +1,27 @@
+const DEFAULT_DEBOUNCE_TIME = 150
+
 class ListFilter extends HTMLElement {
+  #debounceTimer
+
   constructor() {
     super()
     this.#attachEvents()
   }
 
   #attachEvents() {
+    if (this.hotkey) {
+      key(this.hotkey, () => {
+        this.filterField.focus()
+        return false
+      })
+    }
     this.filterField.addEventListener("keyup", () => {
-      const term = this.filterField.value
-      this.clearButton.style.visibility = "visible"
-      this.filter(term)
+      clearTimeout(this.#debounceTimer)
+      this.#debounceTimer = setTimeout(() => {
+        const term = this.filterField.value
+        this.clearButton.style.visibility = term ? "visible" : "hidden"
+        this.filter(term)
+      }, this.debounceTime)
     })
     this.clearButton.addEventListener("click", (e) => {
       e.preventDefault()
@@ -23,25 +36,53 @@ class ListFilter extends HTMLElement {
     })
   }
 
+  disconnectedCallback() {
+    if (this.hotkey) {
+      key.unbind(this.hotkey)
+    }
+    key.unbind("esc", "list_filter")
+  }
+
   filter(term) {
     if (term === "") {
       this.clearButton.style.visibility = "hidden"
     }
 
+    const matchedItems = []
+    const itemsToShow = new Set()
+    const lowerTerm = term.toLowerCase()
+
+    // First pass: find matching items and mark their ancestors as visible too
     this.items.forEach((item) => {
       const name = item.getAttribute(this.nameAttribute)?.toLowerCase()
       // indexOf is much faster then match()
-      if (name.indexOf(term.toLowerCase()) !== -1) {
-        item.classList.remove("hidden")
-      } else {
-        item.classList.add("hidden")
+      if (name.indexOf(lowerTerm) !== -1) {
+        matchedItems.push(item)
+        itemsToShow.add(item)
+        // Mark ancestor items as visible so nested matches stay visible
+        let ancestor = item.parentElement?.closest(this.itemsSelector)
+        while (ancestor) {
+          itemsToShow.add(ancestor)
+          ancestor = ancestor.parentElement?.closest(this.itemsSelector)
+        }
       }
     })
+
+    // Second pass: apply visibility
+    this.items.forEach((item) => {
+      item.classList.toggle("hidden", !itemsToShow.has(item))
+    })
+
+    // Scroll into view if only one match
+    if (matchedItems.length === 1) {
+      matchedItems[0].scrollIntoView({ behavior: "smooth", block: "nearest" })
+    }
   }
 
   clear() {
     this.filterField.value = ""
-    this.filter("")
+    this.clearButton.style.visibility = "hidden"
+    this.items.forEach((item) => item.classList.remove("hidden"))
   }
 
   get nameAttribute() {
@@ -63,6 +104,14 @@ class ListFilter extends HTMLElement {
   get itemsSelector() {
     return this.getAttribute("items-selector")
   }
+
+  get debounceTime() {
+    return parseInt(this.getAttribute("debounce-time")) || DEFAULT_DEBOUNCE_TIME
+  }
+
+  get hotkey() {
+    return this.getAttribute("hotkey")
+  }
 }
 
 customElements.define("alchemy-list-filter", ListFilter)

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

@@ -26,7 +26,7 @@ class Message extends HTMLElement {
     if (this.dismissable && this.type !== "error") {
       setTimeout(() => {
         this.dismiss()
-      }, this.delay)
+      }, this.dismissDelay)
     }
   }
 
@@ -43,8 +43,10 @@ class Message extends HTMLElement {
     return this.getAttribute("type") || "notice"
   }
 
-  get delay() {
-    return parseInt(this.getAttribute("delay") || DISMISS_DELAY)
+  get dismissDelay() {
+    return parseInt(
+      this.noticesWrapper?.dataset.autoDismissDelay || DISMISS_DELAY
+    )
   }
 
   get iconName() {
@@ -64,6 +66,10 @@ class Message extends HTMLElement {
         return this.type
     }
   }
+
+  get noticesWrapper() {
+    return this.closest("#flash_notices")
+  }
 }
 
 customElements.define("alchemy-message", Message)

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

@@ -0,0 +1,119 @@
+import { patch } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
+import Spinner from "alchemy_admin/spinner"
+
+const BUTTON = "BUTTON"
+const SPAN = "SPAN"
+
+/**
+ * Custom element for page nodes in the sitemap tree
+ * Handles folding/unfolding of page children
+ */
+export class AlchemyPageNode extends HTMLElement {
+  connectedCallback() {
+    this.pageId = this.getAttribute("page-id")
+    this.folded = this.hasAttribute("folded")
+
+    this.folderButton?.addEventListener("click", this)
+  }
+
+  disconnectedCallback() {
+    this.folderButton?.removeEventListener("click", this)
+  }
+
+  async handleEvent(event) {
+    if (event.type === "click") {
+      await this.handleFolderClick(event)
+    }
+  }
+
+  async handleFolderClick(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const folderButton = event.currentTarget
+    folderButton.innerHTML = ""
+    const spinner = new Spinner("small")
+    spinner.spin(folderButton)
+
+    try {
+      await patch(
+        Alchemy.routes.fold_admin_page_path(this.pageId),
+        null,
+        "text/vnd.turbo-stream.html"
+      )
+
+      this.folded = !this.folded
+      this.toggleAttribute("folded", this.folded)
+      this.toggleChildren()
+      this.updateFolderIcon()
+    } catch (error) {
+      growl(error.message || error, "error")
+      this.updateFolderIcon()
+    } finally {
+      spinner.stop()
+    }
+  }
+
+  toggleChildren() {
+    const childrenContainer = this.querySelector(
+      `#page_${this.pageId}_children`
+    )
+    if (childrenContainer) {
+      childrenContainer.classList.toggle("hidden", this.folded)
+    }
+  }
+
+  updateFolderIcon() {
+    if (this.folderButton) {
+      const iconName = this.folded ? "arrow-right-s" : "arrow-down-s"
+      this.folderButton.innerHTML = `<alchemy-icon name="${iconName}"></alchemy-icon>`
+    }
+  }
+
+  /**
+   * Updates the folder button state based on whether the node has children
+   * Converts between button and span as needed
+   */
+  updateFolderButton() {
+    const folderElement = this.querySelector(".page_folder")
+    if (!folderElement) return
+
+    const shouldShowButton = this.hasChildren || this.folded
+
+    if (shouldShowButton && folderElement.tagName === SPAN) {
+      // Convert span to button with icon
+      const iconName = this.folded ? "arrow-right-s" : "arrow-down-s"
+      folderElement.outerHTML = `<button class="page_folder icon_button">
+        <alchemy-icon name="${iconName}"></alchemy-icon>
+      </button>`
+
+      // Re-attach event listener to the new button element
+      this.folderButton?.addEventListener("click", this)
+    } else if (!shouldShowButton && folderElement.tagName === BUTTON) {
+      // Convert button to empty span (no children and not folded)
+      folderElement.outerHTML = '<span class="page_folder"></span>'
+    } else if (shouldShowButton && folderElement.tagName === BUTTON) {
+      // Button exists, just update the icon direction
+      this.updateFolderIcon()
+    }
+  }
+
+  get hasChildren() {
+    const childrenContainer = this.querySelector(
+      `#page_${this.pageId}_children`
+    )
+    if (!childrenContainer) return false
+
+    return (
+      childrenContainer.querySelectorAll(":scope > alchemy-page-node").length >
+      0
+    )
+  }
+
+  get folderButton() {
+    return this.querySelector("button.page_folder")
+  }
+}
+
+customElements.define("alchemy-page-node", AlchemyPageNode)

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

@@ -1,13 +1,12 @@
 // Handles the page publication date fields
-export default function () {
-  document.addEventListener("DialogReady.Alchemy", function (evt) {
-    const dialog = evt.detail.body
-    const public_on_field = dialog.querySelector("#page_public_on")
-    const public_until_field = dialog.querySelector("#page_public_until")
-    const publication_date_fields = dialog.querySelector(
+export class PagePublicationFields extends HTMLElement {
+  connectedCallback() {
+    const public_on_field = this.querySelector("#page_public_on")
+    const public_until_field = this.querySelector("#page_public_until")
+    const publication_date_fields = this.querySelector(
       ".page-publication-date-fields"
     )
-    const public_field = dialog.querySelector("#page_public")
+    const public_field = this.querySelector("#page_public")
 
     if (!public_field) return
 
@@ -24,5 +23,7 @@ export default function () {
       }
       public_until_field.value = ""
     })
-  })
+  }
 }
+
+customElements.define("alchemy-page-publication-fields", PagePublicationFields)