unmagic-components 0.1.0 → 0.2.0

data/app/assets/javascripts/unmagic/components/autogrow.js

@@ -0,0 +1,74 @@
+// <unmagic-autogrow> — a textarea that grows to fit what's typed, rendered by
+// `autogrow_text_area`.
+//
+// It grows from the height its rows give it up to its CSS max-height, and only
+// then shows a scrollbar. CSS `field-sizing: content` would do the growing on its
+// own, but it ignores rows, so an empty box would collapse to a single line;
+// measuring keeps rows as the floor.
+//
+// It re-measures as you type, when the form is reset, and when the box changes
+// width (a narrower box wraps onto more lines). Call resize() after setting the
+// value from script.
+
+class UnmagicAutogrow extends HTMLElement {
+  #form = null
+  #width = 0
+  #observer = new ResizeObserver(([entry]) => {
+    const width = Math.round(entry.contentRect.width)
+    if (width === this.#width) return
+    this.#width = width
+    this.resize()
+  })
+
+  constructor() {
+    super()
+    this.addEventListener("input", (event) => {
+      if (event.target === this.textarea) this.resize()
+    })
+  }
+
+  connectedCallback() {
+    this.resize()
+    this.#observer.observe(this)
+    this.#form = this.textarea?.form ?? null
+    this.#form?.addEventListener("reset", this.#reset)
+  }
+
+  disconnectedCallback() {
+    this.#observer.disconnect()
+    this.#form?.removeEventListener("reset", this.#reset)
+    this.#form = null
+  }
+
+  get textarea() {
+    return this.querySelector("textarea")
+  }
+
+  resize() {
+    const textarea = this.textarea
+    if (!textarea) return
+
+    // Collapse to the rows-given height first, so the measurement can shrink too.
+    textarea.style.height = "auto"
+
+    const style = getComputedStyle(textarea)
+    const sum = (a, b) => parseFloat(style[a]) + parseFloat(style[b])
+
+    // scrollHeight is the content plus padding. The height to set is in the box's
+    // own sizing model, which max-height is in too.
+    const full = style.boxSizing === "border-box"
+      ? textarea.scrollHeight + sum("borderTopWidth", "borderBottomWidth")
+      : textarea.scrollHeight - sum("paddingTop", "paddingBottom")
+    const max = parseFloat(style.maxHeight) || Infinity
+
+    textarea.style.height = `${Math.min(full, max)}px`
+    textarea.style.overflowY = full > max ? "auto" : "hidden"
+  }
+
+  // reset fires before the form clears its fields, so measure on the next frame.
+  #reset = () => {
+    requestAnimationFrame(() => this.resize())
+  }
+}
+
+customElements.get("unmagic-autogrow") || customElements.define("unmagic-autogrow", UnmagicAutogrow)

data/app/assets/javascripts/unmagic/components/clipboard.js

@@ -0,0 +1,63 @@
+// <unmagic-clipboard> — copies text when its button is clicked, rendered by
+// `copy_button`.
+//
+//   value="…"  the text to copy
+//   for="ID"   or copy, at the moment of the click, the value of that input or the
+//              text of that element
+//
+// After a copy the element carries data-copied for a moment, which the CSS uses to
+// swap the copy icon for a check, and its live region says "Copied" for a screen
+// reader. It fires unmagic-clipboard:copy, or unmagic-clipboard:error when the
+// browser refuses the write (no permission, or an insecure page).
+
+const CONFIRM_FOR = 1500
+
+class UnmagicClipboard extends HTMLElement {
+  #timer = null
+
+  constructor() {
+    super()
+    this.addEventListener("click", (event) => {
+      if (event.target instanceof Element && event.target.closest("button")) this.copy()
+    })
+  }
+
+  disconnectedCallback() {
+    clearTimeout(this.#timer)
+  }
+
+  get text() {
+    const id = this.getAttribute("for")
+    if (!id) return this.getAttribute("value") ?? ""
+
+    const source = document.getElementById(id)
+    if (!source) return ""
+
+    const control = source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement || source instanceof HTMLSelectElement
+    return control ? source.value : source.textContent
+  }
+
+  async copy() {
+    const text = this.text
+
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch (error) {
+      this.dispatchEvent(new CustomEvent("unmagic-clipboard:error", { bubbles: true, detail: { error } }))
+      return
+    }
+
+    const live = this.querySelector(":scope > [aria-live]")
+    this.setAttribute("data-copied", "")
+    if (live) live.textContent = this.dataset.copiedLabel || "Copied"
+    this.dispatchEvent(new CustomEvent("unmagic-clipboard:copy", { bubbles: true, detail: { text } }))
+
+    clearTimeout(this.#timer)
+    this.#timer = setTimeout(() => {
+      this.removeAttribute("data-copied")
+      if (live) live.textContent = ""
+    }, CONFIRM_FOR)
+  }
+}
+
+customElements.get("unmagic-clipboard") || customElements.define("unmagic-clipboard", UnmagicClipboard)

