alchemy_cms 7.1.12 → 7.2.0.b

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

@@ -0,0 +1,87 @@
+import SortableElements from "alchemy_admin/sortable_elements"
+
+class ElementsWindow extends HTMLElement {
+  #visible = true
+
+  constructor() {
+    super()
+    this.#attachEvents()
+  }
+
+  connectedCallback() {
+    this.toggleButton?.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.toggle()
+    })
+    if (window.location.hash) {
+      document
+        .querySelector(window.location.hash)
+        ?.trigger("FocusElementEditor.Alchemy")
+    }
+    SortableElements()
+  }
+
+  collapseAllElements() {
+    this.querySelectorAll(
+      "alchemy-element-editor:not([compact]):not([fixed])"
+    ).forEach((editor) => editor.collapse())
+  }
+
+  toggle() {
+    this.#visible ? this.hide() : this.show()
+  }
+
+  show() {
+    document.body.classList.add("elements-window-visible")
+    this.#visible = true
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Hide elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-unfold")
+  }
+
+  hide() {
+    document.body.classList.remove("elements-window-visible")
+    this.#visible = false
+    this.toggleButton.closest("sl-tooltip").content = Alchemy.t("Show elements")
+    this.toggleButton
+      .querySelector("alchemy-icon")
+      .setAttribute("name", "menu-fold")
+  }
+
+  get collapseButton() {
+    return this.querySelector("#collapse-all-elements-button")
+  }
+
+  get toggleButton() {
+    return document.querySelector("#element_window_button")
+  }
+
+  get previewWindow() {
+    return document.getElementById("alchemy_preview_window")
+  }
+
+  #attachEvents() {
+    this.collapseButton?.addEventListener("click", () => {
+      this.collapseAllElements()
+    })
+    window.addEventListener("message", (event) => {
+      const data = event.data
+      if (data?.message == "Alchemy.focusElementEditor") {
+        const element = document.getElementById(`element_${data.element_id}`)
+        this.show()
+        element?.focusElement()
+      }
+    })
+    document.body.addEventListener("click", (evt) => {
+      if (!evt.target.closest("alchemy-element-editor")) {
+        this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
+          editor.classList.remove("selected")
+        })
+        this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
+      }
+    })
+  }
+}
+
+customElements.define("alchemy-elements-window", ElementsWindow)

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

@@ -0,0 +1,13 @@
+import { growl } from "alchemy_admin/growler"
+
+class Growl extends HTMLElement {
+  connectedCallback() {
+    growl(this.message, this.getAttribute("type") || "notice")
+  }
+
+  get message() {
+    return this.getAttribute("message") || this.innerHTML
+  }
+}
+
+customElements.define("alchemy-growl", Growl)

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

@@ -0,0 +1,51 @@
+class Icon extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "icon-style"]
+  }
+
+  constructor() {
+    super()
+    this.spriteUrl = document
+      .querySelector('meta[name="alchemy-icon-sprite"]')
+      .getAttribute("content")
+  }
+
+  connectedCallback() {
+    this.render()
+  }
+
+  attributeChangedCallback() {
+    this.render()
+  }
+
+  render() {
+    const sizeClass = this.size ? ` icon--${this.size}` : ""
+    this.innerHTML = `<svg class="icon${sizeClass}"><use href="${this.spriteUrl}#ri-${this.iconName}${this.style}" /></svg>`
+  }
+
+  set name(value) {
+    this.setAttribute("name", value)
+  }
+
+  get iconName() {
+    return this.getAttribute("name")
+  }
+
+  get size() {
+    return this.getAttribute("size")
+  }
+
+  get style() {
+    const value = this.getAttribute("icon-style")
+    switch (value) {
+      case "none":
+        return ""
+      case null:
+        return "-line"
+      default:
+        return `-${value}`
+    }
+  }
+}
+
+customElements.define("alchemy-icon", Icon)

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

@@ -0,0 +1,24 @@
+import "alchemy_admin/components/attachment_select"
+import "alchemy_admin/components/button"
+import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/clipboard_button"
+import "alchemy_admin/components/datepicker"
+import "alchemy_admin/components/dialog_link"
+import "alchemy_admin/components/dom_id_select"
+import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/elements_window"
+import "alchemy_admin/components/list_filter"
+import "alchemy_admin/components/message"
+import "alchemy_admin/components/growl"
+import "alchemy_admin/components/icon"
+import "alchemy_admin/components/ingredient_group"
+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_select"
+import "alchemy_admin/components/preview_window"
+import "alchemy_admin/components/select"
+import "alchemy_admin/components/spinner"
+import "alchemy_admin/components/tags_autocomplete"
+import "alchemy_admin/components/tinymce"

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

