@esportsplus/ui 0.56.3 → 0.57.0

package/src/shared/anchor.ts

@@ -0,0 +1,34 @@
+// The anchor placements ('n' top center, 'ne' top right, ...) an element can be pinned by, as the signs of the edges
+// each touches. Their stylesheet half is 'shared/scss/anchor'.
+
+
+type Edge = {
+    x: -1 | 0 | 1;
+    y: -1 | 0 | 1;
+};
+
+
+const EDGES: Record<string, Edge> = {
+    e: { x: 1, y: 0 },
+    n: { x: 0, y: -1 },
+    ne: { x: 1, y: -1 },
+    nw: { x: -1, y: -1 },
+    s: { x: 0, y: 1 },
+    se: { x: 1, y: 1 },
+    sw: { x: -1, y: 1 },
+    w: { x: -1, y: 0 }
+};
+
+
+// The placement modifier ('<block>--n', '<block>--ne', ...) the element carries; undefined when it carries none.
+const edge = (element: Element, block: string): Edge | undefined => {
+    for (let key in EDGES) {
+        if (element.classList.contains(`${block}--${key}`)) {
+            return EDGES[key];
+        }
+    }
+};
+
+
+export { edge };
+export type { Edge };

package/src/shared/animation.ts

@@ -0,0 +1,106 @@
+// An element's box before a layout change, and the slide carrying it from there.
+type Sliding = Element & { [FROM]?: DOMRect; [SLIDE]?: Animation };
+
+
+const FROM = Symbol();
+
+const SLIDE = Symbol();
+
+
+// Settles once every finite animation on the element has, however each ended: a rejection only means the animation
+// stopped running (reopening mid-close, say). Looping decoration must not keep a closing dialog modal forever.
+// Every 'finished' is taken up front, since cancelling one replaces it with a promise that never settles.
+const finished = (element: HTMLElement, options?: GetAnimationsOptions) => {
+    let animations = element.getAnimations(options),
+        pending: Promise<Animation>[] = [];
+
+    for (let i = 0, n = animations.length; i < n; i++) {
+        if (animations[i].effect?.getComputedTiming().endTime !== Infinity) {
+            pending.push(animations[i].finished);
+        }
+    }
+
+    return Promise.allSettled(pending);
+};
+
+// Records where each element is drawn now, a slide still running included, ahead of a change to the layout.
+const measure = (elements: Iterable<Element>) => {
+    for (let element of elements) {
+        (element as Sliding)[FROM] = element.getBoundingClientRect();
+    }
+};
+
+// A CSS time ('0.2s', '150ms') in milliseconds; 0 for anything else.
+const ms = (value: string) => {
+    let n = parseFloat(value);
+
+    return isNaN(n) ? 0 : value.trim().endsWith('ms') ? n : n * 1000;
+};
+
+// Slides each element from the box 'measure' recorded to where the change put it, replacing a slide still running on
+// it, and returns every element's new box. An element 'measure' never saw is new to the layout: it doesn't slide, and
+// 'enter' hears it once every slide has started. Added onto its translate, so a shake or nudge of its own still plays.
+// Every slide is cancelled, then every box read, then every slide started: a read between two starts would
+// recalculate styles once per element.
+const slides = <T extends Element>(elements: ArrayLike<T>, timing: KeyframeAnimationOptions | null, enter?: (element: T) => void) => {
+    let froms: (DOMRect | undefined)[] = [],
+        n = elements.length,
+        options: KeyframeAnimationOptions | null = timing && { ...timing, composite: 'add' },
+        tos: DOMRect[] = [];
+
+    for (let i = 0; i < n; i++) {
+        let element: Sliding = elements[i],
+            from = element[FROM];
+
+        element[FROM] = undefined;
+        froms.push(from);
+
+        if (from) {
+            element[SLIDE]?.cancel();
+        }
+    }
+
+    for (let i = 0; i < n; i++) {
+        tos.push(elements[i].getBoundingClientRect());
+    }
+
+    for (let i = 0; i < n; i++) {
+        let from = froms[i],
+            to = tos[i];
+
+        if (!from || !options) {
+            continue;
+        }
+
+        let x = from.left - to.left,
+            y = from.top - to.top;
+
+        if (Math.abs(x) >= 0.5 || Math.abs(y) >= 0.5) {
+            (elements[i] as Sliding)[SLIDE] = elements[i].animate(
+                [{ translate: `${x}px ${y}px` }, { translate: '0px 0px' }],
+                options
+            );
+        }
+    }
+
+    if (enter) {
+        for (let i = 0; i < n; i++) {
+            if (!froms[i]) {
+                enter(elements[i]);
+            }
+        }
+    }
+
+    return tos;
+};
+
+// A slide's timing from the CSS variables '--{name}-duration' and '--{name}-easing'; null without a duration, so
+// reduced motion is a CSS rule.
+const timing = (computed: CSSStyleDeclaration, name: string): KeyframeAnimationOptions | null => {
+    let duration = ms(computed.getPropertyValue(`--${name}-duration`));
+
+    return duration ? { duration, easing: computed.getPropertyValue(`--${name}-easing`).trim() || 'ease' } : null;
+};
+
+
+export { finished, measure, ms, slides, timing };