data/app/assets/javascripts/unmagic/components/confirm.js

@@ -0,0 +1,102 @@
+// Replaces window.confirm for data-turbo-confirm with a dialog in the components'
+// own chrome. Importing this module installs it.
+//
+//   <%= button_to "Delete", label_path(label), method: :delete,
+//         form: { data: { turbo_confirm: "Delete this label?",
+//                         turbo_confirm_accept: "Delete",
+//                         turbo_confirm_variant: "danger" } } %>
+//
+// Optional attributes, read from the submitter first and then the form:
+//   data-turbo-confirm-title    the heading (default "Are you sure?")
+//   data-turbo-confirm-accept   the confirming button's label (default "Confirm")
+//   data-turbo-confirm-variant  "danger" styles that button as destructive and
+//                               focuses Cancel instead
+//
+// When a link carries data-turbo-method, Turbo builds a form for it and copies only
+// data-turbo-confirm onto that form. Use button_to when you need the other
+// attributes.
+//
+// The words come from the page's `confirm_dialog_template`, so they can be
+// translated. Without one they fall back to the English defaults below.
+
+import { Turbo } from "@hotwired/turbo-rails"
+import "unmagic/components/dialog"
+
+const FALLBACK = `
+  <dialog class="UnmagicDialogBox" role="alertdialog" data-unmagic-dialog>
+    <form method="dialog" class="UnmagicDialog">
+      <header class="UnmagicDialog__header">
+        <h2 class="UnmagicDialog__title" data-unmagic-confirm-title>Are you sure?</h2>
+      </header>
+      <div class="UnmagicDialog__body"><p data-unmagic-confirm-message></p></div>
+      <div class="UnmagicDialog__footer">
+        <button value="cancel" class="UnmagicButton" data-unmagic-confirm-cancel>Cancel</button>
+        <button value="confirm" class="UnmagicButton UnmagicButton--primary" data-unmagic-confirm-accept>Confirm</button>
+      </div>
+    </form>
+  </dialog>`
+
+let sequence = 0
+
+export function confirm(message, form, submitter) {
+  const option = (name) =>
+    submitter?.getAttribute?.(`data-turbo-confirm-${name}`) ?? form?.getAttribute?.(`data-turbo-confirm-${name}`)
+
+  const dialog = build()
+  const id = `unmagic_confirm_${++sequence}`
+  const title = dialog.querySelector("[data-unmagic-confirm-title]")
+  const body = dialog.querySelector("[data-unmagic-confirm-message]")
+  const accept = dialog.querySelector("[data-unmagic-confirm-accept]")
+  const cancel = dialog.querySelector("[data-unmagic-confirm-cancel]")
+
+  title.id = `${id}_title`
+  body.id = `${id}_message`
+  dialog.setAttribute("aria-labelledby", title.id)
+  dialog.setAttribute("aria-describedby", body.id)
+
+  body.textContent = message
+  if (option("title")) title.textContent = option("title")
+  if (option("accept")) accept.textContent = option("accept")
+
+  // A destructive action shouldn't be one Enter away.
+  if (option("variant") === "danger") {
+    accept.classList.replace("UnmagicButton--primary", "UnmagicButton--danger")
+    cancel.autofocus = true
+  } else {
+    accept.autofocus = true
+  }
+
+  document.body.append(dialog)
+  dialog.showModal()
+
+  return new Promise((resolve) => {
+    dialog.addEventListener(
+      "close",
+      () => {
+        resolve(dialog.returnValue === "confirm")
+        dialog.remove()
+      },
+      { once: true },
+    )
+  })
+}
+
+function build() {
+  const template = document.querySelector("template[data-unmagic-confirm]") ?? fallbackTemplate()
+  return template.content.firstElementChild.cloneNode(true)
+}
+
+let fallback
+function fallbackTemplate() {
+  if (!fallback) {
+    fallback = document.createElement("template")
+    fallback.innerHTML = FALLBACK.trim()
+  }
+  return fallback
+}
+
+if (Turbo.config?.forms) {
+  Turbo.config.forms.confirm = confirm
+} else {
+  Turbo.setConfirmMethod(confirm)
+}