@@ -18,8 +18,10 @@ export class IngredientGroup extends HTMLDetailsElement {
     let expanded_ingredient_groups = this.localStorageItem
 
     if (this.open) {
+      this.toggleIcon.name = "arrow-down-s"
       if (!this.isInLocalStorage) expanded_ingredient_groups.push(this.id)
     } else {
+      this.toggleIcon.name = "arrow-left-s"
       expanded_ingredient_groups = expanded_ingredient_groups.filter(
         (value) => value !== this.id
       )
@@ -47,6 +49,10 @@ export class IngredientGroup extends HTMLDetailsElement {
       return []
     }
   }
+
+  get toggleIcon() {
+    return this.querySelector("alchemy-icon")
+  }
 }
 
 customElements.define("alchemy-ingredient-group", IngredientGroup, {

data/app/javascript/alchemy_admin/components/link_buttons/link_button.js

@@ -5,23 +5,33 @@ class LinkButton extends HTMLButtonElement {
     this.classList.add("icon_button")
     // Prevent accidental form submits if this component is wrapped inside a form
     this.setAttribute("type", "button")
-    this.innerHTML = '<i class="icon ri-link-m ri-fw"></i>'
+    this.innerHTML = '<alchemy-icon name="link" icon-style="m"></alchemy-icon>'
   }
 
   handleEvent(event) {
-    const dialog = new Alchemy.LinkDialog(this)
-    dialog.open()
+    const dialog = new Alchemy.LinkDialog({
+      url: this.linkUrl,
+      title: this.linkTitle,
+      target: this.linkTarget,
+      type: this.linkClass
+    })
+    dialog.open().then((link) => this.setLink(link))
     event.preventDefault()
   }
 
-  setLink(url, title, target, type) {
-    this.classList.add("linked")
-    this.dispatchEvent(
-      new CustomEvent("alchemy:link", {
-        bubbles: true,
-        detail: { url, title, target, type }
-      })
-    )
+  setLink(link) {
+    if (link.url === "") {
+      this.classList.remove("linked")
+      this.dispatchEvent(new CustomEvent("alchemy:unlink", { bubbles: true }))
+    } else {
+      this.classList.add("linked")
+      this.dispatchEvent(
+        new CustomEvent("alchemy:link", {
+          bubbles: true,
+          detail: link
+        })
+      )
+    }
   }
 
   get linkUrl() {

data/app/javascript/alchemy_admin/components/link_buttons/unlink_button.js

@@ -6,7 +6,8 @@ class UnlinkButton extends HTMLButtonElement {
     // Prevent accidental form submits if this component is wrapped inside a form
     this.setAttribute("type", "button")
     this.linked = this.linked
-    this.innerHTML = '<i class="icon ri-link-unlink-m ri-fw"></i>'
+    this.innerHTML =
+      '<alchemy-icon name="link-unlink" icon-style="m"></alchemy-icon>'
   }
 
   handleEvent(event) {

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

@@ -38,6 +38,7 @@ class LinkButtons extends HTMLElement {
     this.linkTargetField.value = ""
 
     this.linkButton.classList.remove("linked")
+    this.unlinkButton.linked = false
 
     this.elementEditor.setDirty()
   }

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

@@ -0,0 +1,68 @@
+class ListFilter extends HTMLElement {
+  constructor() {
+    super()
+    this.#attachEvents()
+  }
+
+  #attachEvents() {
+    this.filterField.addEventListener("keyup", () => {
+      const term = this.filterField.value
+      this.clearButton.style.visibility = "visible"
+      this.filter(term)
+    })
+    this.clearButton.addEventListener("click", (e) => {
+      e.preventDefault()
+      this.clear()
+    })
+    this.filterField.addEventListener("focus", () =>
+      key.setScope("list_filter")
+    )
+    key("esc", "list_filter", () => {
+      this.clear()
+      this.filterField.blur()
+    })
+  }
+
+  filter(term) {
+    if (term === "") {
+      this.clearButton.style.visibility = "hidden"
+    }
+
+    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")
+      }
+    })
+  }
+
+  clear() {
+    this.filterField.value = ""
+    this.filter("")
+  }
+
+  get nameAttribute() {
+    return this.getAttribute("name-attribute") || "name"
+  }
+
+  get clearButton() {
+    return this.querySelector('button[type="button"]')
+  }
+
+  get filterField() {
+    return this.querySelector('input[type="text"]')
+  }
+
+  get items() {
+    return document.querySelectorAll(this.itemsSelector)
+  }
+
+  get itemsSelector() {
+    return this.getAttribute("items-selector")
+  }
+}
+
+customElements.define("alchemy-list-filter", ListFilter)

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

@@ -0,0 +1,69 @@
+const DISMISS_DELAY = 5000
+
+class Message extends HTMLElement {
+  #message
+
+  constructor() {
+    super()
+    this.#message = this.innerHTML
+    if (this.dismissable || this.type === "error") {
+      this.addEventListener("click", this)
+    }
+  }
+
+  handleEvent(event) {
+    if (event.type === "click") {
+      this.dismiss()
+    }
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+      <alchemy-icon name="${this.iconName}"></alchemy-icon>
+      ${this.dismissable && this.type === "error" ? '<alchemy-icon name="close"></alchemy-icon>' : ""}
+      ${this.#message}
+    `
+    if (this.dismissable && this.type !== "error") {
+      setTimeout(() => {
+        this.dismiss()
+      }, this.delay)
+    }
+  }
+
+  dismiss() {
+    this.addEventListener("transitionend", () => this.remove())
+    this.classList.add("dismissed")
+  }
+
+  get dismissable() {
+    return this.hasAttribute("dismissable")
+  }
+
+  get type() {
+    return this.getAttribute("type") || "notice"
+  }
+
+  get delay() {
+    return parseInt(this.getAttribute("delay") || DISMISS_DELAY)
+  }
+
+  get iconName() {
+    switch (this.type) {
+      case "warning":
+      case "warn":
+      case "alert":
+        return "alert"
+      case "notice":
+        return "check"
+      case "info":
+      case "hint":
+        return "information"
+      case "error":
+        return "bug"
+      default:
+        return this.type
+    }
+  }
+}
+
+customElements.define("alchemy-message", Message)

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

@@ -25,7 +25,7 @@ class NodeSelect extends RemoteSelect {
     const ancestors = node.ancestors.map((a) => a.name)
     return `
       <div class="node-select--node">
-        <i class="icon ri-menu-2-line"></i>
+        <alchemy-icon name="menu-2"></alchemy-icon>
         <div class="node-select--node-display_name">
           <span class="node-select--node-ancestors">
             ${ancestors.join(" /&nbsp;")}

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

@@ -3,15 +3,15 @@ import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_elemen
 class Overlay extends AlchemyHTMLElement {
   render() {
     return `
-        <alchemy-spinner></alchemy-spinner>
-        <div id="overlay_text_box">
-            <span id="overlay_text">${this.getAttribute("text")}</span>
-        </div>
-        `
+      <alchemy-spinner></alchemy-spinner>
+      <div id="overlay_text_box">
+        <span id="overlay_text">${this.getAttribute("text")}</span>
+      </div>
+      `
   }
 
   set show(value) {
-    this.style.setProperty("display", value ? "block" : "none")
+    this.classList.toggle("visible", value)
   }
 }
 

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

@@ -1,12 +1,8 @@
 import { RemoteSelect } from "alchemy_admin/components/remote_select"
 
 class PageSelect extends RemoteSelect {
-  onChange(event) {
-    if (event.added) {
-      this.dispatchCustomEvent("PageSelect.ItemAdded", event.added)
-    } else {
-      this.dispatchCustomEvent("PageSelect.ItemRemoved")
-    }
+  get pageId() {
+    return this.selection ? JSON.parse(this.selection)["id"] : undefined
   }
 
   _searchQuery(term, page) {
@@ -47,7 +43,7 @@ class PageSelect extends RemoteSelect {
     return `
       <div class="page-select--page">
         <div class="page-select--top">
-          <i class="icon ri-file-3-line"></i>
+          <alchemy-icon name="file-3"></alchemy-icon>
           <span class="page-select--page-name">${page.name}</span>
           <span class="page-select--page-urlname">${page.url_path}</span>
         </div>

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

@@ -0,0 +1,121 @@
+const MIN_WIDTH = 240
+
+class PreviewWindow extends HTMLIFrameElement {
+  #afterLoad
+  #reloadIcon
+
+  constructor() {
+    super()
+    this.addEventListener("load", this)
+  }
+
+  handleEvent(evt) {
+    if (evt.type === "load") {
+      this.#stopSpinner()
+      this.#afterLoad?.call(this, evt)
+    }
+  }
+
+  connectedCallback() {
+    let url = this.url
+
+    this.#attachEvents()
+
+    if (window.localStorage.getItem("alchemy-preview-url")) {
+      url = window.localStorage.getItem("alchemy-preview-url")
+      this.previewUrlSelect.value = url
+    }
+
+    this.refresh(url)
+  }
+
+  disconnectedCallback() {
+    key.unbind("alt+r")
+  }
+
+  postMessage(data) {
+    this.contentWindow.postMessage(data, "*")
+  }
+
+  resize(width) {
+    if (width < MIN_WIDTH) {
+      width = MIN_WIDTH
+    }
+    this.style.width = `${width}px`
+  }
+
+  refresh(url) {
+    this.#startSpinner()
+
+    if (url) {
+      this.src = url
+    } else {
+      this.src = this.url
+    }
+
+    return new Promise((resolve) => {
+      this.#afterLoad = resolve
+    })
+  }
+
+  #attachEvents() {
+    this.reloadButton?.addEventListener("click", (evt) => {
+      evt.preventDefault()
+      this.refresh()
+    })
+
+    key("alt+r", () => this.refresh())
+
+    // Need to listen with jQuery here because select2 does not emit native events.
+    $(this.sizeSelect).on("change", (evt) => {
+      const select = evt.target
+      const width = select.value
+
+      if (width === "auto") {
+        this.style.width = null
+      } else {
+        this.resize(width)
+      }
+    })
+
+    this.previewUrlSelect?.addEventListener("change", (evt) => {
+      const url = evt.target.value
+      window.localStorage.setItem("alchemy-preview-url", url)
+      this.refresh(url)
+    })
+  }
+
+  #startSpinner() {
+    this.#reloadIcon = this.reloadButton.innerHTML
+    this.reloadButton.innerHTML = `<alchemy-spinner size="small"></alchemy-spinner>`
+  }
+
+  #stopSpinner() {
+    this.reloadButton.innerHTML = this.#reloadIcon
+  }
+
+  get url() {
+    return this.getAttribute("url")
+  }
+
+  get sizeSelect() {
+    return document.querySelector("select#preview_size")
+  }
+
+  get previewUrlSelect() {
+    return document.querySelector("select#preview_url")
+  }
+
+  get reloadButton() {
+    return document.querySelector("#reload_preview_button")
+  }
+}
+
+customElements.define("alchemy-preview-window", PreviewWindow, {
+  extends: "iframe"
+})
+
+export function reloadPreview() {
+  const previewWindow = document.getElementById("alchemy_preview_window")
+  previewWindow.refresh()
+}

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

@@ -27,7 +27,10 @@ export class RemoteSelect extends AlchemyHTMLElement {
    * @param {Event} event
    */
   onChange(event) {
-    // Left empty for sub classes to define this as needed.
+    this.dispatchCustomEvent("RemoteSelect.Change", {
+      removed: event.removed,
+      added: event.added
+    })
   }
 
   /**

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

@@ -1,12 +1,48 @@
 class Select extends HTMLSelectElement {
+  #select2Element
+
   connectedCallback() {
     this.classList.add("alchemy_selectbox")
 
-    $(this).select2({
+    this.#select2Element = $(this).select2({
       minimumResultsForSearch: 5,
       dropdownAutoWidth: true
     })
   }
+
+  enable() {
+    this.removeAttribute("disabled")
+    this.#updateSelect2()
+  }
+
+  disable() {
+    this.setAttribute("disabled", "disabled")
+    this.#updateSelect2()
+  }
+
+  setOptions(data, prompt = undefined) {
+    let selectedValue = this.value
+
+    // reset the old options and insert the placeholder(s) first
+    this.innerHTML = ""
+    if (prompt) {
+      this.add(new Option(prompt, ""))
+    }
+
+    // add the new options to the select
+    data.forEach((item) => {
+      this.add(new Option(item.text, item.id, false, item.id === selectedValue))
+    })
+
+    this.#updateSelect2()
+  }
+
+  /**
+   * inform Select2 to update
+   */
+  #updateSelect2() {
+    this.#select2Element.trigger("change")
+  }
 }
 
 customElements.define("alchemy-select", Select, { extends: "select" })