package/src/shared/clamp.ts

@@ -0,0 +1,6 @@
+const clamp = (value: number, min: number, max: number) => {
+    return Math.min(Math.max(value, min), max);
+};
+
+
+export { clamp };

package/src/shared/deadline.ts

@@ -0,0 +1,153 @@
+type Entry = {
+    at: number;
+    callback: VoidFunction;
+    // Its place in the heap; -1 once taken out, to run or cancelled.
+    index: number;
+    // Until it runs or is cancelled, so one cancelled by an earlier callback in the same flush doesn't run.
+    pending: boolean;
+};
+
+
+// setTimeout overflows past ~24.8 days and fires immediately.
+const MAX_TIMEOUT = 2 ** 31 - 1;
+
+
+// A min-heap by deadline, under one timer set for the earliest.
+let armed = Infinity,
+    flushing = false,
+    heap: Entry[] = [],
+    timer: ReturnType<typeof setTimeout> | undefined;
+
+
+function arm() {
+    let next = heap[0]?.at ?? Infinity;
+
+    if (flushing || next === armed) {
+        return;
+    }
+
+    clearTimeout(timer);
+    armed = next;
+    timer = next === Infinity ? undefined : setTimeout(flush, Math.min(Math.max(next - Date.now(), 0), MAX_TIMEOUT));
+}
+
+// Everything due runs in one flush and the timer is set once after, for whatever is earliest then: rows sharing a
+// boundary update together, and a callback scheduling its next deadline doesn't reset the timer each time.
+function flush() {
+    let due: Entry[] = [],
+        now = Date.now();
+
+    armed = Infinity;
+    flushing = true;
+    timer = undefined;
+
+    while (heap.length && heap[0].at <= now) {
+        due.push(remove(heap[0]));
+    }
+
+    for (let i = 0, n = due.length; i < n; i++) {
+        let entry = due[i];
+
+        if (!entry.pending) {
+            continue;
+        }
+
+        entry.pending = false;
+
+        try {
+            entry.callback();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+
+    flushing = false;
+    arm();
+}
+
+function remove(entry: Entry) {
+    let last = heap.pop()!;
+
+    if (last !== entry) {
+        heap[entry.index] = last;
+        last.index = entry.index;
+        sift(last);
+    }
+
+    entry.index = -1;
+
+    return entry;
+}
+
+function sift(entry: Entry) {
+    let i = entry.index;
+
+    while (i > 0) {
+        let parent = (i - 1) >> 1;
+
+        if (heap[parent].at <= entry.at) {
+            break;
+        }
+
+        swap(i, parent);
+        i = parent;
+    }
+
+    for (let n = heap.length; ;) {
+        let left = 2 * i + 1,
+            right = left + 1,
+            least = i;
+
+        if (left < n && heap[left].at < heap[least].at) {
+            least = left;
+        }
+
+        if (right < n && heap[right].at < heap[least].at) {
+            least = right;
+        }
+
+        if (least === i) {
+            break;
+        }
+
+        swap(i, least);
+        i = least;
+    }
+}
+
+function swap(a: number, b: number) {
+    let entry = heap[a];
+
+    heap[a] = heap[b];
+    heap[b] = entry;
+    heap[a].index = a;
+    heap[b].index = b;
+}
+
+
+// Calls 'callback' once 'Date.now()' reaches 'at', however many deadlines are pending, off a single timer. Returns
+// the cancel.
+const deadline = (at: number, callback: VoidFunction) => {
+    let entry: Entry = { at, callback, index: heap.length, pending: true };
+
+    heap.push(entry);
+    sift(entry);
+    arm();
+
+    return () => {
+        if (!entry.pending) {
+            return;
+        }
+
+        entry.pending = false;
+
+        if (entry.index !== -1) {
+            remove(entry);
+            arm();
+        }
+    };
+};
+
+
+export { deadline };

package/src/shared/dismiss.ts

@@ -0,0 +1,6 @@
+// An 'ondocumentclick' handler that closes the element it is bound to, while open, on a click anywhere outside it.
+export default (open: () => boolean, close: VoidFunction) => function(this: HTMLElement, e: MouseEvent) {
+    if (open() && !this.contains(e.target as Node | null)) {
+        close();
+    }
+};

package/src/shared/drag.ts

@@ -0,0 +1,348 @@
+import { timing } from '~/shared/animation';
+import { swallow } from '~/shared/press';
+import { viewport } from '~/shared/viewport';
+
+
+// Drag-to-dismiss: capture past a small threshold, follow the pointer out by any of the ways the element may leave,
+// together or apart (a corner leaves up, sideways, or anywhere between), rubber-band back the other way, dismiss past
+// a share of its size or on a flick, and fling a dismissed element on the way it was going until it has left the
+// screen.
+
+
+type Direction = {
+    axis: 'x' | 'y';
+    sign: -1 | 1;
+};
+
+type Drag = {
+    captured: boolean;
+    directions: Direction[];
+    // How far out it is, along the ways it may leave by.
+    distance: number;
+    // Its layout size, read once on capture: a drag only transforms it.
+    height: number;
+    originX: number;
+    originY: number;
+    pointer: number;
+    // Pointer offset and time of the last velocity sample.
+    sampleX: number;
+    sampleY: number;
+    time: number;
+    // The pointer's recent velocity, px per ms, resistance aside: pulling hard the wrong way must still read as such.
+    vx: number;
+    vy: number;
+    width: number;
+    // Where it stands, resistance included.
+    x: number;
+    y: number;
+};
+
+type Fling = {
+    duration: number;
+    easing: string;
+    // Further to travel, px.
+    x: number;
+    y: number;
+};
+
+type Options = {
+    // On press: the ways it may be dismissed, or null when this press must not drag.
+    begin: (e: PointerEvent, element: HTMLElement) => Direction[] | null;
+    capture?: (element: HTMLElement) => void;
+    move: (element: HTMLElement, drag: Drag, progress: number) => void;
+    release: (element: HTMLElement, drag: Drag, dismiss: boolean) => void;
+};
+
+
+// Otherwise it must be dragged past this share of its size.
+const DISMISS_DISTANCE = 0.25;
+
+// A flick must be this far out (px), so a drag swung back from the wrong way isn't one just for crossing its start.
+const FLICK_DISTANCE = 12;
+
+// A release faster than this (px per ms), mostly outward, dismisses however short the drag, so a flick is enough.
+const FLICK_VELOCITY = 0.11;
+
+// Ease-out cubic: it leaves at three times its average speed, so a fling lasting 3 * distance / velocity leaves at
+// exactly the speed it was let go at.
+const FLING_EASING = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+const FLING_MIN = 150;
+
+// Presses on these keep their own clicks rather than starting a drag.
+const INTERACTIVE = 'a, button, input, label, select, summary, textarea, [contenteditable], [role="button"], [role="option"]';
+
+// A pointer resting this long (ms) before release has stopped, whatever its last sample said.
+const REST = 100;
+
+// Velocity is sampled no more often than this (ms), so one jittery move can't spike it.
+const SAMPLE = 16;
+
+const THRESHOLD = 4;
+
+
+// Let go moving fast and mostly the way out, it was flicked. Let go far enough out, it was dragged away, unless it
+// was already on its way back in.
+function dismissed(drag: Drag) {
+    let { directions, distance, time, vx, vy, x, y } = drag,
+        ox = outward(directions, 'x', x),
+        oy = outward(directions, 'y', y);
+
+    if (distance === 0) {
+        return false;
+    }
+
+    if (performance.now() - time > REST) {
+        return distance > extent(drag, ox, oy) * DISMISS_DISTANCE;
+    }
+
+    let fx = outward(directions, 'x', vx),
+        fy = outward(directions, 'y', vy),
+        speed = Math.hypot(fx, fy);
+
+    if (distance > FLICK_DISTANCE && speed > FLICK_VELOCITY && speed > Math.hypot(vx - fx, vy - fy)) {
+        return true;
+    }
+
+    return distance > extent(drag, ox, oy) * DISMISS_DISTANCE && (vx * ox + vy * oy) / distance > -FLICK_VELOCITY;
+}
+
+// Its size along the way it's heading, so a share of it means the same whichever way it goes.
+function extent({ height, width }: Drag, x: number, y: number) {
+    let length = Math.hypot(x, y);
+
+    if (length === 0) {
+        return Math.max(width, height);
+    }
+
+    return (Math.abs(x) * width + Math.abs(y) * height) / length;
+}
+
+// Toward a way out it follows 1:1. The other way along an axis it may leave by, it still gives, but less the further
+// you pull, like stretching something that wants to snap back; along an axis it may not leave by, it holds still.
+function follow(directions: Direction[], axis: Direction['axis'], delta: number) {
+    let free = false;
+
+    for (let i = 0, n = directions.length; i < n; i++) {
+        if (directions[i].axis !== axis) {
+            continue;
+        }
+
+        if (delta === 0 || Math.sign(delta) === directions[i].sign) {
+            return delta;
+        }
+
+        free = true;
+    }
+
+    return free ? Math.sign(delta) * Math.pow(Math.abs(delta), 0.7) : 0;
+}
+
+function free(directions: Direction[], axis: Direction['axis']) {
+    for (let i = 0, n = directions.length; i < n; i++) {
+        if (directions[i].axis === axis) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+// The part of a value along an axis that heads out by a way it may leave; none otherwise.
+function outward(directions: Direction[], axis: Direction['axis'], value: number) {
+    for (let i = 0, n = directions.length; i < n; i++) {
+        if (directions[i].axis === axis && Math.sign(value) === directions[i].sign) {
+            return value;
+        }
+    }
+
+    return 0;
+}
+
+
+const drag = ({ begin, capture, move, release }: Options) => {
+    let current: Drag | null = null;
+
+    return {
+        onpointercancel: (e: PointerEvent) => {
+            if (!current || e.pointerId !== current.pointer) {
+                return;
+            }
+
+            let state = current;
+
+            current = null;
+
+            if (state.captured) {
+                release(e.currentTarget as HTMLElement, state, false);
+            }
+        },
+        onpointerdown: (e: PointerEvent) => {
+            let directions = begin(e, e.currentTarget as HTMLElement),
+                now = performance.now();
+
+            if (!directions || directions.length === 0) {
+                return;
+            }
+
+            current = {
+                captured: false,
+                directions,
+                distance: 0,
+                height: 0,
+                originX: e.clientX,
+                originY: e.clientY,
+                pointer: e.pointerId,
+                sampleX: 0,
+                sampleY: 0,
+                time: now,
+                vx: 0,
+                vy: 0,
+                width: 0,
+                x: 0,
+                y: 0
+            };
+        },
+        onpointermove: (e: PointerEvent) => {
+            if (!current || e.pointerId !== current.pointer) {
+                return;
+            }
+
+            let { directions } = current,
+                element = e.currentTarget as HTMLElement,
+                dx = e.clientX - current.originX,
+                dy = e.clientY - current.originY;
+
+            // Capture only once it is clearly a drag, counting only movement it can follow; capturing on press would
+            // retarget the click of a plain tap away from the control under the pointer.
+            if (!current.captured) {
+                if (Math.hypot(free(directions, 'x') ? dx : 0, free(directions, 'y') ? dy : 0) <= THRESHOLD) {
+                    return;
+                }
+
+                current.captured = true;
+                element.setPointerCapture(e.pointerId);
+                getSelection()?.removeAllRanges();
+                capture?.(element);
+                current.height = element.offsetHeight;
+                current.width = element.offsetWidth;
+            }
+
+            let now = performance.now(),
+                x = follow(directions, 'x', dx),
+                y = follow(directions, 'y', dy),
+                ox = outward(directions, 'x', x),
+                oy = outward(directions, 'y', y);
+
+            if (now - current.time >= SAMPLE) {
+                current.vx = (dx - current.sampleX) / (now - current.time);
+                current.vy = (dy - current.sampleY) / (now - current.time);
+                current.sampleX = dx;
+                current.sampleY = dy;
+                current.time = now;
+            }
+
+            current.distance = Math.hypot(ox, oy);
+            current.x = x;
+            current.y = y;
+            move(element, current, Math.min(current.distance / extent(current, ox, oy), 1));
+        },
+        onpointerup: (e: PointerEvent) => {
+            if (!current || e.pointerId !== current.pointer) {
+                return;
+            }
+
+            let element = e.currentTarget as HTMLElement,
+                state = current;
+
+            current = null;
+
+            if (!state.captured) {
+                return;
+            }
+
+            // Its click would otherwise read as a press on the element (or, beyond an overlay, on its backdrop).
+            swallow();
+            release(element, state, dismissed(state));
+        }
+    };
+};
+
+// Carries a dismissed drag on until the element has cleared the viewport: the way the pointer was last moving (only
+// its parts heading out), or where it had been dragged when the pointer stopped, leaving at the speed it was let go
+// at, for no longer than the element's '--fling-duration'. Null without one (reduced motion zeroes it), where it should
+// fade where it stands instead.
+const fling = (element: HTMLElement, { directions, time, vx, vy, x, y }: Drag): Fling | null => {
+    let longest = timing(getComputedStyle(element), 'fling')?.duration as number | undefined;
+
+    if (!longest) {
+        return null;
+    }
+
+    let moving = performance.now() - time <= REST,
+        ux = moving ? outward(directions, 'x', vx) : 0,
+        uy = moving ? outward(directions, 'y', vy) : 0;
+
+    if (ux === 0 && uy === 0) {
+        ux = outward(directions, 'x', x);
+        uy = outward(directions, 'y', y);
+    }
+
+    let length = Math.hypot(ux, uy);
+
+    if (length === 0) {
+        return null;
+    }
+
+    ux /= length;
+    uy /= length;
+
+    // Heading out at an angle, it has cleared the screen once past whichever edge it reaches first.
+    let rect = element.getBoundingClientRect(),
+        speed = moving ? Math.max(vx * ux + vy * uy, 0) : 0,
+        travel = Infinity,
+        { height, width } = viewport();
+
+    if (ux > 0) {
+        travel = Math.min(travel, (width - rect.left) / ux);
+    }
+    else if (ux < 0) {
+        travel = Math.min(travel, rect.right / -ux);
+    }
+
+    if (uy > 0) {
+        travel = Math.min(travel, (height - rect.top) / uy);
+    }
+    else if (uy < 0) {
+        travel = Math.min(travel, rect.bottom / -uy);
+    }
+
+    travel = Math.max(travel, 0);
+
+    return {
+        duration: speed > 0 ? Math.min(Math.max((3 * travel) / speed, FLING_MIN), longest) : longest,
+        easing: FLING_EASING,
+        x: ux * travel,
+        y: uy * travel
+    };
+};
+
+// Back toward the edges a placement touches (signs per axis, 0 for neither): an edge, straight back; a corner, toward
+// either of its edges or anywhere between, never away from one.
+const toward = ({ x, y }: { x: -1 | 0 | 1; y: -1 | 0 | 1 }) => {
+    let ways: Direction[] = [];
+
+    if (x !== 0) {
+        ways.push({ axis: 'x', sign: x });
+    }
+
+    if (y !== 0) {
+        ways.push({ axis: 'y', sign: y });
+    }
+
+    return ways;
+};
+
+
+export { drag, fling, INTERACTIVE, toward };
+export type { Direction, Drag, Fling };