data/app/assets/javascripts/unmagic/components/dialog.js

@@ -0,0 +1,53 @@
+// Behaviour every native <dialog> the components render shares. It is wired once,
+// by delegation from the document, so a dialog that is streamed or morphed in later
+// needs no setup of its own:
+//
+//   [data-unmagic-dialog-open="ID"]  opens that dialog modally
+//   [data-unmagic-dialog-close]      closes the dialog it sits in
+//   the backdrop of a dialog[data-unmagic-dialog] closes it on click
+//
+// A backdrop click only counts when the press also started on the backdrop.
+// Selecting text in an input and letting go past the panel's edge fires a click on
+// the dialog too, and that shouldn't throw the form away.
+//
+// Escape needs nothing here; a modal <dialog> closes on it natively.
+
+const installed = Symbol.for("unmagic-components.dialog")
+
+if (!globalThis[installed]) {
+  globalThis[installed] = true
+
+  let pressed = null
+  document.addEventListener("pointerdown", (event) => (pressed = event.target), true)
+
+  document.addEventListener("click", (event) => {
+    const target = event.target
+    if (!(target instanceof Element)) return
+
+    const opener = target.closest("[data-unmagic-dialog-open]")
+    if (opener) {
+      const dialog = document.getElementById(opener.getAttribute("data-unmagic-dialog-open"))
+      if (dialog instanceof HTMLDialogElement) {
+        event.preventDefault()
+        if (!dialog.open) dialog.showModal()
+      }
+      return
+    }
+
+    const closer = target.closest("[data-unmagic-dialog-close]")
+    if (closer) {
+      closer.closest("dialog")?.close()
+      return
+    }
+
+    if (target instanceof HTMLDialogElement && target.matches("[data-unmagic-dialog]") && pressed === target) {
+      target.close()
+    }
+  })
+
+  // An open dialog must not be in the snapshot Turbo restores on Back: it would
+  // come back open but not modal, sitting in the page with no backdrop.
+  document.addEventListener("turbo:before-cache", () => {
+    document.querySelectorAll("dialog[data-unmagic-dialog][open]").forEach((dialog) => dialog.close())
+  })
+}

data/app/assets/javascripts/unmagic/components/menu.js

@@ -0,0 +1,139 @@
+// <unmagic-menu> — a dropdown of actions, rendered by `menu`.
+//
+// The markup is a native <details>, so the trigger works before this script
+// upgrades it. The element adds what <details> lacks:
+//   - closing on an outside press, on Escape, on choosing an item, and before
+//     Turbo caches the page (a restored snapshot would otherwise come back open
+//     and with none of this wiring)
+//   - arrow keys, Home and End between items
+//   - focusing the first item when the menu is opened from the keyboard
+
+const ITEMS = "[role=menuitem]:not([disabled]):not([aria-disabled=true])"
+
+class UnmagicMenu extends HTMLElement {
+  #openedFromKeyboard = false
+
+  constructor() {
+    super()
+    // toggle doesn't bubble, so listen on the way down.
+    this.addEventListener("toggle", this.#toggled, true)
+    this.addEventListener("keydown", this.#keydown)
+    this.addEventListener("click", this.#clicked)
+  }
+
+  connectedCallback() {
+    this.close()
+    document.addEventListener("turbo:before-cache", this.#beforeCache)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("turbo:before-cache", this.#beforeCache)
+    this.#unbind()
+  }
+
+  get details() {
+    return this.querySelector(":scope > details")
+  }
+
+  get summary() {
+    return this.details?.querySelector(":scope > summary")
+  }
+
+  get items() {
+    return [...(this.details?.querySelectorAll(ITEMS) ?? [])]
+  }
+
+  close({ focus = false } = {}) {
+    const details = this.details
+    if (!details?.open) return
+
+    details.open = false
+    if (focus) this.summary?.focus()
+  }
+
+  #toggled = (event) => {
+    if (event.target !== this.details) return
+
+    if (this.details.open) {
+      document.addEventListener("pointerdown", this.#outside, true)
+      document.addEventListener("keydown", this.#escape)
+      if (this.#openedFromKeyboard) this.items[0]?.focus()
+    } else {
+      this.#unbind()
+    }
+    this.#openedFromKeyboard = false
+  }
+
+  #keydown = (event) => {
+    const details = this.details
+    if (!details) return
+
+    if (event.target === this.summary && !details.open) {
+      if (event.key === "Enter" || event.key === " ") this.#openedFromKeyboard = true
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        this.#openedFromKeyboard = true
+        details.open = true
+      }
+      return
+    }
+
+    if (!details.open) return
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        this.#move(1)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.#move(-1)
+        break
+      case "Home":
+        event.preventDefault()
+        this.items[0]?.focus()
+        break
+      case "End":
+        event.preventDefault()
+        this.items.at(-1)?.focus()
+        break
+      case "Tab":
+        this.close()
+        break
+    }
+  }
+
+  #move(step) {
+    const items = this.items
+    if (items.length === 0) return
+
+    const index = items.indexOf(document.activeElement)
+    const next = index === -1 ? (step > 0 ? 0 : items.length - 1) : (index + step + items.length) % items.length
+    items[next].focus()
+  }
+
+  // Close after the click has done its job: closing during the click would hide a
+  // button_to's form before the browser submits it.
+  #clicked = (event) => {
+    if (event.target instanceof Element && event.target.closest(ITEMS)) setTimeout(() => this.close())
+  }
+
+  #outside = (event) => {
+    if (!this.contains(event.target)) this.close()
+  }
+
+  #escape = (event) => {
+    if (event.key === "Escape") this.close({ focus: true })
+  }
+
+  #beforeCache = () => {
+    this.close()
+  }
+
+  #unbind() {
+    document.removeEventListener("pointerdown", this.#outside, true)
+    document.removeEventListener("keydown", this.#escape)
+  }
+}
+
+customElements.get("unmagic-menu") || customElements.define("unmagic-menu", UnmagicMenu)

