alchemy_cms 7.0.14 → 7.1.0.pre.b1

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

@@ -0,0 +1,40 @@
+/**
+ * Show the character counter below input fields and textareas
+ */
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { translate } from "alchemy_admin/i18n"
+
+class CharCounter extends AlchemyHTMLElement {
+  static properties = {
+    maxChars: { default: 60 }
+  }
+  connected() {
+    this.translation = translate("allowed_chars", this.maxChars)
+    this.formField = this.getFormField()
+
+    if (this.formField) {
+      this.createDisplayElement()
+      this.countCharacters()
+      this.formField.addEventListener("keyup", () => this.countCharacters()) // add arrow function to get a implicit this - binding
+    }
+  }
+
+  getFormField() {
+    const formFields = this.querySelectorAll("input, textarea")
+    return formFields.length > 0 ? formFields[0] : undefined
+  }
+
+  createDisplayElement() {
+    this.display = document.createElement("small")
+    this.display.className = "alchemy-char-counter"
+    this.formField.after(this.display)
+  }
+
+  countCharacters() {
+    const charLength = this.formField.value.length
+    this.display.textContent = `${charLength} ${this.translation}`
+    this.display.classList.toggle("too-long", charLength > this.maxChars)
+  }
+}
+
+customElements.define("alchemy-char-counter", CharCounter)

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

@@ -0,0 +1,39 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { translate, currentLocale } from "alchemy_admin/i18n"
+import flatpickr from "flatpickr"
+
+class Datepicker extends AlchemyHTMLElement {
+  static properties = {
+    inputType: { default: "date" }
+  }
+
+  constructor() {
+    super()
+    this.flatpickr = undefined
+  }
+
+  afterRender() {
+    const options = {
+      // alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`)
+      locale: currentLocale().slice(0, 2),
+      altInput: true,
+      altFormat: translate(`formats.${this.inputType}`),
+      altInputClass: "flatpickr-input",
+      dateFormat: "Z",
+      enableTime: /time/.test(this.inputType),
+      noCalendar: this.inputType === "time",
+      time_24hr: translate("formats.time_24hr"),
+      onValueUpdate(_selectedDates, _dateStr, instance) {
+        instance.element.closest("alchemy-element-editor")?.setDirty()
+      }
+    }
+
+    this.flatpickr = flatpickr(this.getElementsByTagName("input")[0], options)
+  }
+
+  disconnected() {
+    this.flatpickr.destroy()
+  }
+}
+
+customElements.define("alchemy-datepicker", Datepicker)

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

@@ -0,0 +1,45 @@
+export const DEFAULTS = {
+  header_height: 36,
+  size: "400x300",
+  padding: true,
+  title: "",
+  modal: true,
+  overflow: "visible",
+  ready: () => {},
+  closed: () => {}
+}
+
+export class DialogLink extends HTMLAnchorElement {
+  connectedCallback() {
+    this.addEventListener("click", (evt) => {
+      if (!this.disabled) {
+        this.openDialog()
+      }
+      evt.preventDefault()
+    })
+  }
+
+  openDialog() {
+    this.dialog = new Alchemy.Dialog(
+      this.getAttribute("href"),
+      this.dialogOptions
+    )
+    this.dialog.open()
+  }
+
+  get dialogOptions() {
+    const options = this.dataset.dialogOptions
+      ? JSON.parse(this.dataset.dialogOptions)
+      : {}
+    return {
+      ...DEFAULTS,
+      ...options
+    }
+  }
+
+  get disabled() {
+    return this.classList.contains("disabled")
+  }
+}
+
+customElements.define("alchemy-dialog-link", DialogLink, { extends: "a" })

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

@@ -0,0 +1,36 @@
+import { patch } from "alchemy_admin/utils/ajax"
+
+export class PublishElementButton extends HTMLElement {
+  constructor() {
+    super()
+
+    this.addEventListener("sl-change", this)
+  }
+
+  handleEvent(event) {
+    const elementEditor = event.target.closest("alchemy-element-editor")
+    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)
+          Alchemy.reloadPreview()
+        })
+        .catch((error) => Alchemy.growl(error.message, "error"))
+    }
+  }
+
+  get elementEditor() {
+    return this.closest("alchemy-element-editor")
+  }
+
+  get tooltip() {
+    return this.closest("sl-tooltip")
+  }
+
+  get elementId() {
+    return this.elementEditor.elementId
+  }
+}
+
+customElements.define("alchemy-publish-element-button", PublishElementButton)

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

