@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -1,269 +0,0 @@
-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

@@ -1,29 +0,0 @@
-@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

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

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

@@ -1,339 +0,0 @@
-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);