data/app/assets/javascripts/unmagic/components/modal.js

@@ -0,0 +1,182 @@
+// <unmagic-modal> — the shared modal a layout mounts with `modal_frame`. It wraps a
+// <dialog> holding the turbo frame that modal links load into.
+//
+// The dialog opens when the frame starts fetching, not when the response lands, so a
+// slow form shows a skeleton instead of nothing. The GET check keeps the form's own
+// submit from flashing the skeleton again. The prefetch check ignores Turbo's hover
+// prefetch, which is also a GET on the frame; without it, merely pointing at a modal
+// link would open the dialog.
+//
+// A failed load swaps in the error template rather than leaving the skeleton
+// stranded or letting Turbo print "Content missing". Three failures are caught:
+//   - a network error (turbo:fetch-request-error)
+//   - an error status whose body lacks the frame (turbo:frame-missing)
+//   - an error status with an empty body, which Turbo otherwise ignores
+//     (turbo:before-fetch-response)
+// The error's retry button reloads the frame, which shows the skeleton again.
+//
+// A successful submit doesn't close the dialog straight away. The save usually
+// answers with a turbo_stream.refresh (see DialogResponder), and closing at once
+// would show the stale page for as long as that refresh takes. Instead the dialog
+// stays over the page and closes at turbo:before-render, the same render in which
+// the morph replaces the page, so the page repaints once. Until then the submit
+// button stays disabled and keeps its "Saving…" label. Other responses:
+//   - a stream that doesn't refresh: the dialog closes as soon as it is read
+//   - a redirect to a page without the frame: the modal visits that page and
+//     closes as it renders
+//   - a response that renders into the frame (the next step of a wizard): the
+//     dialog stays open
+
+import "unmagic/components/dialog"
+
+class UnmagicModal extends HTMLElement {
+  #pendingClose = false
+  #loadingFrame = false
+
+  connectedCallback() {
+    this.addEventListener("turbo:before-fetch-request", this.#loading)
+    this.addEventListener("turbo:before-fetch-response", this.#response)
+    this.addEventListener("turbo:frame-load", this.#loaded)
+    this.addEventListener("turbo:frame-missing", this.#missing)
+    this.addEventListener("turbo:fetch-request-error", this.#failed)
+    this.addEventListener("turbo:submit-end", this.#submitted)
+    this.addEventListener("click", this.#retry)
+    // close doesn't bubble, so listen on the way down.
+    this.addEventListener("close", this.#reset, true)
+    document.addEventListener("turbo:before-render", this.#beforeRender)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("turbo:before-fetch-request", this.#loading)
+    this.removeEventListener("turbo:before-fetch-response", this.#response)
+    this.removeEventListener("turbo:frame-load", this.#loaded)
+    this.removeEventListener("turbo:frame-missing", this.#missing)
+    this.removeEventListener("turbo:fetch-request-error", this.#failed)
+    this.removeEventListener("turbo:submit-end", this.#submitted)
+    this.removeEventListener("click", this.#retry)
+    this.removeEventListener("close", this.#reset, true)
+    document.removeEventListener("turbo:before-render", this.#beforeRender)
+  }
+
+  get dialog() {
+    return this.querySelector(":scope > dialog")
+  }
+
+  get frame() {
+    return this.dialog?.querySelector(":scope > turbo-frame")
+  }
+
+  close() {
+    this.dialog?.close()
+  }
+
+  #loading = (event) => {
+    // Only the frame's own navigation. A GET form inside the dialog (a filter) is
+    // targeted at the form and shouldn't blank the dialog with a skeleton.
+    if (event.target !== this.frame) return
+
+    const fetchOptions = event.detail?.fetchOptions
+    if (fetchOptions?.method?.toLowerCase() !== "get") return
+    if (fetchOptions.headers?.["X-Sec-Purpose"] === "prefetch") return
+
+    this.#loadingFrame = true
+    this.#fill("skeleton")
+    if (!this.dialog.open) this.dialog.showModal()
+  }
+
+  #response = (event) => {
+    if (this.#loadingFrame && !event.detail?.fetchResponse?.succeeded) this.#fail()
+  }
+
+  #loaded = () => {
+    this.#loadingFrame = false
+    this.#label()
+  }
+
+  #missing = (event) => {
+    if (!this.dialog.open) return
+    event.preventDefault()
+
+    const { response, visit } = event.detail
+    if (response.ok) {
+      this.#pendingClose = true
+      visit(response)
+    } else {
+      this.#fail()
+    }
+  }
+
+  #failed = () => {
+    if (this.dialog.open) this.#fail()
+  }
+
+  #fail() {
+    this.#loadingFrame = false
+    this.#fill("error")
+  }
+
+  #submitted = async (event) => {
+    const { success, fetchResponse, formSubmission } = event.detail
+    if (!success || !fetchResponse?.contentType?.includes("turbo-stream")) return
+
+    this.#pendingClose = true
+    this.#holdSubmitter(formSubmission?.submitter)
+
+    const html = await fetchResponse.responseHTML
+    if (this.#pendingClose && !/<turbo-stream[^>]*action="refresh"/.test(html ?? "")) this.close()
+  }
+
+  // Turbo has just re-enabled the submitter and restored its idle label. Keep it
+  // disabled, still saying "Saving…", until the dialog actually closes.
+  #holdSubmitter(submitter) {
+    if (!submitter) return
+
+    submitter.setAttribute("disabled", "")
+    const submitting = submitter.getAttribute("data-turbo-submits-with")
+    if (!submitting) return
+
+    if (submitter.matches("input")) submitter.value = submitting
+    else submitter.textContent = submitting
+  }
+
+  #beforeRender = () => {
+    if (this.#pendingClose) this.close()
+  }
+
+  #retry = (event) => {
+    if (!(event.target instanceof Element) || !event.target.closest("[data-unmagic-modal-retry]")) return
+    if (this.frame.getAttribute("src")) this.frame.reload()
+  }
+
+  #reset = (event) => {
+    if (event.target !== this.dialog) return
+
+    // close is dispatched a task after dialog.close(). If a modal link reopened
+    // the dialog in between, its load is already under way; resetting now would
+    // abort that fetch and leave the dialog open and blank.
+    if (this.dialog.open) return
+
+    this.#pendingClose = false
+    this.#loadingFrame = false
+    this.frame.removeAttribute("src")
+    this.frame.replaceChildren()
+    this.dialog.removeAttribute("aria-labelledby")
+  }
+
+  #fill(name) {
+    const template = this.dialog.querySelector(`:scope > template[data-unmagic-modal-${name}]`)
+    if (!template) return
+
+    this.frame.replaceChildren(template.content.cloneNode(true))
+    this.#label()
+  }
+
+  // Name the dialog after whatever panel title it is showing.
+  #label() {
+    const title = this.frame.querySelector(".UnmagicDialog__title[id]")
+    if (title) this.dialog.setAttribute("aria-labelledby", title.id)
+    else this.dialog.removeAttribute("aria-labelledby")
+  }
+}
+
+customElements.get("unmagic-modal") || customElements.define("unmagic-modal", UnmagicModal)