lostcoords-ui 0.4.1

data/app/javascript/lostcoords/ui/controllers/row_menu_controller.js

@@ -0,0 +1,83 @@
+import { FloatingPanel } from "helpers/floating_panel"
+import { focusFirstMenuItem, navigateMenu } from "helpers/menu_keys"
+
+// The phone dock's action stack lays itself out over the fixed nav, so it
+// passes lift: false and stays in place instead of lifting into the top layer.
+export default class extends FloatingPanel {
+  initialize() {
+    super.initialize()
+    this.focusOutHandler = this.handleFocusOut.bind(this)
+    this.pointerDownHandler = this.handlePointerDown.bind(this)
+    this.keydownHandler = (event) => navigateMenu(event, this.popoverTarget)
+    this.focusOutSuppressed = false
+    this.focusOutSuppressionTimer = null
+  }
+
+  disconnect() {
+    this.clearFocusOutSuppression()
+    super.disconnect()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.isOpen) return this.close()
+
+    this.open()
+    if (event.detail === 0) focusFirstMenuItem(this.popoverTarget)
+  }
+
+  toggleFromRow(event) {
+    if (this.popoverTarget.contains(event.target)) return
+    if (event.target.closest("a, button, input, select, textarea, [data-row-menu-ignore]")) return
+
+    event.preventDefault()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    super.open()
+    this.element.addEventListener("focusout", this.focusOutHandler)
+    this.element.addEventListener("pointerdown", this.pointerDownHandler)
+    this.popoverTarget.addEventListener("keydown", this.keydownHandler)
+  }
+
+  release(options) {
+    super.release(options)
+    this.element.removeEventListener("focusout", this.focusOutHandler)
+    this.element.removeEventListener("pointerdown", this.pointerDownHandler)
+    if (this.hasPopoverTarget)
+      this.popoverTarget.removeEventListener("keydown", this.keydownHandler)
+  }
+
+  handleFocusOut(event) {
+    if (this.element.contains(event.relatedTarget)) return
+
+    queueMicrotask(() => {
+      if (this.focusOutSuppressed) return
+      if (!this.element.contains(document.activeElement)) this.close()
+    })
+  }
+
+  handlePointerDown(event) {
+    if (!this.element.contains(event.target)) return
+
+    this.clearFocusOutSuppression()
+    this.focusOutSuppressed = true
+    this.focusOutSuppressionTimer = setTimeout(() => {
+      this.focusOutSuppressed = false
+      this.focusOutSuppressionTimer = null
+    }, 0)
+  }
+
+  clearFocusOutSuppression() {
+    if (this.focusOutSuppressionTimer) {
+      clearTimeout(this.focusOutSuppressionTimer)
+      this.focusOutSuppressionTimer = null
+    }
+
+    this.focusOutSuppressed = false
+  }
+}

data/app/javascript/lostcoords/ui/controllers/sheet_controller.js

