alchemy_cms 7.0.8 → 7.1.0.pre.b2

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

@@ -0,0 +1,79 @@
+import "alchemy_admin/components/link_buttons/link_button"
+import "alchemy_admin/components/link_buttons/unlink_button"
+
+class LinkButtons extends HTMLElement {
+  constructor() {
+    super()
+    this.addEventListener("alchemy:link", this)
+    this.addEventListener("alchemy:unlink", this)
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "alchemy:link":
+        this.setLink(event.detail)
+        break
+      case "alchemy:unlink":
+        this.removeLink()
+    }
+    event.stopPropagation()
+  }
+
+  setLink(data) {
+    this.linkUrlField.value = data.url
+    this.linkUrlField.dispatchEvent(new Event("change"))
+    this.linkTitleField.value = data.title
+    this.linkClassField.value = data.type
+    this.linkTargetField.value = data.target
+
+    this.unlinkButton.linked = true
+    this.elementEditor.setDirty()
+  }
+
+  removeLink() {
+    this.linkUrlField.value = ""
+    this.linkUrlField.dispatchEvent(new Event("change"))
+    this.linkTitleField.value = ""
+    this.linkClassField.value = ""
+    this.linkTargetField.value = ""
+
+    this.linkButton.classList.remove("linked")
+
+    this.elementEditor.setDirty()
+  }
+
+  get linkButton() {
+    return this.querySelector('[is="alchemy-link-button"]')
+  }
+
+  get unlinkButton() {
+    return this.querySelector('[is="alchemy-unlink-button"]')
+  }
+
+  get ingredientEditor() {
+    const ingredientId = this.dataset.ingredientId
+    return this.parentElement.closest(`[data-ingredient-id='${ingredientId}']`)
+  }
+
+  get elementEditor() {
+    return this.closest("alchemy-element-editor")
+  }
+
+  get linkUrlField() {
+    return this.ingredientEditor.querySelector("[data-link-value]")
+  }
+
+  get linkTitleField() {
+    return this.ingredientEditor.querySelector("[data-link-title]")
+  }
+
+  get linkTargetField() {
+    return this.ingredientEditor.querySelector("[data-link-target]")
+  }
+
+  get linkClassField() {
+    return this.ingredientEditor.querySelector("[data-link-class]")
+  }
+}
+
+customElements.define("alchemy-link-buttons", LinkButtons)

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

@@ -0,0 +1,45 @@
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
+
+class NodeSelect extends RemoteSelect {
+  _searchQuery(term, page) {
+    return {
+      filter: {
+        name_or_page_name_cont: term,
+        ...JSON.parse(this.queryParams)
+      },
+      page: page
+    }
+  }
+
+  _renderResult(item) {
+    return this._renderListEntry(item)
+  }
+
+  /**
+   * html template for each list entry
+   * @param {object} node
+   * @returns {string}
+   * @private
+   */
+  _renderListEntry(node) {
+    const ancestors = node.ancestors.map((a) => a.name)
+    return `
+      <div class="node-select--node">
+        <i class="icon ri-menu-2-line"></i>
+        <div class="node-select--node-display_name">
+          <span class="node-select--node-ancestors">
+            ${ancestors.join(" /&nbsp;")}
+          </span>
+          <span class="node-select--node-name">
+            ${node.name}
+          </span>
+        </div>
+        <div class="node-select--node-url">
+          ${node.url || ""}
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define("alchemy-node-select", NodeSelect)

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

@@ -0,0 +1,18 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+
+class Overlay extends AlchemyHTMLElement {
+  render() {
+    return `
+        <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")
+  }
+}
+
+customElements.define("alchemy-overlay", Overlay)

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

@@ -0,0 +1,63 @@
+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")
+    }
+  }
+
+  _searchQuery(term, page) {
+    return {
+      q: {
+        name_cont: term,
+        ...JSON.parse(this.queryParams)
+      },
+      page: page
+    }
+  }
+
+  _parseResponse(response) {
+    const meta = response.meta
+    return {
+      results: response.pages,
+      more: meta.page * meta.per_page < meta.total_count
+    }
+  }
+
+  /**
+   * result which is visible if a page was selected
+   * @param {object} page
+   * @returns {string}
+   * @private
+   */
+  _renderResult(page) {
+    return page.text || page.name
+  }
+
+  /**
+   * html template for each list entry
+   * @param {object} page
+   * @returns {string}
+   * @private
+   */
+  _renderListEntry(page) {
+    return `
+      <div class="page-select--page">
+        <div class="page-select--top">
+          <i class="icon ri-file-3-line"></i>
+          <span class="page-select--page-name">${page.name}</span>
+          <span class="page-select--page-urlname">${page.url_path}</span>
+        </div>
+        <div class="page-select--bottom">
+          <span class="page-select--site-name">${page.site.name}</span>
+          <span class="page-select--language-code">${page.language.name}</span>
+        </div>
+      </div>
+    `
+  }
+}
+
+customElements.define("alchemy-page-select", PageSelect)

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

