| const IDLE_DELAY = 7_000; |
| const TRAIL_DURATION = 6_500; |
|
|
| export function createIdlePaws(element, getArea) { |
| const layer = document.createElement('div'); |
| layer.className = 'terminal-paws'; layer.hidden = true; |
| layer.setAttribute('aria-hidden', 'true'); |
| for (let i = 0; i < 6; i++) layer.append(document.createElement('i')); |
| element.append(layer); |
| const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)'); |
| const listeners = new AbortController(); |
| let enabled = false, visible = false, disposed = false; |
| let timer = 0, trailTimer = 0, wakeAt = 0, nextAt = 0; |
|
|
| function canRun() { |
| return enabled && visible && !disposed && !document.hidden && document.hasFocus() |
| && !reducedMotion.matches && !document.querySelector('dialog[open]'); |
| } |
| function hide() { |
| clearTimeout(trailTimer); trailTimer = 0; |
| if (!layer.hidden) layer.hidden = true; |
| } |
| function schedule() { |
| if (!canRun()) { clearTimeout(timer); timer = 0; return; } |
| |
| if (timer && wakeAt <= nextAt) return; |
| clearTimeout(timer); wakeAt = nextAt; |
| timer = setTimeout(tick, Math.max(0, nextAt - Date.now())); |
| } |
| function reset() { |
| hide(); nextAt = Date.now() + IDLE_DELAY; schedule(); |
| } |
| function tick() { |
| timer = 0; |
| if (!canRun()) return; |
| if (Date.now() < nextAt) { schedule(); return; } |
| const area = getArea(); |
| if (area && area.width >= 220 && area.height >= 180) { |
| Object.assign(layer.style, { |
| left: `${area.left}px`, top: `${area.top}px`, |
| width: `${area.width}px`, height: `${area.height}px`, |
| }); |
| layer.style.setProperty('--trail-shift', `${Math.random() * 10}%`); |
| layer.hidden = false; |
| trailTimer = setTimeout(hide, TRAIL_DURATION); |
| } |
| nextAt = Date.now() + TRAIL_DURATION + 45_000 + Math.random() * 15_000; |
| schedule(); |
| } |
| const options = { passive: true, capture: true, signal: listeners.signal }; |
| for (const event of ['pointerdown', 'keydown', 'input', 'wheel', 'scroll', 'touchstart', 'touchmove', 'focusin']) { |
| document.addEventListener(event, reset, options); |
| } |
| document.addEventListener('visibilitychange', reset, options); |
| window.addEventListener('blur', reset, options); |
| window.addEventListener('focus', reset, options); |
| reducedMotion.addEventListener('change', reset, options); |
| const dialogs = new MutationObserver(reset); |
| for (const dialog of document.querySelectorAll('dialog')) dialogs.observe(dialog, { attributes: true, attributeFilter: ['open'] }); |
| const visibility = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; reset(); }); |
| visibility.observe(element); |
|
|
| return { |
| reset, |
| setEnabled(value) { if (value !== enabled) { enabled = value; reset(); } }, |
| dispose() { |
| disposed = true; hide(); clearTimeout(timer); |
| listeners.abort(); dialogs.disconnect(); visibility.disconnect(); layer.remove(); |
| }, |
| }; |
| } |
|
|