@@ -0,0 +1,422 @@
+import { Controller } from "@hotwired/stimulus"
+import { holdDocumentScroll } from "helpers/dismiss_stack"
+import { SHEET_TIMING, sheetDuration } from "helpers/sheet_motion"
+import { isSheetViewport, prefersReducedMotion, TEXT_ENTRY } from "helpers/viewport"
+
+const PROJECTION_MS = 180
+const MEDIUM_FRACTION = 0.5
+const PAGE_SCALE_LOSS = 0.06
+const NO_DRAG = "input[type=range], [data-sheet-no-drag]"
+const HANDLE = "[data-sheet-target~='handle']"
+const GRABBER_ZONE = 28
+const KEYBOARD_FREE = 0.5
+
+export default class extends Controller {
+  static targets = ["handle"]
+  static values = { detents: { type: String, default: "fit" } }
+
+  connect() {
+    this.onTouchStart = this.onTouchStart.bind(this)
+    this.onTouchMove = this.onTouchMove.bind(this)
+    this.onTouchEnd = this.onTouchEnd.bind(this)
+    this.onPointerDown = this.onPointerDown.bind(this)
+    this.onPointerMove = this.onPointerMove.bind(this)
+    this.onPointerUp = this.onPointerUp.bind(this)
+
+    this.element.addEventListener("touchstart", this.onTouchStart, { passive: true })
+    this.element.addEventListener("touchmove", this.onTouchMove, { passive: false })
+    this.element.addEventListener("touchend", this.onTouchEnd)
+    this.element.addEventListener("touchcancel", this.onTouchEnd)
+    this.element.addEventListener("pointerdown", this.onPointerDown)
+
+    if (this.isDialog) {
+      this.observer = new MutationObserver(() =>
+        this.element.open ? this.present() : this.closed(),
+      )
+      this.observer.observe(this.element, { attributes: true, attributeFilter: ["open"] })
+      if (this.element.open) this.present()
+    } else {
+      this.observer = new MutationObserver(() => this.element.hidden || this.pinFloor())
+      this.observer.observe(this.element, { attributes: true, attributeFilter: ["hidden"] })
+    }
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+    this.element.removeEventListener("touchstart", this.onTouchStart)
+    this.element.removeEventListener("touchmove", this.onTouchMove)
+    this.element.removeEventListener("touchend", this.onTouchEnd)
+    this.element.removeEventListener("touchcancel", this.onTouchEnd)
+    this.element.removeEventListener("pointerdown", this.onPointerDown)
+    this.stopMouseTracking()
+    clearTimeout(this.settleTimer)
+    clearTimeout(this.transitionTimer)
+    this.releasePage()
+    this.resetSurface()
+  }
+
+  present() {
+    clearTimeout(this.settleTimer)
+    if (!this.isSheet) return
+    this.resetSurface()
+    this.pinFloor()
+    const detents = this.detents()
+    this.detent = detents[0]
+    if (detents.length > 1 || this.detent.large)
+      this.element.style.blockSize = `${this.detent.height}px`
+    this.setLargeness(this.detent.large ? 1 : 0)
+    if (this.detent.large) this.animatePage(1)
+  }
+
+  // The keyboard rises over the sheet. Safari and in-app browsers shrink the
+  // page under it, which would drag a bottom-pinned sheet up and squash it, so
+  // the sheet is placed from the top at the height the screen had when it
+  // opened (see --sheet-floor in the CSS).
+  pinFloor() {
+    if (this.isSheet) this.element.style.setProperty("--sheet-floor", `${window.innerHeight}px`)
+  }
+
+  closed() {
+    this.gesture = null
+    if (this.ownsPage) this.animatePage(0)
+    this.later(() => {
+      this.releasePage()
+      this.resetSurface()
+    })
+  }
+
+  // Touch: decide on the first move whether the gesture is the sheet's or the
+  // scroller's. A touchmove that isn't cancelled at once lets native scrolling
+  // start, and that can't be taken back.
+  onTouchStart(event) {
+    this.gesture = null
+    if (!this.isSheet || event.touches.length !== 1 || event.target.closest(NO_DRAG)) return
+    const touch = event.touches[0]
+    this.begin(touch.clientX, touch.clientY, event.timeStamp, this.scrollerFor(event.target))
+  }
+
+  onTouchMove(event) {
+    const gesture = this.gesture
+    if (!gesture) return
+    const touch = event.touches[0]
+
+    if (!gesture.dragging) {
+      const dx = touch.clientX - gesture.startX
+      const dy = touch.clientY - gesture.startY
+      if (dx === 0 && dy === 0) return
+      if (!this.claims(dx, dy, gesture.scroller)) {
+        this.gesture = null
+        return
+      }
+      this.startDrag(touch.clientY)
+    }
+
+    event.preventDefault()
+    this.track(touch.clientY, event.timeStamp)
+  }
+
+  onTouchEnd(event) {
+    if (this.gesture?.dragging) this.release()
+    else if (this.gesture && event?.type === "touchend") this.focusInPlace(event)
+    this.gesture = null
+  }
+
+  // The keyboard rises over the sheet; nothing moves to make room for it. But
+  // Safari scrolls the page to "reveal" a tapped field even when the keyboard
+  // won't cover it, dragging the sheet up and back. A field in the top half,
+  // which no keyboard reaches, is focused while shifted off-screen so there is
+  // nothing to reveal (react-aria's usePreventScroll trick). Lower fields keep
+  // the native reveal: moving is better than typing blind.
+  focusInPlace(event) {
+    const field = event.target.closest?.(TEXT_ENTRY)
+    if (!event.cancelable || !field || field === document.activeElement) return
+    if (field.getBoundingClientRect().bottom > window.innerHeight * KEYBOARD_FREE) return
+
+    event.preventDefault()
+    const transform = field.style.transform
+    field.style.transform = "translateY(-2000px)"
+    field.focus()
+    requestAnimationFrame(() => (field.style.transform = transform))
+  }
+
+  onPointerDown(event) {
+    if (!this.isSheet || event.pointerType !== "mouse" || event.button !== 0) return
+    const fromTop = event.clientY - this.element.getBoundingClientRect().top
+    if (!event.target.closest(HANDLE) && fromTop > GRABBER_ZONE) return
+
+    this.begin(event.clientX, event.clientY, event.timeStamp, null)
+    this.startDrag(event.clientY)
+    window.addEventListener("pointermove", this.onPointerMove)
+    window.addEventListener("pointerup", this.onPointerUp)
+    window.addEventListener("pointercancel", this.onPointerUp)
+  }
+
+  onPointerMove(event) {
+    if (this.gesture?.dragging) this.track(event.clientY, event.timeStamp)
+  }
+
+  onPointerUp() {
+    this.stopMouseTracking()
+    this.onTouchEnd()
+  }
+
+  stopMouseTracking() {
+    window.removeEventListener("pointermove", this.onPointerMove)
+    window.removeEventListener("pointerup", this.onPointerUp)
+    window.removeEventListener("pointercancel", this.onPointerUp)
+  }
+
+  begin(x, y, time, scroller) {
+    this.gesture = {
+      startX: x,
+      startY: y,
+      lastY: y,
+      lastT: time,
+      velocity: 0,
+      scroller,
+      dragging: false,
+    }
+  }
+
+  claims(dx, dy, scroller) {
+    if (Math.abs(dx) > Math.abs(dy)) return false
+    if (!scroller) return true
+    if (dy > 0) return scroller.scrollTop <= 0
+    const detents = this.detents()
+    return this.visibleHeight() < detents.at(-1).height - 1
+  }
+
+  startDrag(y) {
+    clearTimeout(this.settleTimer)
+    const gesture = this.gesture
+    gesture.dragging = true
+    gesture.anchorY = y
+    gesture.detents = this.detents()
+    gesture.startVisible = this.visibleHeight()
+    this.element.style.transition = "none"
+    this.element.style.willChange = "transform"
+    this.pageTransition("0s")
+
+    const field = document.activeElement
+    if (this.element.contains(field) && field.matches("input, textarea, select")) field.blur()
+  }
+
+  track(y, time) {
+    const gesture = this.gesture
+    const dt = time - gesture.lastT
+    if (dt > 0) gesture.velocity = (y - gesture.lastY) / dt
+    gesture.lastY = y
+    gesture.lastT = time
+
+    this.show(
+      this.rubberBand(gesture.startVisible - (y - gesture.anchorY), gesture.detents),
+      gesture.detents,
+    )
+  }
+
+  release() {
+    const { detents, velocity } = this.gesture
+    const projected = this.visibleHeight() - velocity * PROJECTION_MS
+
+    if (velocity >= 0 && projected < detents[0].height * 0.6) return this.dismiss()
+
+    const target = detents.reduce((best, detent) =>
+      Math.abs(detent.height - projected) < Math.abs(best.height - projected) ? detent : best,
+    )
+    this.settle(target, detents)
+  }
+
+  settle(detent, detents = this.detents()) {
+    this.detent = detent
+    this.transition()
+    this.pageTransition()
+    this.show(detent.height, detents)
+  }
+
+  dismiss() {
+    if (this.isDialog) return this.dismissDialog()
+
+    this.transition()
+    this.element.style.transform = `translateY(${this.element.getBoundingClientRect().height + 48}px)`
+    this.later(() => {
+      this.dispatch("dismiss", { bubbles: false })
+      requestAnimationFrame(() => this.resetSurface())
+    })
+  }
+
+  dismissDialog() {
+    const cancel = new Event("cancel", { cancelable: true })
+    this.element.dispatchEvent(cancel)
+    if (!cancel.defaultPrevented) this.element.close()
+
+    if (this.element.open) return this.settle(this.detent || this.detents()[0])
+
+    this.transition()
+    this.element.style.transform = ""
+  }
+
+  detents() {
+    const names = this.detentsValue.split(/\s+/)
+    const large = this.largeHeight
+    const fit = Math.min(this.fitHeight(), large)
+    const medium = Math.round(window.innerHeight * MEDIUM_FRACTION)
+
+    if (!names.includes("large")) return [{ height: fit, large: false }]
+    if (!names.includes("medium")) return [{ height: large, large: true }]
+    if (fit <= medium) return [{ height: fit, large: false }]
+    return [
+      { height: medium, large: false },
+      { height: large, large: true },
+    ]
+  }
+
+  // Between detents the sheet resizes, so a pinned footer stays on screen;
+  // below the smallest it slides down whole; past the largest it stretches
+  // against resistance — the UIKit rubber band.
+  show(visible, detents) {
+    const smallest = detents[0].height
+    const largest = detents.at(-1).height
+    const resizes = detents.length > 1 || detents[0].large
+    const style = this.element.style
+
+    if (visible < smallest) {
+      style.transform = `translateY(${smallest - visible}px)`
+      if (resizes) style.blockSize = `${smallest}px`
+    } else {
+      style.transform = ""
+      if (resizes || visible > largest) style.blockSize = `${visible}px`
+    }
+
+    if (!detents.some((detent) => detent.large)) return
+    const clamp = (n) => Math.max(0, Math.min(1, n))
+    if (detents.length > 1) {
+      const p = clamp((visible - smallest) / (largest - smallest))
+      this.setLargeness(p)
+      this.setPage(p)
+    } else {
+      this.setPage(clamp(visible / largest))
+    }
+  }
+
+  rubberBand(wanted, detents) {
+    const largest = detents.at(-1).height
+    if (wanted <= largest) return wanted
+    const room = window.innerHeight - largest + 24
+    return largest + room * (1 - 1 / ((wanted - largest) / room + 1))
+  }
+
+  // The sheet's height less however far it is slid down off its resting place.
+  visibleHeight() {
+    const transform = getComputedStyle(this.element).transform
+    const slid = transform === "none" ? 0 : new DOMMatrixReadOnly(transform).m42
+    return this.element.getBoundingClientRect().height - slid
+  }
+
+  // Only a settle's inline transition animates block-size, so only that one is
+  // paused. Touching the transition as the sheet opens would cancel its
+  // @starting-style slide-up and it would pop into place.
+  fitHeight() {
+    const style = this.element.style
+    const saved = [style.blockSize, style.transition]
+    if (saved[1]) style.transition = "none"
+    style.blockSize = "auto"
+    const height = this.element.getBoundingClientRect().height
+    ;[style.blockSize, style.transition] = saved
+    return height
+  }
+
+  get largeHeight() {
+    return parseFloat(getComputedStyle(this.element).maxBlockSize) || window.innerHeight
+  }
+
+  setLargeness(p) {
+    this.element.style.setProperty("--sheet-p", p.toFixed(3))
+  }
+
+  setPage(p) {
+    const root = document.documentElement
+    if (!this.ownsPage) {
+      if (p <= 0) return
+      this.releaseScroll = holdDocumentScroll()
+      const lockedTop = -parseFloat(document.body.style.top || "0")
+      root.style.setProperty("--sheet-page-origin", `${window.scrollY + lockedTop}px`)
+      root.dataset.sheetPage = ""
+      this.ownsPage = true
+    }
+    root.style.setProperty("--sheet-page-p", p.toFixed(3))
+    root.style.setProperty("--sheet-page-scale", (1 - PAGE_SCALE_LOSS * p).toFixed(4))
+  }
+
+  animatePage(p) {
+    this.pageTransition()
+    if (p > 0 && !this.ownsPage) {
+      this.setPage(0.001)
+      requestAnimationFrame(() => requestAnimationFrame(() => this.setPage(p)))
+    } else {
+      this.setPage(p)
+    }
+  }
+
+  releasePage() {
+    if (!this.ownsPage) return
+    this.ownsPage = false
+    const root = document.documentElement
+    delete root.dataset.sheetPage
+    for (const name of ["p", "scale", "origin", "transition"])
+      root.style.removeProperty(`--sheet-page-${name}`)
+    this.releaseScroll()
+  }
+
+  pageTransition(value = prefersReducedMotion() ? "0s" : SHEET_TIMING) {
+    if (this.ownsPage || value !== "0s")
+      document.documentElement.style.setProperty("--sheet-page-transition", value)
+  }
+
+  transition() {
+    const timing = prefersReducedMotion() ? "0s" : SHEET_TIMING
+    const discrete = this.isDialog
+      ? `, display ${timing} allow-discrete, overlay ${timing} allow-discrete`
+      : ""
+    this.element.style.transition = `transform ${timing}, block-size ${timing}${discrete}`
+    clearTimeout(this.transitionTimer)
+    this.transitionTimer = setTimeout(() => {
+      this.element.style.transition = ""
+      this.element.style.willChange = ""
+    }, sheetDuration())
+  }
+
+  later(callback) {
+    clearTimeout(this.settleTimer)
+    this.settleTimer = setTimeout(callback, sheetDuration())
+  }
+
+  resetSurface() {
+    const style = this.element.style
+    style.transition = ""
+    style.transform = ""
+    style.willChange = ""
+    style.blockSize = ""
+    style.removeProperty("--sheet-p")
+    style.removeProperty("--sheet-floor")
+  }
+
+  scrollerFor(target) {
+    for (let node = target; node; node = node.parentElement) {
+      if (
+        node.scrollHeight > node.clientHeight + 1 &&
+        /auto|scroll/.test(getComputedStyle(node).overflowY)
+      )
+        return node
+      if (node === this.element) return null
+    }
+    return null
+  }
+
+  get isDialog() {
+    return this.element instanceof HTMLDialogElement
+  }
+
+  get isSheet() {
+    return isSheetViewport()
+  }
+}

