Andreas Reinhold / reiniandClaude Opus 5
648ad8efaf
tests / lint (push) Successful in 1m3s
tests / feature (8.4) (push) Failing after 1m5s
tests / feature (8.5) (push) Failing after 1m4s
tests / browser (chrome, chromium) (push) Failing after 1m5s
tests / browser (firefox, firefox) (push) Failing after 1m1s
tests / browser (safari, webkit) (push) Failing after 1m1s
<x-toast> hosts the snackbar queue for the Toasts concern and window.materialToast(), one at a time, paused on hover and focus, with an optional action; it listens from the moment its script loads, so a toast dispatched before Alpine starts is shown rather than lost. <x-badge> is M3's dot and count, plus a tonal or outlined status label; <x-rich-tooltip> is transient or persistent; <x-alert>, <x-stat> and <x-empty-state> are built from M3's parts. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
/**
|
|
* `materialSnackbar`: the queue behind `<x-toast>`, and `window.materialToast()`.
|
|
*
|
|
* One snackbar at a time, as M3 shows them. Each waits its turn, stays for its timeout (paused
|
|
* while hovered or focused, so it is never pulled away from someone reading or reaching for its
|
|
* action) and is replaced by the next.
|
|
*/
|
|
const DEFAULT_TIMEOUT_MS = 4000
|
|
|
|
let sequence = 0
|
|
|
|
// The listener lives here, not on the Alpine component: a toast dispatched before Alpine has
|
|
// started (on page load, straight after a redirect) would otherwise be lost. Until a host
|
|
// registers, toasts wait in `pending`.
|
|
let host = null
|
|
const pending = []
|
|
|
|
window.addEventListener('toast', (event) => (host ? host.add(event.detail) : pending.push(event.detail)))
|
|
|
|
window.materialToast = (title, options = {}) => {
|
|
window.dispatchEvent(new CustomEvent('toast', { detail: { title, ...options } }))
|
|
}
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
window.Alpine.data('materialSnackbar', () => ({
|
|
queue: [],
|
|
current: null,
|
|
timer: null,
|
|
remaining: 0,
|
|
startedAt: 0,
|
|
|
|
init() {
|
|
host = this
|
|
pending.splice(0).forEach((detail) => this.add(detail))
|
|
},
|
|
|
|
destroy() {
|
|
if (host === this) {
|
|
host = null
|
|
}
|
|
},
|
|
|
|
add(detail) {
|
|
// Livewire dispatches named arguments as the detail object; a positional dispatch
|
|
// arrives as an array whose first entry is that object.
|
|
const toast = Array.isArray(detail) ? detail[0] : detail
|
|
|
|
this.queue.push({
|
|
id: ++sequence,
|
|
type: toast.type ?? null,
|
|
title: toast.title ?? '',
|
|
description: toast.description ?? null,
|
|
timeout: toast.timeout === 0 || toast.timeout === null ? 0 : (toast.timeout ?? DEFAULT_TIMEOUT_MS),
|
|
action: toast.action ?? null,
|
|
})
|
|
|
|
if (!this.current) {
|
|
this.next()
|
|
}
|
|
},
|
|
|
|
next() {
|
|
clearTimeout(this.timer)
|
|
this.current = this.queue.shift() ?? null
|
|
|
|
if (this.current?.timeout) {
|
|
this.remaining = this.current.timeout
|
|
this.resume()
|
|
}
|
|
},
|
|
|
|
pause() {
|
|
if (!this.current?.timeout || !this.timer) {
|
|
return
|
|
}
|
|
|
|
clearTimeout(this.timer)
|
|
this.timer = null
|
|
this.remaining -= performance.now() - this.startedAt
|
|
},
|
|
|
|
resume() {
|
|
if (!this.current?.timeout || this.timer) {
|
|
return
|
|
}
|
|
|
|
this.startedAt = performance.now()
|
|
this.timer = setTimeout(() => {
|
|
this.timer = null
|
|
this.next()
|
|
}, Math.max(this.remaining, 0))
|
|
},
|
|
|
|
dismiss() {
|
|
this.timer = null
|
|
this.next()
|
|
},
|
|
|
|
act() {
|
|
this.current?.action?.handler?.()
|
|
this.dismiss()
|
|
},
|
|
|
|
icon(type) {
|
|
return ['success', 'error', 'warning', 'info'].includes(type)
|
|
},
|
|
}))
|
|
})
|