@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/relative-time/index.ts

@@ -0,0 +1,410 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import '~/components/tooltip/scss/index.scss';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [RELATIVE_TIME_TOOLTIP]?: Attributes;
+    date: Value;
+    ondocumentvisibilitychange?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+    state?: State;
+};
+
+type State = {
+    date: Value;
+    // Pins "now" to this moment instead of the live clock (tests, replays); null follows the clock.
+    now: number | null;
+};
+
+type Value = Date | number | string | null;
+
+
+const DAY = 24 * 60 * 60 * 1000;
+
+const ENTER: Keyframe[] = [
+    { filter: 'blur(3px)', opacity: 0, translate: '0 0.55em' },
+    { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+];
+
+// Travels less than the entrance did: the exit shouldn't hold the eye.
+const EXIT: Keyframe[] = [
+    { filter: 'blur(0px)', opacity: 1, translate: '0 0' },
+    { filter: 'blur(3px)', opacity: 0, translate: '0 -0.4em' }
+];
+
+const FADE_IN: Keyframe[] = [{ opacity: 0 }, { opacity: 1 }];
+
+const FADE_OUT: Keyframe[] = [{ opacity: 1 }, { opacity: 0 }];
+
+const HOUR = 60 * 60 * 1000;
+
+// setTimeout overflows past ~24.8 days and fires immediately.
+const MAX_TIMEOUT = 2 ** 31 - 1;
+
+const MIN = 60 * 1000;
+
+// The first tooltip waits so passing over text doesn't flash it; neighbours then open instantly while warm.
+const OPEN_DELAY = 400;
+
+const RELATIVE_TIME_TOOLTIP = Symbol.for('@esportsplus/ui/relative-time.tooltip');
+
+// Long enough to read as motion, short enough that a seconds counter never has two rolls overlapping.
+const ROLL: KeyframeAnimationOptions = { duration: 300, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' };
+
+const SEC = 1000;
+
+// Lands just past the boundary so floor() has definitely moved.
+const SETTLE = 20;
+
+const TOOLTIP = new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    month: 'short',
+    weekday: 'short',
+    year: 'numeric'
+});
+
+const VIEWPORT_GUTTER = 8;
+
+const WARM_FOR = 500;
+
+const WEEK = 7 * DAY;
+
+
+let closedAt = 0,
+    uid = 0;
+
+
+function enter(element: HTMLElement, reduce: boolean) {
+    element.animate(reduce ? FADE_IN : ENTER, ROLL);
+}
+
+function exit(element: HTMLElement, reduce: boolean) {
+    // Leaves the flow at once, so what replaces it takes its place while it rolls away.
+    element.style.left = `${element.offsetLeft}px`;
+    element.style.position = 'absolute';
+    element.style.top = `${element.offsetTop}px`;
+    element.animate(reduce ? FADE_OUT : EXIT, { ...ROLL, fill: 'forwards' }).onfinish = () => element.remove();
+}
+
+function label(diff: number, time: number) {
+    if (diff < 10 * SEC) {
+        return 'just now';
+    }
+
+    if (diff < MIN) {
+        return `${Math.floor(diff / SEC)} sec ago`;
+    }
+
+    if (diff < HOUR) {
+        return `${Math.floor(diff / MIN)} min ago`;
+    }
+
+    if (diff < DAY) {
+        return `${Math.floor(diff / HOUR)} hr ago`;
+    }
+
+    if (diff < 2 * DAY) {
+        return 'yesterday';
+    }
+
+    if (diff < WEEK) {
+        return `${Math.floor(diff / DAY)} days ago`;
+    }
+
+    return new Intl.DateTimeFormat(undefined, { day: 'numeric', month: 'short' }).format(time);
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function span(text: string, className: string) {
+    let element = document.createElement('span');
+
+    element.className = className;
+    element.textContent = text;
+
+    return element;
+}
+
+function timeOf(value: Value) {
+    return value === null ? null : new Date(value).getTime();
+}
+
+// Milliseconds until label() would return something different, so the element wakes once per visible change.
+function untilChange(diff: number) {
+    if (diff < 0) {
+        return -diff;
+    }
+
+    if (diff < 10 * SEC) {
+        return 10 * SEC - diff;
+    }
+
+    if (diff >= WEEK) {
+        return HOUR;
+    }
+
+    let unit = diff < MIN ? SEC : diff < HOUR ? MIN : diff < DAY ? HOUR : DAY;
+
+    return unit - (diff % unit);
+}
+
+
+function template(this: { attributes?: Partial<A> } | void, { date, state = reactive({ date, now: null as number | null }), ...attributes }: A) {
+    let clock = reactive({ open: false, tick: 0 }),
+        digits: HTMLElement | undefined,
+        id = `relative-time-${++uid}`,
+        instant = false,
+        opener: ReturnType<typeof setTimeout> | undefined,
+        rest: HTMLElement | undefined,
+        shown: { digits: string; rest: string } | null = null,
+        stopRender: VoidFunction | undefined,
+        timer: ReturnType<typeof setTimeout> | undefined,
+        tooltip: HTMLElement | undefined;
+
+    function hide() {
+        clearTimeout(opener);
+
+        if (clock.open) {
+            closedAt = Date.now();
+        }
+
+        clock.open = false;
+    }
+
+    function nudge() {
+        if (!tooltip) {
+            return;
+        }
+
+        tooltip.style.right = '';
+
+        // Starts centred on the text; nudged sideways only if that would poke past the viewport.
+        let box = tooltip.getBoundingClientRect(),
+            max = document.documentElement.clientWidth - VIEWPORT_GUTTER,
+            shift = box.left < VIEWPORT_GUTTER ? VIEWPORT_GUTTER - box.left : box.right > max ? max - box.right : 0;
+
+        if (shift) {
+            tooltip.style.right = `calc(50% - ${Math.round(shift)}px)`;
+        }
+    }
+
+    function open(delayed: boolean) {
+        clearTimeout(opener);
+
+        let warm = Date.now() - closedAt < WARM_FOR;
+
+        if (delayed && !warm) {
+            instant = false;
+            opener = setTimeout(() => {
+                nudge();
+                clock.open = true;
+            }, OPEN_DELAY);
+            return;
+        }
+
+        instant = warm;
+        nudge();
+        clock.open = true;
+    }
+
+    // Keyed from the right, so 9 -> 10 rolls the ones and brings a new tens digit in beside it.
+    function render(text: string) {
+        let match = text.match(/^(\d+)(.*)$/),
+            next = { digits: match ? match[1] : '', rest: match ? match[2] : text },
+            previous = shown,
+            reduce = reduced();
+
+        shown = next;
+
+        if (!digits || !rest) {
+            return;
+        }
+
+        if (!previous) {
+            digits.replaceChildren(...[...next.digits].map((digit) => slot(digit)));
+            rest.replaceChildren(span(next.rest, 'relative-time-rest'));
+            return;
+        }
+
+        let slots = Array.from(digits.children as HTMLCollectionOf<HTMLElement>).filter((element) => !element.style.position);
+
+        for (let key = 1, n = Math.max(slots.length, next.digits.length); key <= n; key++) {
+            let digit = next.digits[next.digits.length - key],
+                element = slots[slots.length - key];
+
+            if (!element) {
+                let created = slot(digit);
+
+                digits.prepend(created);
+                enter(created, reduce);
+                continue;
+            }
+
+            if (digit === undefined) {
+                exit(element, reduce);
+                continue;
+            }
+
+            let current = Array.from(element.children as HTMLCollectionOf<HTMLElement>).find((child) => !child.style.position);
+
+            if (current?.textContent === digit) {
+                continue;
+            }
+
+            let created = span(digit, 'relative-time-digit');
+
+            if (current) {
+                exit(current, reduce);
+            }
+
+            element.append(created);
+            enter(created, reduce);
+        }
+
+        if (previous.rest === next.rest) {
+            return;
+        }
+
+        let created = span(next.rest, 'relative-time-rest'),
+            current = Array.from(rest.children as HTMLCollectionOf<HTMLElement>).find((child) => !child.style.position);
+
+        if (current) {
+            exit(current, reduce);
+        }
+
+        rest.append(created);
+        enter(created, reduce);
+    }
+
+    function schedule() {
+        clearTimeout(timer);
+
+        let time = timeOf(state.date);
+
+        if (time === null || state.now !== null) {
+            return;
+        }
+
+        timer = setTimeout(() => {
+            clock.tick++;
+            schedule();
+        }, Math.min(untilChange(Date.now() - time) + SETTLE, MAX_TIMEOUT));
+    }
+
+    function slot(digit: string) {
+        let element = span('', 'relative-time-slot');
+
+        element.append(span(digit, 'relative-time-digit'));
+
+        return element;
+    }
+
+    function text() {
+        let time = timeOf(state.date);
+
+        clock.tick;
+
+        return time === null ? null : label((state.now ?? Date.now()) - time, time);
+    }
+
+    let stopSchedule = effect(() => {
+        state.date;
+        state.now;
+        schedule();
+    });
+
+    onCleanup(() => {
+        clearTimeout(opener);
+        clearTimeout(timer);
+        stopRender?.();
+        stopSchedule();
+    });
+
+    return html`
+        <time
+            class='relative-time tooltip ${() => clock.open && '--active'} ${() => instant && clock.open && '--instant'}'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                'aria-describedby': () => clock.open ? id : '',
+                datetime: () => {
+                    let time = timeOf(state.date);
+
+                    return time === null ? '' : new Date(time).toISOString();
+                },
+                onblur: hide,
+                onconnect: (element: HTMLElement) => {
+                    digits = element.querySelector<HTMLElement>('.relative-time-digits') ?? undefined;
+                    rest = element.querySelector<HTMLElement>('.relative-time-rests') ?? undefined;
+                    stopRender = effect(() => {
+                        let value = text();
+
+                        if (value !== null) {
+                            render(value);
+                        }
+                    });
+                },
+                ondisconnect: () => {
+                    stopRender?.();
+                },
+                // Background tabs throttle timers; catch up the moment the page is seen.
+                ondocumentvisibilitychange: () => {
+                    if (document.visibilityState !== 'visible') {
+                        return;
+                    }
+
+                    clock.tick++;
+                    schedule();
+                },
+                onfocus: () => open(false),
+                onkeydown: (e: KeyboardEvent) => {
+                    if (e.key === 'Escape') {
+                        hide();
+                    }
+                },
+                onpointerenter: (e: PointerEvent) => {
+                    if (e.pointerType !== 'touch') {
+                        open(true);
+                    }
+                },
+                onpointerleave: hide,
+                tabindex: () => state.date === null ? '' : '0'
+            }}
+        >
+            <span class='relative-time-sr'>${() => text() ?? ''}</span>
+            <span aria-hidden='true' class='relative-time-roll ${() => state.date === null && '--placeholder'}'>
+                <span class='relative-time-digits'></span>
+                <span class='relative-time-rests'></span>
+            </span>
+            <span
+                class='tooltip-message tooltip-message--n relative-time-tooltip'
+                id='${id}'
+                role='tooltip'
+                ${this?.attributes?.[RELATIVE_TIME_TOOLTIP]}
+                ${attributes[RELATIVE_TIME_TOOLTIP]}
+                ${{
+                    onrender: (element: HTMLElement) => {
+                        tooltip = element;
+                    }
+                }}
+            >
+                ${() => {
+                    let time = timeOf(state.date);
+
+                    return time === null ? '' : TOOLTIP.format(time);
+                }}
+            </span>
+        </time>
+    `;
+}
+
+
+export default Object.assign(template, { tooltip: RELATIVE_TIME_TOOLTIP } as const);
+export type { State as RelativeTimeState, Value as RelativeTimeValue };

package/src/components/relative-time/scss/index.scss

@@ -0,0 +1,88 @@
+@use 'variables';
+
+// Qualified twice so it beats the reused tooltip's own cursor.
+.relative-time.relative-time {
+    border-radius: var(--border-radius-100);
+    cursor: default;
+    display: inline-flex;
+    font-variant-numeric: tabular-nums;
+    outline: none;
+    transition: color 0.15s ease-out;
+    white-space: nowrap;
+
+    // Brightens on hover so the text reads as something with more to say.
+    &:focus-visible,
+    &:hover {
+        color: var(--color-hover);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--focus-color);
+        outline-offset: 2px;
+    }
+}
+
+.relative-time {
+    &-digit,
+    &-rest {
+        display: inline-block;
+        white-space: pre;
+    }
+
+    &-digits,
+    &-rests,
+    &-roll,
+    &-slot {
+        display: inline-flex;
+        position: relative;
+    }
+
+    // An empty flex item would lend the line its bottom edge as a baseline, lifting "just now".
+    &-digits:empty {
+        display: none;
+    }
+
+    // Holds roughly the right width so the line doesn't reflow once the moment is known.
+    &-roll.--placeholder::before {
+        content: var(--placeholder);
+        visibility: hidden;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    // Opens from slightly below, smaller and blurred; closes faster than it opens.
+    &-tooltip.tooltip-message {
+        filter: blur(2px);
+        transform-origin: bottom center;
+        transition:
+            filter var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function),
+            translate var(--transition-duration) var(--transition-timing-function);
+
+        .relative-time.--active > & {
+            --transition-duration: 0.16s;
+            filter: blur(0px);
+        }
+
+        .relative-time.--instant > & {
+            transition: none;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-tooltip.tooltip-message {
+            --offset: 0px;
+            --scale: 1;
+            filter: none;
+        }
+    }
+}

package/src/components/relative-time/scss/variables.scss

@@ -0,0 +1,19 @@
+.relative-time {
+    --color-hover: var(--color-text-500);
+    --focus-color: var(--color-text-500);
+    --placeholder: '0 min ago';
+}
+
+.relative-time-tooltip.tooltip-message {
+    --border-radius: var(--border-radius-300);
+    --box-shadow: var(--box-shadow-200);
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-500);
+    --offset: 3px;
+    --padding-horizontal: var(--size-100);
+    --padding-vertical: calc(var(--size-100) / 2);
+    --scale: 0.9;
+    --spacer: 6px;
+    --transition-duration: 0.1s;
+    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}