@@ -0,0 +1,134 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+
+export class RemoteSelect extends AlchemyHTMLElement {
+  static properties = {
+    allowClear: { default: false },
+    selection: { default: undefined },
+    placeholder: { default: "" },
+    queryParams: { default: "{}" },
+    url: { default: "" }
+  }
+
+  connected() {
+    this.input.classList.add("alchemy_selectbox")
+
+    $(this.input)
+      .select2(this.select2Config)
+      .on("select2-open", (evt) => {
+        this.onOpen(evt)
+      })
+      .on("change", (evt) => {
+        this.onChange(evt)
+      })
+  }
+
+  /**
+   * Optional on change handler called by Select2.
+   * @param {Event} event
+   */
+  onChange(event) {
+    // Left empty for sub classes to define this as needed.
+  }
+
+  /**
+   * Optional on open handler called by Select2.
+   * @param {Event} event
+   */
+  onOpen(event) {
+    // add focus to the search input. Select2 is handling the focus on the first opening,
+    // but it does not work the second time. One process in select2 is "stealing" the focus
+    // if the command is not delayed. It is an intermediate solution until we are going to
+    // move away from Select2
+    setTimeout(() => {
+      document.querySelector("#select2-drop .select2-input").focus()
+    }, 100)
+  }
+
+  get input() {
+    return this.getElementsByTagName("input")[0]
+  }
+
+  get select2Config() {
+    return {
+      placeholder: this.placeholder,
+      allowClear: this.allowClear,
+      initSelection: (_$el, callback) => {
+        if (this.selection) {
+          callback(JSON.parse(this.selection))
+        }
+      },
+      ajax: this.ajaxConfig,
+      formatSelection: (item) => this._renderResult(item),
+      formatResult: (item) => this._renderListEntry(item)
+    }
+  }
+
+  /**
+   * Ajax configuration for Select2
+   * @returns {object}
+   */
+  get ajaxConfig() {
+    return {
+      url: this.url,
+      datatype: "json",
+      quietMillis: 300,
+      data: (term, page) => this._searchQuery(term, page),
+      results: (response) => this._parseResponse(response)
+    }
+  }
+
+  /**
+   * Search query send to server from select2
+   * @param {string} term
+   * @param {number} page
+   * @returns {object}
+   * @private
+   */
+  _searchQuery(term, page) {
+    return {
+      q: {
+        name_cont: term,
+        ...JSON.parse(this.queryParams)
+      },
+      page: page
+    }
+  }
+
+  /**
+   * Parses server response into select2 results object
+   * @param {object} response
+   * @returns {object}
+   * @private
+   */
+  _parseResponse(response) {
+    const meta = response.meta
+    return {
+      results: response.data,
+      more: meta.page * meta.per_page < meta.total_count
+    }
+  }
+
+  /**
+   * result which is visible if a page was selected
+   * @param {object} item
+   * @returns {string}
+   * @private
+   */
+  _renderResult() {
+    throw new Error(
+      "You need to define a _renderResult function on your sub class!"
+    )
+  }
+
+  /**
+   * html template for each list entry
+   * @param {object} item
+   * @returns {string}
+   * @private
+   */
+  _renderListEntry() {
+    throw new Error(
+      "You need to define a _renderListEntry function on your sub class!"
+    )
+  }
+}

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

@@ -0,0 +1,12 @@
+class Select extends HTMLSelectElement {
+  connectedCallback() {
+    this.classList.add("alchemy_selectbox")
+
+    $(this).select2({
+      minimumResultsForSearch: 5,
+      dropdownAutoWidth: true
+    })
+  }
+}
+
+customElements.define("alchemy-select", Select, { extends: "select" })

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