@@ -0,0 +1,553 @@
+import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
+import ImageLoader from "alchemy_admin/image_loader"
+import fileEditors from "alchemy_admin/file_editors"
+import pictureEditors from "alchemy_admin/picture_editors"
+import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
+import { post } from "alchemy_admin/utils/ajax"
+import { createHtmlElement } from "../utils/dom_helpers"
+
+import "./element_editor/publish_element_button"
+
+export class ElementEditor extends HTMLElement {
+  constructor() {
+    super()
+
+    // Add event listeners
+    this.addEventListener("click", this)
+    // Triggered by child elements
+    this.addEventListener("alchemy:element-update-title", this)
+    // We use of @rails/ujs for Rails remote forms
+    this.addEventListener("ajax:success", this)
+    // Dirty observer
+    this.addEventListener("change", this)
+
+    this.header?.addEventListener("dblclick", () => {
+      this.toggle()
+    })
+    this.toggleButton?.addEventListener("click", (evt) => {
+      const elementEditor = evt.target.closest("alchemy-element-editor")
+      if (elementEditor === this) {
+        this.toggle()
+      }
+    })
+  }
+
+  connectedCallback() {
+    // The placeholder while be being dragged is empty.
+    if (this.classList.contains("ui-sortable-placeholder")) {
+      return
+    }
+
+    // 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`)
+    TagsAutocomplete(this)
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "click":
+        const elementEditor = event.target.closest("alchemy-element-editor")
+        if (elementEditor === this) {
+          this.onClickElement()
+        }
+        break
+      case "ajax:success":
+        if (event.target === this.body) {
+          const responseJSON = event.detail[0]
+          event.stopPropagation()
+          this.onSaveElement(responseJSON)
+        }
+        break
+      case "alchemy:element-update-title":
+        if (!this.hasEditors && event.target == this.firstChild) {
+          this.setTitle(event.detail.title)
+        }
+        break
+      case "change":
+        // SortableJS fires a native change event :/
+        // and we do not want to set the element editor dirty
+        // when this happens
+        if (event.target.classList.contains("nested-elements")) {
+          return
+        }
+        event.stopPropagation()
+        event.target.classList.add("dirty")
+        this.setDirty()
+        break
+    }
+  }
+
+  /**
+   * Scrolls to and highlights element
+   * Expands if collapsed
+   * Also chooses the right fixed elements tab, if necessary.
+   * Can be triggered through custom event 'FocusElementEditor.Alchemy'
+   * Used by the elements on click events in the preview frame.
+   */
+  async focusElement() {
+    // Select tab if necessary
+    if (document.querySelector("#fixed-elements")) {
+      await this.selectTabForElement()
+    }
+    // Expand if necessary
+    await this.expand()
+    this.selectElement(true)
+  }
+
+  focusElementPreview() {
+    Alchemy.PreviewWindow.postMessage({
+      message: "Alchemy.focusElement",
+      element_id: this.elementId
+    })
+  }
+
+  onClickElement() {
+    this.selectElement()
+    this.focusElementPreview()
+  }
+
+  /**
+   * Sets the element to saved state
+   * Updates title
+   * Shows error messages if ingredient validations fail
+   * @argument {JSON} data
+   */
+  onSaveElement(data) {
+    // JS event bubbling will also update the parents element quote.
+    this.setClean()
+    // Reset errors that might be visible from last save attempt
+    this.errorsDisplay.innerHTML = ""
+    this.body
+      .querySelectorAll(".ingredient-editor")
+      .forEach((el) => el.classList.remove("validation_failed"))
+    // If validation failed
+    if (data.errors) {
+      const warning = data.warning
+      // Create error messages
+      data.errors.forEach((message) => {
+        this.errorsDisplay.append(createHtmlElement(`<li>${message}</li>`))
+      })
+      // Mark ingredients as failed
+      data.ingredientsWithErrors.forEach((id) => {
+        this.querySelector(`[data-ingredient-id="${id}"]`)?.classList.add(
+          "validation_failed"
+        )
+      })
+      // Show message
+      Alchemy.growl(warning, "warn")
+      this.elementErrors.classList.remove("hidden")
+    } else {
+      Alchemy.growl(data.notice)
+      Alchemy.PreviewWindow.refresh(() => this.focusElementPreview())
+      this.updateTitle(data.previewText)
+      data.ingredientAnchors.forEach((anchor) => {
+        IngredientAnchorLink.updateIcon(anchor.ingredientId, anchor.active)
+      })
+    }
+  }
+
+  /**
+   * Smoothly scrolls to element
+   */
+  scrollToElement() {
+    // The timeout gives the browser some time to calculate the position
+    // of nested elements correctly
+    setTimeout(() => {
+      this.scrollIntoView({
+        behavior: "smooth"
+      })
+    }, 50)
+  }
+
+  /**
+   * Highlight element and optionally scroll into view
+   * @param {boolean} scroll smoothly scroll element into view. Default (false)
+   */
+  selectElement(scroll = false) {
+    document
+      .querySelectorAll("alchemy-element-editor.selected")
+      .forEach((el) => {
+        el.classList.remove("selected")
+      })
+    window.requestAnimationFrame(() => {
+      this.classList.add("selected")
+    })
+    if (scroll) this.scrollToElement()
+  }
+
+  /**
+   * Selects tab for given element
+   * Resolves the promise if this is done.
+   * @returns {Promise}
+   */
+  selectTabForElement() {
+    return new Promise((resolve, reject) => {
+      const tabs = document.querySelector("#fixed-elements")
+      const panel = this.closest("sl-tab-panel")
+      if (tabs && panel) {
+        tabs.show(panel.getAttribute("name"))
+        resolve()
+      } else {
+        reject(new Error("No tabs present"))
+      }
+    })
+  }
+
+  /**
+   * Sets the element into clean (safed) state
+   */
+  setClean() {
+    this.dirty = false
+    window.onbeforeunload = null
+    if (this.hasEditors) {
+      this.body.querySelectorAll(".dirty").forEach((el) => {
+        el.classList.remove("dirty")
+      })
+    }
+  }
+
+  /**
+   * Sets the element into dirty (unsafed) state
+   */
+  setDirty() {
+    if (this.hasEditors) {
+      this.dirty = true
+      window.onbeforeunload = () => Alchemy.t("page_dirty_notice")
+    }
+  }
+
+  /**
+   * Sets the title quote
+   * @param {string} title
+   */
+  setTitle(title) {
+    const quote = this.querySelector(".element-header .preview_text_quote")
+    quote.textContent = title
+  }
+
+  /**
+   * Expands or collapses element editor
+   * If the element is dirty (has unsaved changes) it displays a confirm first.
+   */
+  async toggle() {
+    if (this.collapsed) {
+      await this.expand()
+    } else {
+      await this.collapse()
+    }
+  }
+
+  /**
+   * Collapses the element editor and persists the state on the server
+   * @returns {Promise}
+   */
+  collapse() {
+    if (this.collapsed || this.compact || this.fixed) {
+      return Promise.resolve("Element is already collapsed.")
+    }
+
+    const spinner = new Alchemy.Spinner("small")
+    spinner.spin(this.toggleButton)
+    this.toggleIcon?.classList?.add("hidden")
+    return post(Alchemy.routes.collapse_admin_element_path(this.elementId))
+      .then((response) => {
+        const data = response.data
+
+        this.collapsed = true
+        this.toggleButton?.setAttribute("title", data.title)
+
+        // Collapse all nested elements if necessarry
+        if (data.nestedElementIds.length) {
+          const selector = data.nestedElementIds
+            .map((id) => `#element_${id}`)
+            .join(", ")
+          this.querySelectorAll(selector).forEach((nestedElement) => {
+            nestedElement.collapsed = true
+            nestedElement.toggleButton?.setAttribute("title", data.title)
+          })
+        }
+      })
+      .catch((error) => {
+        Alchemy.growl(error.message, "error")
+        console.error(error)
+      })
+      .finally(() => {
+        this.toggleIcon?.classList?.remove("hidden")
+        spinner.stop()
+      })
+  }
+
+  /**
+   * Collapses the element editor and persists the state on the server
+   * @* @returns {Promise}
+   */
+  expand() {
+    if (this.expanded && !this.compact) {
+      return Promise.resolve("Element is already expanded.")
+    }
+
+    if (this.compact && this.parentElementEditor) {
+      return this.parentElementEditor.expand()
+    } else {
+      const spinner = new Alchemy.Spinner("small")
+      spinner.spin(this.toggleButton)
+      this.toggleIcon?.classList.add("hidden")
+
+      return new Promise((resolve, reject) => {
+        post(Alchemy.routes.expand_admin_element_path(this.elementId))
+          .then((response) => {
+            const data = response.data
+
+            // First expand all parent elements if necessary
+            if (data.parentElementIds.length) {
+              const selector = data.parentElementIds
+                .map((id) => `#element_${id}`)
+                .join(", ")
+              document.querySelectorAll(selector).forEach((parentElement) => {
+                parentElement.collapsed = false
+                parentElement.toggleButton?.setAttribute("title", data.title)
+              })
+            }
+            // Finally expand ourselve
+            this.collapsed = false
+            this.toggleButton?.setAttribute("title", data.title)
+            // Resolve the promise that scrolls to the element very last
+            resolve()
+          })
+          .catch((error) => {
+            Alchemy.growl(error.message, "error")
+            console.error(error)
+            reject(error)
+          })
+          .finally(() => {
+            this.toggleIcon?.classList?.remove("hidden")
+            spinner.stop()
+          })
+      })
+    }
+  }
+
+  /**
+   * Updates the quote in the element header and dispatches event
+   * to parent elements
+   * @param {string} title
+   */
+  updateTitle(title) {
+    this.setTitle(title)
+    this.dispatchEvent(
+      new CustomEvent("alchemy:element-update-title", {
+        bubbles: true,
+        detail: { title }
+      })
+    )
+  }
+
+  /**
+   * Sets element published or hidden
+   * @param {boolean}
+   */
+  set published(isPublished) {
+    if (isPublished) {
+      this.classList.remove("hidden")
+    } else {
+      this.classList.add("hidden")
+    }
+  }
+
+  /**
+   * Is element published or hidden
+   * @returns {boolean}
+   */
+  get published() {
+    return !this.classList.contains("hidden")
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get compact() {
+    return this.getAttribute("compact") !== null
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get fixed() {
+    return this.getAttribute("fixed") !== null
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  set collapsed(value) {
+    this.classList.toggle("folded", value)
+    this.classList.toggle("expanded", !value)
+    this.toggleIcon?.classList?.toggle("ri-arrow-down-s-line", !value)
+    this.toggleIcon?.classList?.toggle("ri-arrow-left-s-line", value)
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get collapsed() {
+    return this.classList.contains("folded")
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get expanded() {
+    return !this.collapsed
+  }
+
+  /**
+   * Toggles the dirty class
+   *
+   * @param {boolean} value
+   */
+  set dirty(value) {
+    this.classList.toggle("dirty", value)
+  }
+
+  /**
+   * Returns the dirty state of this element
+   *
+   * @returns {boolean}
+   */
+  get dirty() {
+    return this.classList.contains("dirty")
+  }
+
+  /**
+   * Returns the element header
+   *
+   * @returns {HTMLElement|undefined}
+   */
+  get header() {
+    return this.querySelector(`.element-header`)
+  }
+
+  /**
+   * Returns the immediate body container of this element if present
+   *
+   * Makes sure it does not return a nested elements body
+   * by scoping the selector to this elements id.
+   *
+   * @returns {HTMLElement|undefined}
+   */
+  get body() {
+    return this.querySelector(this.bodySelector)
+  }
+
+  get bodySelector() {
+    return `#${this.id} > .element-body`
+  }
+
+  /**
+   * Returns the immediate footer container of this element if present
+   *
+   * Makes sure it does not return a nested elements footer
+   * by scoping the selector to this elements id.
+   *
+   * @returns {HTMLElement|undefined}
+   */
+  get footer() {
+    return this.querySelector(`#${this.id} > .element-footer`)
+  }
+
+  /**
+   * The collapse/expand toggle button
+   *
+   * @returns {HTMLButtonElement|undefined}
+   */
+  get toggleButton() {
+    return this.querySelector(".element-toggle")
+  }
+
+  /**
+   * The collapse/expand toggle buttons icon
+   *
+   * @returns {HTMLElement|undefined}
+   */
+  get toggleIcon() {
+    return this.toggleButton?.querySelector(".icon")
+  }
+
+  /**
+   * The error messages container
+   *
+   * @returns {HTMLElement}
+   */
+  get errorsDisplay() {
+    return this.body.querySelector(".error-messages")
+  }
+
+  /**
+   * The validation messages list container
+   *
+   * @returns {HTMLElement}
+   */
+  get elementErrors() {
+    return this.body.querySelector(".element_errors")
+  }
+
+  /**
+   * The element database id
+   *
+   * @returns {string}
+   */
+  get elementId() {
+    return this.dataset.elementId
+  }
+
+  /**
+   * The element defintion name
+   *
+   * @returns {string}
+   */
+  get elementName() {
+    return this.dataset.elementName
+  }
+
+  /**
+   * Does this element have ingredient editor fields?
+   *
+   * @returns {boolean}
+   */
+  get hasEditors() {
+    return !!this.body?.querySelector(".element-ingredient-editors")
+  }
+
+  /**
+   * Does this element have nested elements?
+   *
+   * @returns {boolean}
+   */
+  get hasChildren() {
+    return !!this.querySelector(".nested-elements")
+  }
+
+  /**
+   * The first child element editor if present
+   *
+   * @returns {HTMLButtonElement|undefined}
+   */
+  get firstChild() {
+    return this.querySelector("alchemy-element-editor")
+  }
+
+  /**
+   * The parent element editor if present
+   *
+   * @returns {ElementEditor|undefined}
+   */
+  get parentElementEditor() {
+    return this.parentElement?.closest("alchemy-element-editor")
+  }
+}
+
+customElements.define("alchemy-element-editor", ElementEditor)