package/src/components/root/scss/index.scss

@@ -14,9 +14,9 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0;
     padding: 0;
     position: relative;
+    overflow-wrap: break-word;
     text-wrap: balance;
     width: 100%;
-    word-wrap: break-word;
 
     sub,
     sup {
@@ -70,9 +70,9 @@ a {
 
 p {
     margin: 0;
+    overflow-wrap: break-word;
     padding: 0;
     width: 100%;
-    word-wrap: break-word;
 }
 
 pre {

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

@@ -0,0 +1,131 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & Options & {
+    // Hides an edge while the content is scrolled all the way to it, so nothing is faded when nothing is hidden.
+    auto?: boolean;
+    edges?: 'both' | 'bottom' | 'top';
+    // Keeps the native scrollbar; hidden by default so only the fade signals more content.
+    scrollbar?: boolean;
+};
+
+type Edge = Attributes & Options & {
+    // Pins the edge to the viewport, for pages that scroll the window rather than a panel.
+    fixed?: boolean;
+    side?: 'bottom' | 'top';
+};
+
+type Options = {
+    // Backdrop blur in px at the very edge.
+    blur?: number;
+    // Stacks several blur layers so the blur ramps up smoothly instead of switching on at one strength.
+    progressive?: boolean;
+    // Height of the fade in px.
+    size?: number;
+};
+
+
+// Enough layers for the ramp to read as continuous without stacking too many backdrop filters.
+const LAYERS = 4;
+
+
+function options({ blur, size }: Options) {
+    return `${blur !== undefined ? `--blur: ${blur}px;` : ''}${size !== undefined ? ` --size: ${size}px;` : ''}`;
+}
+
+function layers(progressive?: boolean) {
+    if (!progressive) {
+        return '';
+    }
+
+    return Array.from({ length: LAYERS }, (_, i) => html`<div class='scroll-fade-layer' style='${`--layer: ${i}`}'></div>`);
+}
+
+const edge = component<Edge>(
+    function(this, { blur, fixed = false, progressive = false, side = 'bottom', size, ...attributes }) {
+        return html`
+            <div
+                aria-hidden='true'
+                class='scroll-fade-edge scroll-fade-edge--${side} ${fixed && 'scroll-fade-edge--fixed'} ${progressive && 'scroll-fade-edge--progressive'}'
+                style='${options({ blur, size })}'
+                ${this?.attributes}
+                ${attributes}
+            >
+                ${layers(progressive)}
+            </div>
+        `;
+    }
+);
+
+
+export default Object.assign(
+    component<A>(
+        function(this, { auto = false, blur, edges = 'both', progressive = false, scrollbar = false, size, ...attributes }, content) {
+            let observer: ResizeObserver | undefined,
+                ui = reactive({ end: false, start: true });
+
+            function measure(viewport: HTMLElement) {
+                ui.start = viewport.scrollTop <= 1;
+                ui.end = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1;
+            }
+
+            return html`
+                <div class='scroll-fade' style='${options({ blur, size })}' ${this?.attributes} ${attributes}>
+                    ${edges !== 'bottom' && html`
+                        <div
+                            aria-hidden='true'
+                            class='scroll-fade-edge scroll-fade-edge--top ${progressive && 'scroll-fade-edge--progressive'}'
+                            ${{ class: () => auto && ui.start && '--hidden' }}
+                        >
+                            ${layers(progressive)}
+                        </div>
+                    `}
+                    ${edges !== 'top' && html`
+                        <div
+                            aria-hidden='true'
+                            class='scroll-fade-edge scroll-fade-edge--bottom ${progressive && 'scroll-fade-edge--progressive'}'
+                            ${{ class: () => auto && ui.end && '--hidden' }}
+                        >
+                            ${layers(progressive)}
+                        </div>
+                    `}
+
+                    <div
+                        class='scroll-fade-viewport ${!scrollbar && '--no-scrollbar'}'
+                        ${{
+                            onconnect: (element: HTMLElement) => {
+                                if (!auto) {
+                                    return;
+                                }
+
+                                // Content growing or the panel resizing can reveal or cover an end without any scroll.
+                                observer = new ResizeObserver(() => measure(element));
+                                observer.observe(element);
+
+                                for (let i = 0, n = element.children.length; i < n; i++) {
+                                    observer.observe(element.children[i]);
+                                }
+
+                                measure(element);
+                            },
+                            ondisconnect: () => {
+                                observer?.disconnect();
+                            },
+                            onscroll: function(this: HTMLElement) {
+                                if (auto) {
+                                    measure(this);
+                                }
+                            }
+                        }}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            `;
+        }
+    ),
+    { edge }
+);
+