data/app/javascript/lostcoords/ui/controllers/toast_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus"
+import { prefersReducedMotion } from "helpers/viewport"
+
+export default class extends Controller {
+  static values = { timeout: { type: Number, default: 4000 } }
+
+  connect() {
+    for (const sibling of this.element.parentElement?.children || []) {
+      if (sibling === this.element) continue
+      this.application.getControllerForElementAndIdentifier(sibling, "toast")?.dismiss()
+    }
+
+    this.startedAt = performance.now()
+    this.remaining = this.timeoutValue
+    this.schedule(this.remaining)
+
+    this.pause = () => this.pauseTimer()
+    this.resume = () => this.resumeTimer()
+
+    this.element.addEventListener("mouseenter", this.pause)
+    this.element.addEventListener("mouseleave", this.resume)
+    this.element.addEventListener("focusin", this.pause)
+    this.element.addEventListener("focusout", this.resume)
+  }
+
+  disconnect() {
+    clearTimeout(this.timer)
+    clearTimeout(this.removeTimer)
+    this.element.removeEventListener("mouseenter", this.pause)
+    this.element.removeEventListener("mouseleave", this.resume)
+    this.element.removeEventListener("focusin", this.pause)
+    this.element.removeEventListener("focusout", this.resume)
+  }
+
+  schedule(ms) {
+    if (this.timeoutValue === 0) return
+    if (this.timer) clearTimeout(this.timer)
+    this.startedAt = performance.now()
+    this.timer = setTimeout(() => this.dismiss(), ms)
+  }
+
+  pauseTimer() {
+    if (!this.timer) return
+    clearTimeout(this.timer)
+    this.timer = null
+    const elapsed = performance.now() - this.startedAt
+    this.remaining = Math.max(0, this.remaining - elapsed)
+  }
+
+  resumeTimer() {
+    if (this.timer) return
+    this.schedule(this.remaining)
+  }
+
+  dismiss() {
+    if (this.element.hasAttribute("data-leaving")) return
+    if (this.timer) clearTimeout(this.timer)
+    this.element.dataset.leaving = ""
+
+    const reduced = prefersReducedMotion()
+    if (reduced) {
+      this.element.remove()
+      return
+    }
+
+    this.element.addEventListener("transitionend", () => this.element.remove(), { once: true })
+    this.removeTimer = setTimeout(() => this.element.isConnected && this.element.remove(), 400)
+  }
+}

