@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/scroll-velocity/index.ts

@@ -0,0 +1,269 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Row = Attributes & {
+    // Called once per copy since a node can only be mounted in one place.
+    content: string | (() => Renderable<unknown>);
+    direction?: 1 | -1;
+    // Scrolling speeds the row up and flips it with the scroll direction; off keeps a steady drift.
+    reactivity?: boolean;
+    // Percent of one copy's width travelled per second.
+    velocity?: number;
+};
+
+type Tracker = {
+    // Smoothed velocity mapped to a speed boost: signed, capped at MAX_FACTOR.
+    factor: number;
+    // Last raw scroll sample.
+    position: number;
+    release: VoidFunction;
+    // Spring state: the smoothed velocity and its rate of change.
+    smooth: number;
+    smoothRate: number;
+    // Frame the spring last advanced on, so rows sharing a tracker step it once.
+    stepped: number;
+    time: number;
+    users: number;
+    // Raw velocity in px/s from the last two scroll events.
+    velocity: number;
+};
+
+
+// Spring that smooths raw scroll velocity, so the rows ease into and out of a burst instead of jumping.
+const DAMPING = 50;
+
+const MAX_FACTOR = 5;
+
+const MIN_COPIES = 3;
+
+// Scroll events stop arriving when scrolling stops, so a quiet gap this long means the velocity is zero.
+const SETTLE = 50;
+
+const STIFFNESS = 400;
+
+// Sub-step for the spring; a stiff spring stepped once per slow frame would overshoot and blow up.
+const SUBSTEP = 1 / 240;
+
+
+let trackers = new Map<EventTarget, Tracker>();
+
+
+function offset(scroller: EventTarget) {
+    return scroller instanceof Element ? scroller.scrollTop : window.scrollY;
+}
+
+// The nearest ancestor that scrolls vertically, else the window.
+function scroller(element: HTMLElement): EventTarget {
+    let node = element.parentElement;
+
+    while (node && node !== document.body && node !== document.documentElement) {
+        let overflow = getComputedStyle(node).overflowY;
+
+        if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {
+            return node;
+        }
+
+        node = node.parentElement;
+    }
+
+    // Pages that scroll the body instead of the root report scroll position through the body.
+    let overflow = getComputedStyle(document.body).overflowY;
+
+    if (overflow === 'auto' || overflow === 'scroll') {
+        return document.body;
+    }
+
+    return window;
+}
+
+function step(t: Tracker, now: number, dt: number) {
+    if (t.stepped === now) {
+        return;
+    }
+
+    let target = now - t.time > SETTLE ? 0 : t.velocity;
+
+    t.stepped = now;
+
+    for (let remaining = dt; remaining > 0; remaining -= SUBSTEP) {
+        let h = Math.min(remaining, SUBSTEP);
+
+        t.smoothRate += (STIFFNESS * (target - t.smooth) - DAMPING * t.smoothRate) * h;
+        t.smooth += t.smoothRate * h;
+    }
+
+    t.factor = Math.sign(t.smooth) * Math.min(MAX_FACTOR, (Math.abs(t.smooth) / 1000) * MAX_FACTOR);
+}
+
+// Every row on one scroller shares a tracker, so rows stay in step however many there are.
+function track(target: EventTarget) {
+    let existing = trackers.get(target);
+
+    if (existing) {
+        existing.users++;
+        return existing;
+    }
+
+    let t: Tracker = {
+            factor: 0,
+            position: offset(target),
+            release: () => {
+                if (--t.users > 0) {
+                    return;
+                }
+
+                target.removeEventListener('scroll', scroll);
+                trackers.delete(target);
+            },
+            smooth: 0,
+            smoothRate: 0,
+            stepped: 0,
+            time: 0,
+            users: 1,
+            velocity: 0
+        };
+
+    function scroll() {
+        let now = performance.now(),
+            position = offset(target),
+            dt = now - t.time;
+
+        // A first event after a long pause has no meaningful interval, so it only records the position.
+        t.velocity = dt > 0 && dt < 200 ? ((position - t.position) / dt) * 1000 : 0;
+        t.position = position;
+        t.time = now;
+    }
+
+    target.addEventListener('scroll', scroll, { passive: true });
+    trackers.set(target, t);
+
+    return t;
+}
+
+function wrap(max: number, value: number) {
+    return ((value % max) + max) % max;
+}
+
+
+function row({ content, direction = 1, reactivity = true, velocity = 5, ...attributes }: Row) {
+    let base = direction >= 0 ? 1 : -1,
+        copies = reactive([0]),
+        current = base,
+        frame = 0,
+        intersection: IntersectionObserver | undefined,
+        media: MediaQueryList | undefined,
+        resize: ResizeObserver | undefined,
+        tracker: Tracker | undefined,
+        visible = true,
+        width = 0,
+        x = 0;
+
+    function render() {
+        return typeof content === 'function' ? content() : content;
+    }
+
+    return html`
+        <div
+            class='scroll-velocity-row'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    let strip = element.firstElementChild as HTMLElement,
+                        time = performance.now();
+
+                    media = matchMedia('(prefers-reduced-motion: reduce)');
+                    tracker = track(scroller(element));
+
+                    function measure() {
+                        let block = strip.firstElementChild as HTMLElement | null;
+
+                        width = block ? block.getBoundingClientRect().width : 0;
+
+                        let next = width > 0 ? Math.max(MIN_COPIES, Math.ceil(element.offsetWidth / width) + 2) : 1;
+
+                        while (copies.length < next) {
+                            copies.push(copies.length);
+                        }
+
+                        if (copies.length > next) {
+                            copies.splice(next);
+                        }
+                    }
+
+                    function tick(now: number) {
+                        let dt = Math.min(0.1, (now - time) / 1000);
+
+                        time = now;
+                        frame = requestAnimationFrame(tick);
+
+                        if (!visible || document.hidden || media!.matches || width <= 0 || !tracker) {
+                            return;
+                        }
+
+                        let factor = 0;
+
+                        if (reactivity) {
+                            step(tracker, now, dt);
+                            factor = tracker.factor;
+                        }
+
+                        let magnitude = Math.min(MAX_FACTOR, Math.abs(factor));
+
+                        if (magnitude > 0.1) {
+                            current = base * (factor >= 0 ? 1 : -1);
+                        }
+
+                        x += current * ((width * velocity) / 100) * (1 + magnitude) * dt;
+                        strip.style.transform = `translate3d(${-wrap(width, x)}px, 0, 0)`;
+                    }
+
+                    intersection = new IntersectionObserver((entries) => {
+                        visible = entries[entries.length - 1].isIntersecting;
+                    });
+                    resize = new ResizeObserver(measure);
+
+                    intersection.observe(element);
+                    resize.observe(element);
+
+                    // The first copy is never removed, so its size (fonts loading, content changing) drives the loop.
+                    if (strip.firstElementChild) {
+                        resize.observe(strip.firstElementChild);
+                    }
+
+                    measure();
+                    frame = requestAnimationFrame(tick);
+                },
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+
+                    intersection?.disconnect();
+                    resize?.disconnect();
+                    tracker?.release();
+                    tracker = undefined;
+                }
+            }}
+        >
+            <div class='scroll-velocity-strip'>
+                ${html.reactive(copies, (copy) => html`
+                    <div aria-hidden='${copy !== 0 && 'true'}' class='scroll-velocity-block'>${render()}</div>
+                `)}
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(
+    component<Attributes>(
+        function(this, attributes, content) {
+            return html`
+                <div class='scroll-velocity' ${this?.attributes} ${attributes}>
+                    ${content}
+                </div>
+            `;
+        }
+    ),
+    { row }
+);

package/src/components/scroll-velocity/scss/index.scss

@@ -0,0 +1,29 @@
+@use 'variables';
+
+.scroll-velocity {
+    position: relative;
+    width: 100%;
+
+    &-block {
+        align-items: center;
+        display: inline-flex;
+        flex-shrink: 0;
+        // Padding rather than a gap between copies, so one copy's measured width is exactly one loop.
+        padding-inline-end: var(--gap, 0.25em);
+    }
+
+    &-row {
+        overflow: hidden;
+        white-space: nowrap;
+        width: 100%;
+    }
+
+    // Root transitions transform on every element; that would lag each frame and smear the loop wrap.
+    &-strip {
+        align-items: center;
+        display: inline-flex;
+        transition: none;
+        user-select: none;
+        will-change: transform;
+    }
+}

package/src/components/scroll-velocity/scss/variables.scss

@@ -0,0 +1,3 @@
+.scroll-velocity {
+    --gap: 0.25em;
+}

package/src/components/scrub-input/index.ts

@@ -0,0 +1,339 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [SCRUB_INPUT_FIELD]?: Field;
+    [SCRUB_INPUT_LABEL]?: Attributes;
+    label: string;
+    // Browsers announce pointer lock with a banner, which is too loud for a quick nudge but worth it for long scrubs.
+    lockPointer?: boolean;
+    max?: number;
+    min?: number;
+    pixelsPerStep?: number;
+    precision?: number;
+    state?: State;
+    step?: number;
+    suffix?: string;
+    value?: number;
+};
+
+type D = Attributes & Pick<A, typeof SCRUB_INPUT_FIELD | typeof SCRUB_INPUT_LABEL>;
+
+type Field = Parameters<typeof input>[0];
+
+type Scrub = {
+    id: number;
+    lastX: number;
+    moved: boolean;
+    // Unrounded running value, so slow fine drags accumulate instead of rounding every sub-step away.
+    raw: number;
+    sent: number;
+    start: number;
+    startX: number;
+};
+
+type State = {
+    active: boolean;
+    error: string;
+    value: number;
+};
+
+
+// Below this the press is a click on the label (which focuses the field), not the start of a scrub.
+const DRAG_THRESHOLD = 3;
+
+const SCRUB_INPUT_FIELD = Symbol.for('@esportsplus/ui/scrub-input.field');
+
+const SCRUB_INPUT_LABEL = Symbol.for('@esportsplus/ui/scrub-input.label');
+
+// Spacing of the tape's minor ticks; majors land every fifth.
+const TICK = 6;
+
+
+function decimals(n: number) {
+    let s = String(n),
+        dot = s.indexOf('.');
+
+    return dot < 0 ? 0 : s.length - dot - 1;
+}
+
+// Shift is a coarse gear, Alt/Option a fine one, like Figma.
+function gear(e: { altKey: boolean, shiftKey: boolean }) {
+    return e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
+}
+
+
+export default Object.assign(
+    component(function(
+        this: { attributes?: D } | void,
+        {
+            label,
+            lockPointer = false,
+            max = Infinity,
+            min = -Infinity,
+            pixelsPerStep = 1,
+            step = 1,
+            precision = decimals(step) + 1,
+            suffix = '',
+            value = 0,
+            state = reactive({ active: false, error: '', value }),
+            ...attributes
+        }: A,
+        content: Renderable<unknown>
+    ) {
+        let local = reactive({ draft: null as string | null, scrubbing: false }),
+            period = TICK * 5,
+            scrub: Scrub | null = null,
+            skip = false,
+            suppress = false;
+
+        function clamp(n: number) {
+            return Math.min(Math.max(n, min), max);
+        }
+
+        function commit() {
+            if (local.draft === null) {
+                return state.value;
+            }
+
+            let next = parse(local.draft);
+
+            if (next !== null && next !== state.value) {
+                state.value = next;
+            }
+
+            return next ?? state.value;
+        }
+
+        function end() {
+            if (document.pointerLockElement) {
+                document.exitPointerLock();
+            }
+
+            document.documentElement.style.removeProperty('cursor');
+            suppress = scrub?.moved ?? false;
+            scrub = null;
+            local.scrubbing = false;
+        }
+
+        function format(n: number) {
+            return `${round(n)}${suffix}`;
+        }
+
+        function parse(text: string) {
+            let trimmed = (suffix ? text.replace(suffix, '') : text).trim(),
+                n = Number(trimmed);
+
+            return trimmed === '' || Number.isNaN(n) ? null : clamp(round(n));
+        }
+
+        function round(n: number) {
+            return Number(n.toFixed(precision));
+        }
+
+        // Written straight to the field so the selection lands on the new text rather than waiting a frame.
+        function show(field: HTMLInputElement, text: string) {
+            local.draft = text;
+            field.value = text;
+            field.select();
+        }
+
+        return html`
+            <div
+                class='scrub-input'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    class: () => local.scrubbing && '--active',
+                    ondisconnect: () => {
+                        if (scrub) {
+                            end();
+                        }
+                    },
+                    ondocumentkeydown: (e: KeyboardEvent) => {
+                        if (e.key !== 'Escape' || !scrub) {
+                            return;
+                        }
+
+                        state.value = scrub.start;
+                        end();
+                    }
+                }}
+            >
+                <span aria-hidden='true' class='scrub-input-tape'>
+                    <span
+                        class='scrub-input-ticks'
+                        style=${() => {
+                            // The pattern repeats every major tick, so only the remainder matters, which also keeps huge values precise.
+                            let offset = ((((state.value / step) * pixelsPerStep) % period) + period) % period;
+
+                            return `--offset: ${offset}px`;
+                        }}
+                    ></span>
+                    <span class='scrub-input-needle'></span>
+                </span>
+                <span
+                    class='scrub-input-label'
+                    ${this?.attributes?.[SCRUB_INPUT_LABEL]}
+                    ${attributes[SCRUB_INPUT_LABEL]}
+                    ${{
+                        onclick: (e: MouseEvent) => {
+                            let s = suppress;
+
+                            suppress = false;
+
+                            // The click that ends a scrub shouldn't also drop you into typing.
+                            if (s) {
+                                return;
+                            }
+
+                            (e.currentTarget as HTMLElement).parentElement?.querySelector<HTMLInputElement>('.scrub-input-field')?.focus();
+                        },
+                        onlostpointercapture: (e: PointerEvent) => {
+                            if (scrub?.id === e.pointerId) {
+                                end();
+                            }
+                        },
+                        onpointercancel: (e: PointerEvent) => {
+                            if (scrub?.id === e.pointerId) {
+                                end();
+                            }
+                        },
+                        onpointerdown: (e: PointerEvent) => {
+                            // Ignores a second finger rather than letting it hijack the drag.
+                            if (e.button !== 0 || scrub) {
+                                return;
+                            }
+
+                            e.preventDefault();
+
+                            let element = e.currentTarget as HTMLElement,
+                                field = element.parentElement?.querySelector<HTMLInputElement>('.scrub-input-field'),
+                                start = state.value;
+
+                            if (field && document.activeElement === field) {
+                                start = commit();
+                                skip = true;
+                                field.blur();
+                            }
+
+                            element.setPointerCapture(e.pointerId);
+                            scrub = {
+                                id: e.pointerId,
+                                lastX: e.clientX,
+                                moved: false,
+                                raw: start,
+                                sent: start,
+                                start,
+                                startX: e.clientX
+                            };
+                        },
+                        onpointermove: (e: PointerEvent) => {
+                            let s = scrub;
+
+                            if (!s || e.pointerId !== s.id) {
+                                return;
+                            }
+
+                            let element = e.currentTarget as HTMLElement;
+
+                            if (!s.moved) {
+                                if (Math.abs(e.clientX - s.startX) < DRAG_THRESHOLD) {
+                                    return;
+                                }
+
+                                s.moved = true;
+                                local.scrubbing = true;
+                                // Keeps the resize cursor once the pointer leaves the label.
+                                document.documentElement.style.cursor = 'ew-resize';
+
+                                if (lockPointer && e.pointerType === 'mouse') {
+                                    // Refused locks reject (or return nothing); the captured pointer keeps scrubbing either way.
+                                    Promise.resolve(element.requestPointerLock?.()).catch(() => {});
+                                }
+                            }
+
+                            // A locked pointer stays put, so only movementX reports travel.
+                            let dx = document.pointerLockElement === element ? e.movementX : e.clientX - s.lastX;
+
+                            s.lastX = e.clientX;
+                            s.raw = clamp(s.raw + (dx / pixelsPerStep) * step * gear(e));
+
+                            let next = round(s.raw);
+
+                            if (next === s.sent) {
+                                return;
+                            }
+
+                            s.sent = next;
+                            state.value = next;
+                        },
+                        onpointerup: (e: PointerEvent) => {
+                            if (scrub?.id === e.pointerId) {
+                                end();
+                            }
+                        }
+                    }}
+                >
+                    ${content}
+                </span>
+                ${input.call({ attributes: { ...this?.attributes?.[SCRUB_INPUT_FIELD], ...attributes[SCRUB_INPUT_FIELD] } }, {
+                    'aria-label': label,
+                    'aria-valuemax': Number.isFinite(max) ? max : undefined,
+                    'aria-valuemin': Number.isFinite(min) ? min : undefined,
+                    'aria-valuenow': () => state.value,
+                    'aria-valuetext': () => format(state.value),
+                    autocomplete: 'off',
+                    class: 'scrub-input-field',
+                    inputmode: 'decimal',
+                    onblur: () => {
+                        if (!skip) {
+                            commit();
+                        }
+
+                        skip = false;
+                        local.draft = null;
+                    },
+                    onfocus: (e: FocusEvent) => {
+                        show(e.currentTarget as HTMLInputElement, format(state.value));
+                    },
+                    oninput: (e: Event) => {
+                        local.draft = (e.currentTarget as HTMLInputElement).value;
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        let field = e.currentTarget as HTMLInputElement;
+
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            // Stays in the field with the result selected, so the next edit is one keystroke away.
+                            show(field, format(commit()));
+                        }
+                        else if (e.key === 'Escape') {
+                            skip = true;
+                            field.blur();
+                        }
+                        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                            e.preventDefault();
+
+                            let base = local.draft === null ? state.value : (parse(local.draft) ?? state.value),
+                                next = clamp(round(base + (e.key === 'ArrowUp' ? step : -step) * gear(e)));
+
+                            if (next !== state.value) {
+                                state.value = next;
+                            }
+
+                            show(field, format(next));
+                        }
+                    },
+                    role: 'spinbutton',
+                    spellcheck: false,
+                    state,
+                    value: () => local.draft ?? format(state.value)
+                })}
+            </div>
+        `;
+    }
+), { field: SCRUB_INPUT_FIELD, label: SCRUB_INPUT_LABEL } as const);