alchemy_cms 7.0.15 → 7.1.0.pre.b1

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

@@ -0,0 +1,59 @@
+import Spinner from "../spinner"
+
+class Button extends HTMLButtonElement {
+  connectedCallback() {
+    if (this.form) {
+      this.form.addEventListener("submit", this)
+
+      if (this.form.dataset.remote == "true") {
+        this.form.addEventListener("ajax:complete", this)
+      }
+    } else {
+      console.warn("No form for button found!", this)
+    }
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "submit":
+        const isDisabled = this.getAttribute("disabled") === "disabled"
+
+        if (isDisabled) {
+          event.preventDefault()
+          event.stopPropagation()
+        } else {
+          this.disable()
+        }
+        break
+      case "ajax:complete":
+        this.enable()
+        break
+    }
+  }
+
+  disable() {
+    const spinner = new Spinner("small")
+    const rect = this.getBoundingClientRect()
+
+    this.dataset.initialButtonText = this.innerHTML
+    this.setAttribute("disabled", "disabled")
+    this.setAttribute("tabindex", "-1")
+    this.classList.add("disabled")
+    this.style.width = `${rect.width}px`
+    this.style.height = `${rect.height}px`
+    this.innerHTML = " "
+
+    spinner.spin(this)
+  }
+
+  enable() {
+    this.classList.remove("disabled")
+    this.removeAttribute("disabled")
+    this.removeAttribute("tabindex")
+    this.style.width = null
+    this.style.height = null
+    this.innerHTML = this.dataset.initialButtonText
+  }
+}
+
+customElements.define("alchemy-button", Button, { extends: "button" })

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)