@@ -0,0 +1,31 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+
+class Spinner extends AlchemyHTMLElement {
+  static properties = {
+    size: { default: "medium" },
+    color: { default: "currentColor" }
+  }
+
+  render() {
+    this.className = `spinner spinner--${this.size}`
+
+    return `
+      <svg width="100%" viewBox="0 0 28 28" style="--spinner-color: ${this.color}">
+        <path
+          class="hex1"
+          d="M5.938,18.07l-5.878-5.9l2.154-8.058l8.024-2.161l5.87,5.9l-2.144,8.058L5.938,18.07z"
+        />
+        <path
+          class="hex2"
+          d="M19.686,20.785l-4.731-4.754l1.725-6.487l6.468-1.742l4.733,4.754l-1.734,6.487L19.686,20.785z"
+        />
+        <path
+          class="hex3"
+          d="M11.708,26.294l-3.47-3.485l1.276-4.758l4.74-1.276l3.468,3.485l-1.265,4.758L11.708,26.294z"
+        />
+      </svg>
+    `
+  }
+}
+
+customElements.define("alchemy-spinner", Spinner)

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

@@ -0,0 +1,134 @@
+import "tinymce"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { currentLocale } from "alchemy_admin/i18n"
+
+class Tinymce extends AlchemyHTMLElement {
+  #min_height = null
+
+  /**
+   * the observer will initialize Tinymce if the textarea becomes visible
+   */
+  connected() {
+    this.className = "tinymce_container"
+
+    const observerCallback = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+          this._initTinymceEditor()
+          // disable observer after the Tinymce was initialized
+          observer.unobserve(entry.target)
+        }
+      })
+    }
+
+    const options = {
+      root: document.getElementById("element_area"),
+      rootMargin: "0px",
+      threshold: [0.05]
+    }
+
+    this.tinymceIntersectionObserver = new IntersectionObserver(
+      observerCallback,
+      options
+    )
+    this.tinymceIntersectionObserver.observe(this)
+  }
+
+  /**
+   * disconnect intersection observer and remove Tinymce editor if the web components get destroyed
+   */
+  disconnected() {
+    if (this.tinymceIntersectionObserver !== null) {
+      this.tinymceIntersectionObserver.disconnect()
+    }
+
+    tinymce.get(this.editorId)?.remove(this.editorId)
+  }
+
+  render() {
+    return `
+      ${this.initialContent}
+      <alchemy-spinner size="small"></alchemy-spinner>
+    `
+  }
+
+  /**
+   * hide the textarea until TinyMCE is ready to show the editor
+   */
+  afterRender() {
+    this.style.minHeight = `${this.minHeight}px`
+    this.editor.style.display = "none"
+  }
+
+  /**
+   * initialize Richtext area after the Intersection observer triggered
+   * @private
+   */
+  _initTinymceEditor() {
+    tinymce.init(this.configuration).then((editors) => {
+      editors.forEach((editor) => {
+        // mark the editor container as visible
+        // without these correction the editor remains hidden
+        // after a drag and drop action
+        editor.show()
+
+        // remove the spinner after the Tinymce initialized
+        this.getElementsByTagName("alchemy-spinner")[0].remove()
+
+        // event listener to mark the editor as dirty
+        editor.on("dirty", () => this.elementEditor.setDirty())
+        editor.on("click", () => this.elementEditor.onClickElement(false))
+      })
+    })
+  }
+
+  get configuration() {
+    const customConfig = {}
+
+    // read the attributes on the component and add them as custom configuration
+    this.getAttributeNames().forEach((attributeName) => {
+      if (!["class", "id", "is", "name", "style"].includes(attributeName)) {
+        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
+        }
+      }
+    })
+
+    return {
+      ...Alchemy.TinymceDefaults,
+      ...customConfig,
+      locale: currentLocale(),
+      selector: `#${this.editorId}`
+    }
+  }
+
+  get editorId() {
+    return this.editor.id
+  }
+
+  get editor() {
+    return this.getElementsByTagName("textarea")[0]
+  }
+
+  get elementEditor() {
+    return document
+      .getElementById(this.editorId)
+      .closest("alchemy-element-editor")
+  }
+
+  get minHeight() {
+    return this.#min_height || this.configuration.min_height
+  }
+
+  set minHeight(value) {
+    this.#min_height = value
+  }
+}
+
+customElements.define("alchemy-tinymce", Tinymce)