@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/marquee/index.ts

@@ -1,5 +1,10 @@
 import { html, type Attributes, type Renderable } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { clamp } from '~/shared/clamp';
+import { observer } from '~/shared/resize';
+import { ticker } from '~/shared/ticker';
+import { observeIntersection } from '~/shared/visible';
+import * as scroll from './velocity';
 import './scss/index.scss';
 
 
@@ -23,10 +28,6 @@ const MAX_COPIES = 14;
 const MIN_COPIES = 4;
 
 
-function clamp(x: number, min: number, max: number) {
-    return x < min ? min : x > max ? max : x;
-}
-
 // Wraps the offset into (-loop, 0] so the track never runs out of copies.
 function fold(x: number, loop: number) {
     let m = x % loop;
@@ -35,26 +36,42 @@ function fold(x: number, loop: number) {
 }
 
 
-export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = reactive({ paused: false }), ...attributes }: Attributes & {
+export default ({ direction = 'left', gap = 40, items, label = 'Logos', select, speed = 44, state = reactive({ paused: false }), velocity = false, ...attributes }: Attributes & {
     direction?: 'left' | 'right';
     gap?: number;
     items: Item[];
     label?: string;
+    onfocusin?: never;
+    onfocusout?: never;
+    onpointercancel?: never;
+    onpointerdown?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+    onpointerup?: never;
+    onwindowblur?: never;
     select?: (item: Item) => void;
     speed?: number;
     state?: { paused: boolean };
+    // Scrolling the page speeds the marquee up and turns it with the scroll direction.
+    velocity?: boolean;
 }) => {
-    let cleanup: VoidFunction[] = [],
-        copies = reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)),
-        frame = 0,
+    let copies = reactive(Array.from({ length: MIN_COPIES }, (_, i) => i)),
+        // The share of 'speed' it drifts at, from the CSS; none holds it still, to scroll by hand.
+        drift = 0,
+        group: HTMLElement | undefined,
         held = false,
         near = false,
         nudge = 0,
         offset = 0,
         rate = 0,
-        reduced = false,
         sign = direction === 'right' ? 1 : -1,
