alchemy_cms 8.3.11 → 8.4.0

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

@@ -1,31 +1,30 @@
 import Cropper from "cropperjs"
+import { currentDialog } from "alchemy_admin/dialog"
 
-export default class ImageCropper {
-  #initialized = false
+export class ImageCropper extends HTMLElement {
   #cropper = null
   #cropFromField = null
   #cropSizeField = null
 
-  constructor(image, settings) {
-    this.image = image
-    this.defaultBox = settings.default_box
-    this.aspectRatio = settings.ratio
+  connectedCallback() {
+    this.image = this.querySelector("img")
+    this.form = this.querySelector("form")
     this.#cropFromField = document.getElementById(
-      settings.crop_from_form_field_id
+      this.getAttribute("crop-from-field-id")
     )
     this.#cropSizeField = document.getElementById(
-      settings.crop_size_form_field_id
+      this.getAttribute("crop-size-field-id")
     )
-    this.elementId = settings.element_id
     this.elementEditor = document.querySelector(
-      `[data-element-id='${this.elementId}']`
+      `[data-element-id='${this.getAttribute("element-id")}']`
     )
-    this.dialog = Alchemy.currentDialog()
-    if (this.dialog) {
-      this.dialog.options.closed = () => this.destroy()
-      this.bind()
-    }
-    this.init()
+    this.form.addEventListener("submit", this.#onSubmit)
+    this.form.addEventListener("reset", this.#onReset)
+    this.#cropper = new Cropper(this.image, this.cropperOptions)
+  }
+
+  disconnectedCallback() {
+    this.#cropper?.destroy()
   }
 
   get cropperOptions() {
@@ -39,6 +38,12 @@ export default class ImageCropper {
     }
   }
 
+  get aspectRatio() {
+    const ratio = this.getAttribute("ratio")
+    // NaN lets cropperjs use a free aspect ratio.
+    return ratio ? parseFloat(ratio) : NaN
+  }
+
   get cropFrom() {
     if (this.#cropFromField?.value) {
       return this.#cropFromField.value.split("x").map((v) => parseInt(v))
@@ -60,24 +65,13 @@ export default class ImageCropper {
         height: this.cropSize[1]
       }
     } else {
-      return this.defaultBoxSize
-    }
-  }
-
-  get defaultBoxSize() {
-    return {
-      x: this.defaultBox[0],
-      y: this.defaultBox[1],
-      width: this.defaultBox[2],
-      height: this.defaultBox[3]
+      return this.defaultBox
     }
   }
 
-  init() {
-    if (!this.#initialized) {
-      this.#cropper = new Cropper(this.image, this.cropperOptions)
-      this.#initialized = true
-    }
+  get defaultBox() {
+    const box = JSON.parse(this.getAttribute("default-box"))
+    return { x: box[0], y: box[1], width: box[2], height: box[3] }
   }
 
   update(coords) {
@@ -90,7 +84,7 @@ export default class ImageCropper {
   reset() {
     const cropper = this.#cropper
     // Apply the default size. cropperjs clamps the crop box to its maximum size.
-    cropper.setData(this.defaultBoxSize)
+    cropper.setData(this.defaultBox)
     // When the default box sits at the maximum crop box size, sub-pixel rounding
     // makes cropperjs treat setData's box as oversized and revert its position
     // (renderCropBox resets top/left to their old values). Re-apply the position
@@ -99,31 +93,23 @@ export default class ImageCropper {
     const canvas = cropper.getCanvasData()
     const scale = canvas.width / canvas.naturalWidth
     cropper.setCropBoxData({
-      left: canvas.left + this.defaultBoxSize.x * scale,
-      top: canvas.top + this.defaultBoxSize.y * scale
+      left: canvas.left + this.defaultBox.x * scale,
+      top: canvas.top + this.defaultBox.y * scale
     })
-    this.update(this.defaultBoxSize)
+    this.update(this.defaultBox)
   }
 
-  destroy() {
-    if (this.#cropper) {
-      this.#cropper.destroy()
-    }
-    this.#initialized = false
-    return true
+  #onSubmit = (event) => {
+    event.preventDefault()
+    this.update(this.#cropper.getData(true))
+    this.elementEditor?.setDirty()
+    currentDialog()?.close()
   }
 
-  bind() {
-    this.dialog.dialog_body.find('button[type="submit"]').on("click", () => {
-      const data = this.#cropper.getData(true)
-      this.update(data)
-      this.elementEditor.setDirty()
-      this.dialog.close()
-      return false
-    })
-    this.dialog.dialog_body.find('button[type="reset"]').on("click", () => {
-      this.reset()
-      return false
-    })
+  #onReset = (event) => {
+    event.preventDefault()
+    this.reset()
   }
 }
+
+customElements.define("alchemy-image-cropper", ImageCropper)

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

@@ -0,0 +1,14 @@
+import { DialogLink } from "alchemy_admin/components/dialog_link"
+import ImageOverlay from "alchemy_admin/image_overlay"
+
+// Opens the picture in a full screen image overlay instead of navigating to it
+export class ImageOverlayLink extends DialogLink {
+  openDialog() {
+    this.dialog = new ImageOverlay(this.href, { padding: false })
+    this.dialog.open()
+  }
+}
+
+customElements.define("alchemy-image-overlay-link", ImageOverlayLink, {
+  extends: "a"
+})

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

@@ -1,15 +1,17 @@
 "use strict"
 // ^ add support for top-level await in Terser
 
-import "alchemy_admin/components/action"
 import "alchemy_admin/components/attachment_select"
 import "alchemy_admin/components/auto_submit"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/clear_schedule_button"
 import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/color_select"
+import "alchemy_admin/components/conditional_field"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
+import "alchemy_admin/components/dirty_guard"
 import "alchemy_admin/components/dom_id_select"
 import "alchemy_admin/components/element_editor"
 import "alchemy_admin/components/element_select"
@@ -17,17 +19,26 @@ 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/main_navi_entry"
+import "alchemy_admin/components/menu_node"
 import "alchemy_admin/components/message"
 import "alchemy_admin/components/growl"
 import "alchemy_admin/components/icon"
+import "alchemy_admin/components/image_cropper"
+import "alchemy_admin/components/image_overlay_link"
 import "alchemy_admin/components/ingredient_group"
 import "alchemy_admin/components/link_buttons"
+import "alchemy_admin/components/news_reader"
+import "alchemy_admin/components/node_folder"
+import "alchemy_admin/components/node_form"
 import "alchemy_admin/components/node_select"
+import "alchemy_admin/components/node_tree"
 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_archive"
 import "alchemy_admin/components/picture_description_select"
 import "alchemy_admin/components/picture_editor"
 import "alchemy_admin/components/picture_thumbnail"

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

@@ -0,0 +1,75 @@
+import { autoUpdate, computePosition, flip } from "@floating-ui/dom"
+
+const SCREEN_PADDING = 8
+
+// A main navigation entry lives inside the fixed, vertically scrollable menu
+// column. A scroll container clips its content in both axes, so the hover
+// flyout (this entry's label or its sub navigation) that reaches out to the
+// right of the column would be cut off. While the flyout is open we lift it out
+// of the clipping context by fixing it to the viewport and let Floating UI keep
+// it anchored to the entry.
+class MainNaviEntry extends HTMLElement {
+  #flyout = null
+  #stopAutoUpdate = null
+
+  connectedCallback() {
+    this.addEventListener("mouseenter", this.#open)
+    this.addEventListener("mouseleave", this.#close)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("mouseenter", this.#open)
+    this.removeEventListener("mouseleave", this.#close)
+    this.#close()
+  }
+
+  #open = () => {
+    const flyout = this.#flyoutElement()
+    if (!flyout) return
+
+    this.#flyout = flyout
+    this.#stopAutoUpdate = autoUpdate(this, flyout, () => {
+      computePosition(this, flyout, {
+        strategy: "fixed",
+        placement: "right-start",
+        // Keep the flyout anchored to the entry: when there is no room below,
+        // flip to bottom alignment instead of drifting away from the entry.
+        middleware: [
+          flip({ fallbackPlacements: ["right-end"], padding: SCREEN_PADDING })
+        ]
+      }).then(({ x, y }) => {
+        Object.assign(flyout.style, {
+          position: "fixed",
+          left: `${Math.round(x)}px`,
+          top: `${Math.round(y)}px`
+        })
+      })
+    })
+  }
+
+  #close = () => {
+    this.#stopAutoUpdate?.()
+    this.#stopAutoUpdate = null
+
+    if (this.#flyout) {
+      this.#flyout.style.position = ""
+      this.#flyout.style.left = ""
+      this.#flyout.style.top = ""
+      this.#flyout = null
+    }
+  }
+
+  // The entry's flyout element, but only when it is actually rendered as a
+  // flyout. In the expanded menu the label and sub navigation sit in the normal
+  // document flow (position: static) and must be left untouched.
+  #flyoutElement() {
+    const flyout =
+      this.querySelector(".sub_navigation") || this.querySelector("label")
+    if (!flyout || getComputedStyle(flyout).position === "static") return null
+    return flyout
+  }
+}
+
+customElements.define("alchemy-main-navi-entry", MainNaviEntry)
+
+export default MainNaviEntry

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

@@ -0,0 +1,73 @@
+import { patch } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
+import { routes } from "alchemy_admin/routes"
+
+/**
+ * Custom element for menu nodes in the nodes tree
+ * Handles folding and unfolding of its children
+ */
+export class AlchemyMenuNode extends HTMLElement {
+  connectedCallback() {
+    this.addEventListener("click", this)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+  }
+
+  handleEvent(event) {
+    // Clicks of nested menu nodes bubble up here as well
+    if (event.target.closest("alchemy-node-folder") === this.folder) {
+      this.toggleFolded(event)
+    }
+  }
+
+  async toggleFolded(event) {
+    event.preventDefault()
+
+    try {
+      await patch(routes.node.toggle_folded_api_path(this.nodeId))
+      this.folded = !this.folded
+    } catch (error) {
+      growl(error.message || error, "error")
+    }
+  }
+
+  /**
+   * Shows the fold toggle only for nodes that have something to fold
+   */
+  updateFolder() {
+    this.folder.hidden = !(this.hasChildren || this.folded)
+  }
+
+  get folded() {
+    return this.hasAttribute("folded")
+  }
+
+  set folded(value) {
+    this.toggleAttribute("folded", value)
+    this.folder.toggleAttribute("folded", value)
+    this.childrenList.classList.toggle("folded", value)
+  }
+
+  get hasChildren() {
+    return (
+      this.childrenList.querySelectorAll(":scope > alchemy-menu-node").length >
+      0
+    )
+  }
+
+  get nodeId() {
+    return this.getAttribute("node-id")
+  }
+
+  get folder() {
+    return this.querySelector(":scope > li > .sitemap_node alchemy-node-folder")
+  }
+
+  get childrenList() {
+    return this.querySelector(":scope > li > ul.children")
+  }
+}
+
+customElements.define("alchemy-menu-node", AlchemyMenuNode)

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

@@ -0,0 +1,109 @@
+/**
+ * Auto-rotating carousel for the dashboard news widget.
+ *
+ * Paging is handled by CSS scroll snap on `.news-reader--track`; this component
+ * scrolls to the next slide on a timer (pausing while hovered), lets the user
+ * swipe/scroll manually, and keeps the dot indicators in sync with the scroll
+ * position.
+ */
+class NewsReader extends HTMLElement {
+  connectedCallback() {
+    this.track = this.querySelector(".news-reader--track")
+    this.slides = Array.from(this.querySelectorAll(".news-reader--item"))
+    if (!this.track || this.slides.length < 2) return
+
+    this.currentIndex = 0
+    this.createDots()
+    this.setActive(0)
+    this.startRotation()
+
+    this.addEventListener("mouseenter", this)
+    this.addEventListener("mouseleave", this)
+    this.track.addEventListener("scroll", this, { passive: true })
+  }
+
+  disconnectedCallback() {
+    this.stopRotation()
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "mouseenter":
+        this.stopRotation()
+        break
+      case "mouseleave":
+        this.startRotation()
+        break
+      case "scroll":
+        this.syncActiveToScroll()
+        break
+    }
+  }
+
+  createDots() {
+    this.dotList = document.createElement("div")
+    this.dotList.className = "news-reader--dots"
+    this.dots = this.slides.map((_, index) => {
+      const dot = document.createElement("button")
+      dot.type = "button"
+      dot.className = "news-reader--dot"
+      dot.setAttribute("aria-label", `${index + 1}`)
+      dot.addEventListener("click", () => {
+        this.goTo(index)
+        this.startRotation()
+      })
+      this.dotList.append(dot)
+      return dot
+    })
+    this.append(this.dotList)
+  }
+
+  goTo(index) {
+    this.currentIndex = index
+    this.slides[index].scrollIntoView({
+      behavior: "smooth",
+      inline: "start",
+      block: "nearest"
+    })
+    this.setActive(index)
+  }
+
+  next() {
+    this.goTo((this.currentIndex + 1) % this.slides.length)
+  }
+
+  // Keep the active dot in sync when the user scrolls the track manually.
+  syncActiveToScroll() {
+    const width = this.track.clientWidth
+    if (!width) return
+    const index = Math.round(this.track.scrollLeft / width)
+    if (index !== this.currentIndex && this.slides[index]) {
+      this.currentIndex = index
+      this.setActive(index)
+    }
+  }
+
+  setActive(index) {
+    this.dots.forEach((dot, i) => {
+      dot.classList.toggle("is-active", i === index)
+    })
+  }
+
+  startRotation() {
+    this.stopRotation()
+    this.timer = window.setInterval(() => this.next(), this.interval)
+  }
+
+  stopRotation() {
+    if (this.timer) window.clearInterval(this.timer)
+    this.timer = null
+  }
+
+  get interval() {
+    return parseInt(this.getAttribute("interval"), 10) || 8000
+  }
+}
+
+customElements.define("alchemy-news-reader", NewsReader)
+
+export default NewsReader

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

@@ -0,0 +1,36 @@
+/**
+ * Custom element for the fold toggle of a menu node
+ * Renders the fold arrow and keeps it in sync with the folded attribute
+ */
+export class AlchemyNodeFolder extends HTMLElement {
+  static get observedAttributes() {
+    return ["folded"]
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+      <button class="node_folder icon_button">
+        <alchemy-icon name="${this.iconName}"></alchemy-icon>
+      </button>
+    `
+  }
+
+  attributeChangedCallback() {
+    // Fires before connectedCallback for attributes present in the markup
+    this.icon?.setAttribute("name", this.iconName)
+  }
+
+  get icon() {
+    return this.querySelector("alchemy-icon")
+  }
+
+  get iconName() {
+    return this.folded ? "arrow-right-s" : "arrow-down-s"
+  }
+
+  get folded() {
+    return this.hasAttribute("folded")
+  }
+}
+
+customElements.define("alchemy-node-folder", AlchemyNodeFolder)

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

@@ -0,0 +1,34 @@
+// Syncs the node name and url fields with the selected page
+export class NodeForm extends HTMLElement {
+  connectedCallback() {
+    this.addEventListener("Alchemy.RemoteSelect.Change", this.#onPageSelect)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("Alchemy.RemoteSelect.Change", this.#onPageSelect)
+  }
+
+  #onPageSelect = (event) => {
+    const page = event.detail.added
+
+    if (page) {
+      this.nameField.setAttribute("placeholder", page.name)
+      this.urlField.value = page.url_path
+      this.urlField.setAttribute("disabled", "disabled")
+    } else {
+      this.nameField.removeAttribute("placeholder")
+      this.urlField.value = ""
+      this.urlField.removeAttribute("disabled")
+    }
+  }
+
+  get nameField() {
+    return this.querySelector("#node_name")
+  }
+
+  get urlField() {
+    return this.querySelector("#node_url")
+  }
+}
+
+customElements.define("alchemy-node-form", NodeForm)

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

@@ -1,50 +1,45 @@
-import {
-  RemoteSelect,
-  escapeHtml
-} from "alchemy_admin/components/remote_select"
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
+import { escape_html } from "tom-select/utils"
 
 class NodeSelect extends RemoteSelect {
   _searchQuery(term, page) {
     return {
       filter: {
-        name_or_page_name_cont: term,
+        name_or_page_name_i_cont: term,
         ...JSON.parse(this.queryParams)
       },
       page: page
     }
   }
 
-  _renderResult(item) {
-    return this._renderListEntry(item)
+  _entry(node, term) {
+    return {
+      icon: "menu-2",
+      primary: this.#breadcrumb(node) + this._hightlightTerm(node.name, term),
+      secondary: { text: node.url, truncate: "head" }
+    }
+  }
+
+  _selectedEntry(node) {
+    return {
+      icon: "menu-2",
+      primary: this.#breadcrumb(node) + escape_html(node.name)
+    }
   }
 
   /**
-   * html template for each list entry
+   * Renders the node's ancestors as a breadcrumb that precedes its name. The
+   * ancestors place the node in the tree, so a deeply nested node reads clearly.
    * @param {object} node
-   * @param {string} term
    * @returns {string}
-   * @private
    */
-  _renderListEntry(node, term) {
-    const ancestors = node.ancestors.map((a) => escapeHtml(a.name))
-    const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
-
-    return `
-      <div class="node-select--node">
-        <alchemy-icon name="menu-2"></alchemy-icon>
-        <div class="node-select--node-display_name">
-          <span class="node-select--node-ancestors">
-            ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
-          </span>
-          <span class="node-select--node-name">
-            ${this._hightlightTerm(node.name, term)}
-          </span>
-        </div>
-        <div class="node-select--node-url">
-          ${escapeHtml(node.url || "")}
-        </div>
-      </div>
-    `
+  #breadcrumb(node) {
+    const ancestors = node.ancestors.map((ancestor) => ancestor.name)
+    if (ancestors.length === 0) return ""
+    const separator = `<alchemy-icon name="arrow-right-s" class="node-select--separator"></alchemy-icon>`
+    return `<span class="node-select--ancestors">${ancestors
+      .map(escape_html)
+      .join(separator)}</span>${separator}`
   }
 }
 

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

@@ -0,0 +1,56 @@
+import Sortable from "sortablejs"
+import { patch } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
+import { translate } from "alchemy_admin/i18n"
+import { routes } from "alchemy_admin/routes"
+
+/**
+ * Custom element for the nodes tree container
+ * Handles drag and drop sorting of its menu nodes
+ */
+export class AlchemyNodeTree extends HTMLElement {
+  connectedCallback() {
+    this.querySelectorAll("ul.children").forEach((list) => {
+      new Sortable(list, {
+        group: "nodes",
+        animation: 150,
+        fallbackOnBody: true,
+        swapThreshold: 0.65,
+        handle: ".node_name",
+        invertSwap: true,
+        draggable: "alchemy-menu-node",
+        onEnd: (event) => this.handleSort(event)
+      })
+    })
+  }
+
+  async handleSort(event) {
+    if (event.from === event.to && event.oldIndex === event.newIndex) {
+      return
+    }
+
+    const url = routes.node.move_api_path(event.item.nodeId)
+    const data = {
+      target_parent_id: event.to.dataset.recordId,
+      new_position: event.newIndex
+    }
+
+    try {
+      await patch(url, data)
+      this.updateFolders(event.from, event.to)
+      growl(translate("Successfully moved menu item"))
+    } catch (error) {
+      growl(error.message || error, "error")
+    }
+  }
+
+  updateFolders(from, to) {
+    from.closest("alchemy-menu-node")?.updateFolder()
+
+    if (from !== to) {
+      to.closest("alchemy-menu-node")?.updateFolder()
+    }
+  }
+}
+
+customElements.define("alchemy-node-tree", AlchemyNodeTree)

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

@@ -1,6 +1,7 @@
 import { patch } from "alchemy_admin/utils/ajax"
 import { growl } from "alchemy_admin/growler"
 import Spinner from "alchemy_admin/spinner"
+import { routes } from "alchemy_admin/routes"
 
 const BUTTON = "BUTTON"
 const SPAN = "SPAN"
@@ -38,7 +39,7 @@ export class AlchemyPageNode extends HTMLElement {
 
     try {
       await patch(
-        Alchemy.routes.fold_admin_page_path(this.pageId),
+        routes.fold_admin_page_path(this.pageId),
         null,
         "text/vnd.turbo-stream.html"
       )