data/app/javascript/lostcoords/ui/controllers/ui_copy_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["button", "status"]
+  static values = { value: String, source: String, resetAfter: Number }
+
+  connect() {
+    this.reset()
+  }
+
+  disconnect() {
+    clearTimeout(this.resetTimer)
+    this.request = null
+  }
+
+  async copy() {
+    if (this.request || this.buttonTarget.disabled) return
+
+    clearTimeout(this.resetTimer)
+    this.reset()
+    const request = Symbol()
+    this.request = request
+    this.buttonTarget.setAttribute("aria-busy", "true")
+
+    try {
+      let text = this.valueValue
+      if (this.hasSourceValue) {
+        const source = document.getElementById(this.sourceValue)
+        if (!source) throw new Error("Copy source not found")
+        text = source.matches("input, textarea") ? source.value : source.textContent
+      }
+      await navigator.clipboard.writeText(text)
+      if (this.request !== request) return
+      this.element.dataset.state = "copied"
+      this.statusTarget.textContent = this.statusTarget.dataset.copied
+      this.dispatch("copied", { detail: { text } })
+    } catch (error) {
+      if (this.request !== request) return
+      this.element.dataset.state = "error"
+      this.statusTarget.textContent = this.statusTarget.dataset.error
+      this.dispatch("error", { detail: { error } })
+    } finally {
+      if (this.request === request) {
+        this.request = null
+        this.buttonTarget.removeAttribute("aria-busy")
+        this.resetTimer = setTimeout(() => this.reset(), this.resetAfterValue)
+      }
+    }
+  }
+
+  reset() {
+    this.element.dataset.state = "idle"
+    this.statusTarget.textContent = ""
+    this.buttonTarget.removeAttribute("aria-busy")
+  }
+}

data/app/javascript/lostcoords/ui/controllers/ui_popover_controller.js

@@ -0,0 +1,17 @@
+import { FloatingPanel } from "helpers/floating_panel"
+
+export default class extends FloatingPanel {
+  toggle(event) {
+    super.toggle(event)
+    if (this.isOpen && event.detail === 0) {
+      const selected = this.popoverTarget.querySelector(
+        'input[type="radio"]:checked:not(:disabled)',
+      )
+      const first = this.popoverTarget.querySelector(
+        'button:not(:disabled), input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]:not(input[type="hidden"])',
+      )
+      const target = selected || first || this.popoverTarget
+      target.focus({ preventScroll: true })
+    }
+  }
+}