-        span = 0;
+        span = 0,
+        stage = reactive({ still: false, x: 0 }),
+        // Unsubscribes from the shared ticker; unset while asleep.
+        stop: VoidFunction | undefined,
+        track: HTMLElement | undefined,
+        tracker: scroll.Tracker | undefined,
+        viewport: HTMLElement | undefined;
 
     function face(item: Item) {
         if (!item.mark) {
@@ -79,217 +96,277 @@ export default ({ direction = 'left', gap = 40, items, label = 'Logos', select,
         return html`<span class='marquee-item'>${face(item)}</span>`;
     }
 
-    function listen<T extends EventTarget>(target: T, type: string, listener: (e: any) => void, options?: boolean | AddEventListenerOptions) {
-        target.addEventListener(type, listener, options);
-        cleanup.push(() => target.removeEventListener(type, listener, options));
+    function measure() {
+        if (!group || !track || !viewport) {
+            return;
+        }
+
+        // Read back the rendered gap so a CSS override of --item-gap still loops seamlessly.
+        let width = group.getBoundingClientRect().width,
+            loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0,
+            room = viewport.getBoundingClientRect().width;
+
+        span = loop;
+        offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
+        paint();
+        wake();
+
+        let next = stage.still || loop <= 0
+            ? MIN_COPIES
+            : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
+
+        while (copies.length < next) {
+            copies.push(copies.length);
+        }
+
+        if (copies.length > next) {
+            copies.splice(next);
+        }
     }
 
-    return html`
-        <section
-            aria-label='${label}'
-            class='marquee'
-            style='--item-gap: ${gap}px'
-            ${attributes}
-            ${{
-                onconnect: (element: HTMLElement) => {
-                    let group = element.querySelector('.marquee-group:not(.marquee-group--copy)') as HTMLElement,
-                        media = matchMedia('(prefers-reduced-motion: reduce)'),
-                        track = element.querySelector('.marquee-track') as HTMLElement,
-                        viewport = element.querySelector('.marquee-viewport') as HTMLElement;
-
-                    function measure() {
-                        // Read back the rendered gap so a CSS override of --item-gap still loops seamlessly.
-                        let width = group.getBoundingClientRect().width,
-                            loop = width > 0 ? width + parseFloat(getComputedStyle(track).columnGap) : 0,
-                            room = viewport.getBoundingClientRect().width;
-
-                        span = loop;
-                        offset = loop > 0 ? clamp(offset, -loop, loop) : 0;
-                        paint();
-
-                        let next = reduced || loop <= 0
-                            ? MIN_COPIES
-                            : clamp(Math.ceil(room / loop) + 3, MIN_COPIES, MAX_COPIES);
-
-                        while (copies.length < next) {
-                            copies.push(copies.length);
-                        }
+    function motion() {
+        if (!track) {
+            return;
+        }
 
-                        if (copies.length > next) {
-                            copies.splice(next);
-                        }
-                    }
+        drift = parseFloat(getComputedStyle(track).getPropertyValue('--drift')) || 0;
+        stage.still = drift <= 0;
+        measure();
+        run();
+    }
 
-                    function motion() {
-                        reduced = media.matches;
+    function paint() {
+        stage.x = stage.still ? 0 : offset - span;
+    }
 
-                        if (reduced) {
-                            viewport.setAttribute('tabindex', '0');
-                        }
-                        else {
-                            viewport.removeAttribute('tabindex');
-                        }
+    // Nudges a focused item fully into view, keeping the track within one loop of rest.
+    function reveal(node: HTMLElement) {
+        let loop = span;
 
-                        measure();
-                        run();
-                    }
+        if (stage.still || loop <= 0 || !viewport || node === viewport) {
+            return;
+        }
 
-                    function paint() {
-                        track.style.transform = `translate3d(${(reduced ? 0 : offset - span).toFixed(2)}px, 0, 0)`;
-                    }
+        let box = node.getBoundingClientRect(),
+            delta = 0,
+            pad = 12,
+            view = viewport.getBoundingClientRect();
 
-                    // Nudges a focused item fully into view, keeping the track within one loop of rest.
-                    function reveal(node: HTMLElement) {
-                        let loop = span;
+        if (box.left < view.left + pad) {
+            delta = view.left + pad - box.left;
+        }
+        else if (box.right > view.right - pad) {
+            delta = view.right - pad - box.right;
+        }
 
-                        if (reduced || loop <= 0 || node === viewport) {
-                            return;
-                        }
+        if (delta !== 0) {
+            nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
+            wake();
+        }
+    }
 
-                        let box = node.getBoundingClientRect(),
-                            delta = 0,
-                            pad = 12,
-                            view = viewport.getBoundingClientRect();
+    function run() {
+        sleep();
 
-                        if (box.left < view.left + pad) {
-                            delta = view.left + pad - box.left;
-                        }
-                        else if (box.right > view.right - pad) {
-                            delta = view.right - pad - box.right;
-                        }
+        if (stage.still || !near) {
+            return;
+        }
 
-                        if (delta !== 0) {
-                            nudge = clamp(offset + nudge + delta, -loop, loop) - offset;
-                        }
-                    }
+        let last = 0;
 
-                    function run() {
-                        cancelAnimationFrame(frame);
-                        frame = 0;
+        stop = ticker((now) => {
+            let dt = last ? Math.min((now - last) / 1000, 0.05) : 0,
+                goal = held || state.paused ? 0 : 1,
+                loop = span;
 
-                        if (reduced || !near) {
-                            return;
-                        }
+            last = now;
 
-                        let last = 0;
+            if (loop <= 0) {
+                sleep();
+                return;
+            }
 
-                        function tick(now: number) {
-                            frame = requestAnimationFrame(tick);
+            rate += (goal - rate) * (1 - Math.exp(-dt / RAMP));
 
-                            let dt = last ? Math.min((now - last) / 1000, 0.05) : 0,
-                                loop = span;
+            let pull = nudge * (1 - Math.exp(-dt / SETTLE));
 
-                            last = now;
+            nudge -= pull;
 
-                            if (loop <= 0) {
-                                return;
-                            }
+            let boost = 0;
 
-                            rate += ((held || state.paused ? 0 : 1) - rate) * (1 - Math.exp(-dt / RAMP));
+            if (tracker) {
+                scroll.step(tracker, now, dt);
+                boost = Math.min(scroll.MAX_FACTOR, Math.abs(tracker.factor));
 
-                            let pull = nudge * (1 - Math.exp(-dt / SETTLE));
+                // A burst turns the marquee with the scroll; it keeps that heading once the scroll stops.
+                if (boost > 0.1) {
+                    sign = (direction === 'right' ? 1 : -1) * Math.sign(tracker.factor);
+                }
+            }
+
+            let x = offset + sign * speed * drift * rate * (1 + boost) * dt + pull;
+
+            // Only wrap once a nudge has settled, otherwise the item being revealed would jump.
+            if (rate > 0.002 && Math.abs(nudge) < 0.25) {
+                nudge = 0;
+                x = fold(x, loop);
+            }
+            else {
+                x = clamp(x, -loop, loop);
+            }
+
+            offset = x;
+            paint();
+
+            // Stopped with nothing left to settle: no frames until a resume, a nudge, a resize or a scroll wakes it.
+            if (!goal && rate < 0.002 && Math.abs(nudge) < 0.25 && (!tracker || scroll.settled(tracker, now))) {
+                sleep();
+            }
+        });
+    }
 
-                            nudge -= pull;
+    function sleep() {
+        stop?.();
+        stop = undefined;
+    }
 
-                            let x = offset + sign * speed * rate * dt + pull;
+    function unhold() {
+        held = false;
+        wake();
+    }
 
-                            // Only wrap once a nudge has settled, otherwise the item being revealed would jump.
-                            if (rate > 0.002 && Math.abs(nudge) < 0.25) {
-                                nudge = 0;
-                                x = fold(x, loop);
-                            }
-                            else {
-                                x = clamp(x, -loop, loop);
-                            }
+    function wake() {
+        if (!stop) {
+            run();
+        }
+    }
 
-                            offset = x;
-                            paint();
-                        }
+    effect(() => {
+        if (!state.paused) {
+            untrack(wake);
+        }
+    });
 
-                        frame = requestAnimationFrame(tick);
+    return html`
+        <section
+            aria-label='${label}'
+            class='marquee'
+            style='--item-gap: ${gap}px'
+            ${attributes}
+            ${{
+                class: () => stage.still && 'marquee--still',
+                onconnect: (element: HTMLElement) => {
+                    if (!group || !viewport) {
+                        return;
                     }
 
-                    let resize = new ResizeObserver(measure);
+                    let resize = observer(measure);
 
                     resize.observe(viewport);
                     resize.observe(group);
-                    cleanup.push(() => resize.disconnect());
+                    onCleanup(resize.disconnect);
 
-                    if (typeof IntersectionObserver === 'undefined') {
-                        near = true;
-                    }
-                    else {
-                        let intersection = new IntersectionObserver((entries) => {
-                            let entry = entries[entries.length - 1];
+                    if (velocity) {
+                        let t = scroll.track(element, wake);
 
-                            if (entry && entry.isIntersecting !== near) {
-                                near = entry.isIntersecting;
-                                run();
-                            }
-                        }, { rootMargin: '96px' });
-
-                        intersection.observe(viewport);
-                        cleanup.push(() => intersection.disconnect());
+                        tracker = t;
+                        onCleanup(() => {
+                            t.release(wake);
+                            tracker = undefined;
+                        });
                     }
 
-                    listen(element, 'blur', () => held = false, true);
-                    listen(element, 'focus', (e: FocusEvent) => {
-                        held = true;
-                        reveal(e.target as HTMLElement);
-                    }, true);
-                    listen(element, 'pointercancel', () => held = false);
-                    listen(element, 'pointerdown', () => held = true);
-                    listen(element, 'pointerenter', (e: PointerEvent) => {
-                        if (e.pointerType !== 'touch') {
-                            held = true;
-                        }
-                    });
-                    listen(element, 'pointerleave', () => held = false);
-                    listen(element, 'pointerup', (e: PointerEvent) => {
-                        if (e.pointerType === 'touch') {
-                            held = false;
+                    onCleanup(observeIntersection(viewport, (entries) => {
+                        let entry = entries[entries.length - 1];
+
+                        if (entry && entry.isIntersecting !== near) {
+                            near = entry.isIntersecting;
+                            run();
                         }
+                    }, { rootMargin: '96px' }));
+                    onCleanup(() => {
+                        near = false;
+                        sleep();
                     });
-                    listen(media, 'change', motion);
-                    // Focus can scroll the clipped viewport natively; pin it so only the transform moves.
-                    listen(viewport, 'scroll', () => {
-                        if (reduced) {
-                            return;
-                        }
-
-                        viewport.scrollLeft = 0;
-                        viewport.scrollTop = 0;
-                    }, { passive: true });
-                    listen(window, 'blur', () => held = false);
 
                     motion();
                 },
-                ondisconnect: () => {
-                    cancelAnimationFrame(frame);
-
-                    for (let i = 0, n = cleanup.length; i < n; i++) {
-                        cleanup[i]();
+                onfocusin: (e: FocusEvent) => {
+                    held = true;
+                    reveal(e.target as HTMLElement);
+                },
+                onfocusout: unhold,
+                onpointercancel: unhold,
+                onpointerdown: () => {
+                    held = true;
+                },
+                onpointerenter: (e: PointerEvent) => {
+                    if (e.pointerType !== 'touch') {
+                        held = true;
                     }
-
-                    cleanup.length = 0;
-                }
+                },
+                onpointerleave: unhold,
+                onpointerup: (e: PointerEvent) => {
+                    if (e.pointerType === 'touch') {
+                        unhold();
+                    }
+                },
+                onwindowblur: unhold
             }}
         >
-            <div class='marquee-viewport'>
-                <div class='marquee-track'>
+            <div
+                class='marquee-viewport'
+                ${{
+                    onconnect: (element: HTMLElement) => {
+                        viewport = element;
+                    },
+                    // Focus can scroll the clipped viewport natively; pin it so only the transform moves.
+                    onscroll: () => {
+                        if (stage.still || !viewport) {
+                            return;
+                        }
+
+                        viewport.scrollLeft = 0;
+                        viewport.scrollTop = 0;
+                    },
+                    tabindex: () => stage.still && '0'
+                }}
+            >
+                <div
+                    class='marquee-track'
+                    ${{
+                        onconnect: (element: HTMLElement) => {
+                            track = element;
+                        },
+                        // Its CSS transitions '--drift' alone, so a change to it (reduced motion, say) is heard here.
+                        ontransitionend: (e: TransitionEvent) => {
+                            if (e.target === e.currentTarget && e.propertyName === '--drift') {
+                                motion();
+                            }
+                        },
+                        style: () => `transform: translate3d(${stage.x.toFixed(2)}px, 0, 0)`
+                    }}
+                >
                     ${html.reactive(copies, (copy) => {
                         // Copy 1 is the live group; copies are only ever trimmed from the end so it survives resizes.
                         if (copy === 1) {
                             return html`
-                                <ul class='marquee-group'>
-                                    ${items.map((item) => html`<li>${link(item)}</li>`)}
+                                <ul
+                                    class='marquee-group'
+                                    ${{
+                                        onconnect: (element: HTMLElement) => {
+                                            group = element;
+                                        }
+                                    }}
+                                >
+                                    ${items.map((item) => html`<li class='marquee-entry'>${link(item)}</li>`)}
                                 </ul>
                             `;
                         }
 
                         return html`
                             <ul aria-hidden='true' class='marquee-group marquee-group--copy'>
-                                ${items.map((item) => html`<li><span class='marquee-item'>${item.mark ? item.mark() : item.label}</span></li>`)}
+                                ${items.map((item) => html`<li class='marquee-entry'><span class='marquee-item'>${item.mark ? item.mark() : item.label}</span></li>`)}
                             </ul>
                         `;
                     })}

package/src/components/marquee/scss/index.scss

@@ -1,5 +1,13 @@
+@use '/shared';
 @use 'variables';
 
+// Typed, so the track can transition it and JS hears it change.
+@property --drift {
+    inherits: true;
+    initial-value: 1;
+    syntax: '<number>';
+}
+
 .marquee {
     color: var(--color);
     font-size: var(--font-size);
@@ -11,17 +19,19 @@
     position: relative;
     width: 100%;
 
+    &-entry {
+        flex-shrink: 0;
+    }
+
     &-group {
+        @extend %reset-list;
         align-items: center;
         display: flex;
         gap: var(--item-gap);
-        list-style: none;
-        margin: 0;
-        padding: 0;
         width: max-content;
 
-        li {
-            flex-shrink: 0;
+        &--copy {
+            display: var(--copy-display);
         }
     }
 
@@ -59,12 +69,7 @@
     }
 
     &-label {
-        clip-path: inset(50%);
-        height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
+        @extend %hidden-visually;
     }
 
     // Lets the mark's children join the item's flex layout, matching the unwrapped aria-hidden copies.
@@ -76,34 +81,22 @@
         align-items: center;
         display: flex;
         gap: var(--item-gap);
-        // Root transitions transform on every element; that would lag each frame and animate the loop wrap.
-        transition: none;
+        // Only '--drift' transitions, for its end to tell JS it changed; easing the transform would lag each frame and
+        // animate the loop wrap.
+        transition: --drift 1ms;
         width: max-content;
-        will-change: transform;
+        will-change: var(--track-will-change);
     }
 
     &-viewport {
         mask: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
         outline: none;
         overflow: hidden;
+        overflow-x: var(--viewport-overflow-x);
         padding: var(--padding-vertical) 0;
 
         &:focus-visible {
             box-shadow: inset 0 0 0 1px var(--focus-color);
         }
     }
-
-    @media (prefers-reduced-motion: reduce) {
-        &-group--copy {
-            display: none;
-        }
-
-        &-track {
-            will-change: auto;
-        }
-
-        &-viewport {
-            overflow-x: auto;
-        }
-    }
 }

package/src/components/marquee/scss/variables.scss

@@ -1,6 +1,9 @@
 .marquee {
     --color: var(--color-text-300);
     --color-hover: var(--color-text-400);
+    --copy-display: flex;
+    // Read by JS: the share of its speed it drifts at. None holds it still, as a strip to scroll by hand.
+    --drift: 1;
     --fade: var(--size-700);
     --focus-color: var(--color-blue-400);
     --font-size: var(--font-size-300);
@@ -9,7 +12,20 @@
     --item-gap: 40px;
     --item-height: 40px;
     --item-padding-horizontal: var(--size-300);
+    --track-will-change: transform;
     --transition-duration: 0.15s;
+    --viewport-overflow-x: hidden;
+
+    @media (prefers-reduced-motion: reduce) {
+        --drift: 0;
+    }
+
+    // Holding still, it is a strip to scroll by hand.
+    &--still {
+        --copy-display: none;
+        --track-will-change: auto;
+        --viewport-overflow-x: auto;
+    }
 
     // Children re-declare --padding-* via root's `*` rule, so it has to be set here rather than inherited.
     &-viewport {