26 lines
989 B
JavaScript
26 lines
989 B
JavaScript
import { $, h } from './dom.js';
|
|
|
|
const DURATION_MS = 6000;
|
|
const MAX_VISIBLE = 3; // a big jump (import, long absence) must not bury the page in messages
|
|
|
|
/**
|
|
* Show a message for a few seconds.
|
|
* `sticky` messages are important: they stay until clicked, and routine messages never push them away.
|
|
*/
|
|
export function showToast(message, { error = false, sticky = false } = {}) {
|
|
const container = $('#toasts');
|
|
const classes = ['toast', error && 'toast--error', sticky && 'toast--sticky'].filter(Boolean);
|
|
const toast = h('p', { class: classes.join(' '), text: message });
|
|
|
|
if (sticky) {
|
|
toast.setAttribute('role', 'alert');
|
|
toast.addEventListener('click', () => toast.remove());
|
|
} else {
|
|
setTimeout(() => toast.remove(), DURATION_MS);
|
|
}
|
|
container.append(toast);
|
|
|
|
const routine = [...container.children].filter((el) => !el.classList.contains('toast--sticky'));
|
|
for (const old of routine.slice(0, Math.max(0, routine.length - MAX_VISIBLE))) old.remove();
|
|
}
|