@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/clipboard/copy.ts

@@ -32,12 +32,12 @@ export default component<A, (state: { copied: boolean, failed: boolean }) => Ren
 
                         reset();
 
-                        state.copied = await write(value);
-
-                        if (!state.copied) {
-                            state.failed = true;
-                        }
+                        let copied = await write(value);
 
+                        // A second click can land while the first is still writing; only the last one's timer runs.
+                        clearTimeout(timer);
+                        state.copied = copied;
+                        state.failed = !copied;
                         timer = setTimeout(reset, timeout);
                     }
                 }}

package/src/components/color-picker/index.ts

@@ -1,5 +1,9 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
+import { measure, slides, timing } from '~/shared/animation';
+import { clamp } from '~/shared/clamp';
+import { keystep } from '~/shared/keystep';
+import copy from '~/components/copy';
 import input from '~/components/input';
 import range from '~/components/range';
 import './scss/index.scss';
@@ -7,9 +11,9 @@ import './scss/index.scss';
 
 type A = Attributes & {
     [COLOR_PICKER_SWATCH]?: Attributes;
-    recent?: string[];
+    recent?: false | string[];
     state?: { error: string, value: string };
-    value?: string;
+    value: string;
 };
 
 type Channel = { active: boolean, error: string, value: number };
@@ -17,41 +21,25 @@ type Channel = { active: boolean, error: string, value: number };
 type Hsva = { a: number, h: number, s: number, v: number };
 
 type Parts = {
-    alpha?: HTMLInputElement;
     hex?: HTMLInputElement;
-    hue?: HTMLInputElement;
     swatches?: HTMLElement;
 };
 
 
-const COLOR_PICKER_SWATCH = Symbol.for('@esportsplus/ui/color-picker.swatch');
+const HEX_PREFIX = /^#/;
+
+const HEX_COLOR = /^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 
-const DEFAULT_RECENT = ['#E5484D', '#F5A524', '#30A46C', '#0090FF', '#8E4EC6'];
 
-const DEFAULT_VALUE = '#5B8DEF';
+const COLOR_PICKER_SWATCH = Symbol.for('@esportsplus/ui/color-picker.swatch');
 
 // Wide enough for a useful history, narrow enough to stay one row at 320px.
 const MAX_RECENT = 8;
 
-const SWATCH: KeyframeAnimationOptions = {
-    duration: 300,
-    easing: 'linear(0, 0.058, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.897, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)'
-};
-
-const SWATCH_EXIT: KeyframeAnimationOptions = {
-    duration: 150,
-    easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
-    fill: 'forwards'
-};
-
 
 let uid = 0;
 
 
-function clamp(n: number) {
-    return Math.min(Math.max(n, 0), 1);
-}
-
 function fromHex(hex: string, previous: Hsva): Hsva | null {
     let rgba = parse(hex);
 
@@ -62,35 +50,10 @@ function fromHex(hex: string, previous: Hsva): Hsva | null {
     return { ...toHsv(rgba.r, rgba.g, rgba.b, previous), a: rgba.a };
 }
 
-// Arrows move one step, Shift or the Page keys ten, Home and End jump to the ends.
-function keystep(e: KeyboardEvent, step: number) {
-    let big = step * 10,
-        unit = e.shiftKey ? big : step;
-
-    switch (e.key) {
-        case 'ArrowRight':
-        case 'ArrowUp':
-            return unit;
-        case 'ArrowDown':
-        case 'ArrowLeft':
-            return -unit;
-        case 'End':
-            return Infinity;
-        case 'Home':
-            return -Infinity;
-        case 'PageDown':
-            return -big;
-        case 'PageUp':
-            return big;
-    }
-
-    return null;
-}
-
 function parse(value: string) {
-    let hex = value.trim().replace(/^#/, '');
+    let hex = value.trim().replace(HEX_PREFIX, '');
 
-    if (!/^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) {
+    if (!HEX_COLOR.test(hex)) {
         return null;
     }
 
@@ -108,10 +71,6 @@ function parse(value: string) {
     };
 }
 
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-
 function rgb({ h, s, v }: Hsva) {
     function f(n: number) {
         let k = (n + h / 60) % 6;
@@ -158,22 +117,30 @@ function toHsv(r: number, g: number, b: number, previous: Hsva) {
 function template(
     this: { attributes?: Pick<A, typeof COLOR_PICKER_SWATCH> } | void,
     {
-        recent: initial = DEFAULT_RECENT,
-        value = DEFAULT_VALUE,
+        recent: initial = [],
         state = reactive({ error: '', value: '' }),
+        value,
         ...attributes
-    }: A = {}
+    }: A
 ) {
-    let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 }) ?? { a: 1, h: 220, s: 0.6, v: 0.9 },
-        alpha: Channel = reactive({ active: false, error: '', value: Math.round(start.a * 100) }),
+    let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 });
+
+    if (!start) {
+        throw new Error(`Color picker: '${state.value || value}' is not a valid hex color`);
+    }
+
+    let alpha: Channel = reactive({ active: false, error: '', value: Math.round(start.a * 100) }),
         color = reactive({ a: start.a, h: start.h, s: start.s, v: start.v }),
         dirty = { alpha: false, hue: false, pad: false },
+        history = initial !== false,
         hue: Channel = reactive({ active: false, error: '', value: Math.round(start.h) }),
         id = `color-picker-${++uid}`,
+        // Stand-ins for swatches pushed out of the recent list, fading out where they stood.
+        leaving = reactive([] as { hex: string, left: number, top: number }[]),
         parts: Parts = {},
         picker = reactive({ active: '', invalid: false }),
         pointer = { alpha: false, hue: false, pad: -1 },
-        recent = reactive(initial.map((hex) => hex.toUpperCase()));
+        recent = reactive((initial || []).map((hex) => hex.toUpperCase()));
 
     state.value = toHex(color);
 
@@ -190,7 +157,7 @@ function template(
             // Enter keeps the text so it can be fixed; leaving the field puts the real value back rather than
             // stranding a broken one.
             if (leaving) {
-                field.value = toHex(read()).slice(1);
+                field.value = toHex(read());
             }
 
             picker.invalid = !leaving;
@@ -201,7 +168,7 @@ function template(
 
         picker.invalid = false;
         update(next);
-        field.value = toHex(next).slice(1);
+        field.value = toHex(next);
 
         if (changed) {
             commit();
@@ -214,25 +181,22 @@ function template(
 
         picker.active = hex;
 
-        if (recent[0] === hex) {
+        if (!history || recent[0] === hex) {
             return;
         }
 
         let container = parts.swatches,
-            dropped: { node: HTMLElement, rect: DOMRect }[] = [],
-            first = new Map<string, DOMRect>(),
+            dropped: { hex: string, rect: DOMRect }[] = [],
             index = recent.indexOf(hex),
             kept = recent.filter((c) => c !== hex).slice(0, MAX_RECENT - 1);
 
+        // Swatches lead the container in 'recent' order, ghosts after them.
         if (container) {
-            for (let element of container.querySelectorAll<HTMLElement>('.color-picker-swatch')) {
-                let key = element.dataset.hex ?? '',
-                    rect = element.getBoundingClientRect();
+            measure(container.children);
 
-                first.set(key, rect);
-
-                if (key !== hex && !kept.includes(key)) {
-                    dropped.push({ node: element.cloneNode(true) as HTMLElement, rect });
+            for (let i = 0, n = recent.length; i < n; i++) {
+                if (recent[i] !== hex && !kept.includes(recent[i])) {
+                    dropped.push({ hex: recent[i], rect: container.children[i].getBoundingClientRect() });
                 }
             }
         }
@@ -248,7 +212,7 @@ function template(
         }
 
         if (container) {
-            requestAnimationFrame(() => flip(container, first, dropped));
+            requestAnimationFrame(() => flip(container, dropped));
         }
     }
 
@@ -260,44 +224,36 @@ function template(
 
     // Runs after the swatch list has re-rendered: survivors slide from where they were, newcomers grow in and
     // the dropped ones fade out from a stand-in, since their own nodes are already gone.
-    function flip(container: HTMLElement, first: Map<string, DOMRect>, dropped: { node: HTMLElement, rect: DOMRect }[]) {
+    function flip(container: HTMLElement, dropped: { hex: string, rect: DOMRect }[]) {
         let box = container.getBoundingClientRect(),
-            still = reduced();
-
-        for (let element of container.querySelectorAll<HTMLElement>('.color-picker-swatch')) {
-            let previous = first.get(element.dataset.hex ?? '');
-
-            if (!previous) {
-                element.animate(
-                    still
-                        ? [{ opacity: 0 }, { opacity: 1 }]
-                        : [{ filter: 'blur(4px)', opacity: 0, scale: '0.6' }, { filter: 'blur(0px)', opacity: 1, scale: '1' }],
-                    SWATCH
-                );
-                continue;
+            computed = getComputedStyle(container),
+            enter = timing(computed, 'swatch'),
+            from = {
+                filter: `blur(${computed.getPropertyValue('--swatch-blur').trim()})`,
+                opacity: 0,
+                scale: computed.getPropertyValue('--swatch-scale').trim()
+            },
+            move = timing(computed, 'swatch-shift');
+
+        slides([...container.children].slice(0, recent.length), move, (element) => {
+            if (enter) {
+                element.animate([from, { filter: 'blur(0px)', opacity: 1, scale: '1' }], enter);
             }
+        });
 
-            let x = previous.left - element.getBoundingClientRect().left;
-
-            if (x !== 0 && !still) {
-                element.animate([{ translate: `${x}px 0` }, { translate: '0 0' }], SWATCH);
-            }
+        for (let { hex, rect } of dropped) {
+            leaving.push({ hex, left: rect.left - box.left, top: rect.top - box.top });
         }
+    }
 
-        for (let { node, rect } of dropped) {
-            node.classList.add('--leaving');
-            node.removeAttribute('aria-pressed');
-            node.setAttribute('aria-hidden', 'true');
-            node.style.left = `${rect.left - box.left}px`;
-            node.style.top = `${rect.top - box.top}px`;
-            container.append(node);
-            node.animate(
-                still
-                    ? [{ opacity: 1 }, { opacity: 0 }]
-                    : [{ filter: 'blur(0px)', opacity: 1, scale: '1' }, { filter: 'blur(4px)', opacity: 0, scale: '0.6' }],
-                SWATCH_EXIT
-            ).onfinish = () => node.remove();
-        }
+    // Pointer capture keeps the drag alive outside the pad, so the point is clamped back onto it.
+    function pick(pad: HTMLElement, e: PointerEvent) {
+        let rect = pad.getBoundingClientRect();
+
+        update({
+            s: clamp((e.clientX - rect.left) / rect.width, 0, 1),
+            v: 1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)
+        });
     }
 
     function read(): Hsva {
@@ -305,9 +261,8 @@ function template(
     }
 
     function slide(channel: 'alpha' | 'hue', e: KeyboardEvent) {
-        let element = e.currentTarget as HTMLInputElement,
-            max = Number(element.max),
-            delta = keystep(e, 1);
+        let delta = keystep(e, 1),
+            target = channel === 'hue' ? hue : alpha;
 
         pointer[channel] = false;
 
@@ -323,30 +278,18 @@ function template(
         }
 
         e.preventDefault();
-
-        let next = Math.min(Math.max(element.valueAsNumber + delta, 0), max);
-
-        element.value = String(next);
-        (channel === 'hue' ? hue : alpha).value = next;
+        target.value = clamp(target.value + delta, 0, Number((e.currentTarget as HTMLInputElement).max));
     }
 
-    function sync() {
-        let { alpha: a, hex, hue: h } = parts;
+    function sync(hex: string) {
+        let field = parts.hex;
 
         alpha.value = Math.round(color.a * 100);
         hue.value = Math.round(color.h);
 
-        if (a && a.valueAsNumber !== alpha.value) {
-            a.value = String(alpha.value);
-        }
-
-        if (h && h.valueAsNumber !== hue.value) {
-            h.value = String(hue.value);
-        }
-
         // The field follows the color except while it is being typed in.
-        if (hex && document.activeElement !== hex) {
-            hex.value = toHex(read()).slice(1);
+        if (field && document.activeElement !== field) {
+            field.value = hex;
         }
     }
 
@@ -374,44 +317,26 @@ function template(
         }
 
         state.value = hex;
-        sync();
+        sync(hex);
     }
 
-    let disposers = [
-        effect(() => {
-            let next = alpha.value;
-
-            untrack(() => {
-                if (Math.round(color.a * 100) !== next) {
-                    update({ a: next / 100 });
-                }
-            });
-        }),
-        effect(() => {
-            let next = hue.value;
-
-            untrack(() => {
-                if (Math.round(color.h) !== next) {
-                    update({ h: next });
-                }
-            });
-        }),
-        effect(() => {
-            let next = state.value;
+    effect(() => alpha.value, (next) => {
+        if (Math.round(color.a * 100) !== next) {
+            update({ a: next / 100 });
+        }
+    });
 
-            untrack(() => {
-                let parsed = next && toHex(read()) !== next.toUpperCase() ? fromHex(next, read()) : null;
+    effect(() => hue.value, (next) => {
+        if (Math.round(color.h) !== next) {
+            update({ h: next });
+        }
+    });
 
-                if (parsed) {
-                    update(parsed);
-                }
-            });
-        })
-    ];
+    effect(() => state.value, (next) => {
+        let parsed = next && toHex(read()) !== next.toUpperCase() ? fromHex(next, read()) : null;
 
-    onCleanup(() => {
-        for (let i = 0, n = disposers.length; i < n; i++) {
-            disposers[i]();
+        if (parsed) {
+            update(parsed);
         }
     });
 
@@ -447,10 +372,10 @@ function template(
 
                         // Left and right move saturation, the rest brightness, matching the axes on screen.
                         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                            update({ s: clamp(color.s + delta) });
+                            update({ s: clamp(color.s + delta, 0, 1) });
                         }
                         else {
-                            update({ v: clamp(color.v + delta) });
+                            update({ v: clamp(color.v + delta, 0, 1) });
                         }
                     },
                     onpointercancel: (e: PointerEvent) => {
@@ -459,8 +384,7 @@ function template(
                             commit();
                         }
                     },
-                    // Pointer capture keeps the drag alive outside the pad, and only the first pointer counts, so
-                    // a second finger can't make the handle jump.
+                    // Only the first pointer counts, so a second finger can't make the handle jump.
                     onpointerdown: function(this: HTMLElement, e: PointerEvent) {
                         if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
                             return;
@@ -468,25 +392,12 @@ function template(
 
                         pointer.pad = e.pointerId;
                         this.setPointerCapture(e.pointerId);
-
-                        let rect = this.getBoundingClientRect();
-
-                        update({
-                            s: clamp((e.clientX - rect.left) / rect.width),
-                            v: 1 - clamp((e.clientY - rect.top) / rect.height)
-                        });
+                        pick(this, e);
                     },
                     onpointermove: function(this: HTMLElement, e: PointerEvent) {
-                        if (e.pointerId !== pointer.pad) {
-                            return;
+                        if (e.pointerId === pointer.pad) {
+                            pick(this, e);
                         }
-
-                        let rect = this.getBoundingClientRect();
-
-                        update({
-                            s: clamp((e.clientX - rect.left) / rect.width),
-                            v: 1 - clamp((e.clientY - rect.top) / rect.height)
-                        });
                     },
                     onpointerup: (e: PointerEvent) => {
                         if (e.pointerId === pointer.pad) {
@@ -522,9 +433,6 @@ function template(
                                 commit();
                             }
                         },
-                        onconnect: (element: HTMLInputElement) => {
-                            parts.hue = element;
-                        },
                         onkeydown: (e: KeyboardEvent) => slide('hue', e),
                         onpointerdown: () => {
                             pointer.hue = true;
@@ -550,9 +458,6 @@ function template(
                                 commit();
                             }
                         },
-                        onconnect: (element: HTMLInputElement) => {
-                            parts.alpha = element;
-                        },
                         onkeydown: (e: KeyboardEvent) => slide('alpha', e),
                         onpointerdown: () => {
                             pointer.alpha = true;
@@ -565,19 +470,18 @@ function template(
             </div>
 
             <div class='color-picker-fields'>
-                <label class='color-picker-hex ${() => picker.invalid && '--invalid'}'>
-                    <span class='color-picker-hash'>#</span>
+                <div class='color-picker-field'>
                     ${input({
                         'aria-invalid': () => picker.invalid ? 'true' : 'false',
                         'aria-label': 'Hex color',
                         autocapitalize: 'characters',
                         autocomplete: 'off',
-                        class: 'color-picker-hex-input',
+                        class: 'color-picker-hex',
                         maxlength: 9,
                         onblur: () => apply(true),
                         onconnect: (element: HTMLInputElement) => {
                             parts.hex = element;
-                            element.value = toHex(read()).slice(1);
+                            element.value = toHex(read());
                         },
                         onfocus: function(this: HTMLInputElement) {
                             this.select();
@@ -590,61 +494,84 @@ function template(
                                 apply(false);
                             }
                             else if (e.key === 'Escape') {
-                                this.value = toHex(read()).slice(1);
+                                this.value = toHex(read());
                                 picker.invalid = false;
                             }
                         },
                         spellcheck: false
                     })}
-                </label>
+                    ${copy({
+                        class: 'color-picker-copy',
+                        label: 'Copy hex color',
+                        success: 'Hex color copied',
+                        value: () => toHex(read())
+                    })}
+                </div>
                 <span aria-hidden='true' class='color-picker-alpha'>${() => `${Math.round(color.a * 100)}%`}</span>
-                <span aria-live='polite' class='color-picker-status'>${() => picker.invalid ? 'Not a valid hex color' : ''}</span>
+                <span aria-live='polite' class='color-picker-status'>${() => picker.invalid && 'Not a valid hex color'}</span>
             </div>
 
-            <div class='color-picker-recent'>
-                <p class='color-picker-recent-label' id='${id}-recent'>Recent</p>
-                <div
-                    aria-labelledby='${id}-recent'
-                    class='color-picker-swatches'
-                    role='group'
-                    ${{
-                        onrender: (element: HTMLElement) => {
-                            parts.swatches = element;
-                        }
-                    }}
-                >
-                    ${html.reactive(recent, (hex) => html`
-                        <button
-                            aria-label='Use ${hex}'
-                            class='color-picker-swatch'
-                            data-hex='${hex}'
-                            style='--swatch: ${hex};'
-                            type='button'
-                            ${this?.attributes?.[COLOR_PICKER_SWATCH]}
-                            ${attributes[COLOR_PICKER_SWATCH]}
-                            ${{
-                                'aria-pressed': () => picker.active === hex ? 'true' : 'false',
-                                class: () => picker.active === hex && '--active',
-                                onclick: () => {
-                                    let next = fromHex(hex, read());
-
-                                    if (!next) {
-                                        return;
+            ${history && html`
+                <div class='color-picker-recent' ${{ hidden: () => recent.length === 0 }}>
+                    <p class='color-picker-recent-label' id='${id}-recent'>Recent</p>
+                    <div
+                        aria-labelledby='${id}-recent'
+                        class='color-picker-swatches'
+                        role='group'
+                        ${{
+                            onconnect: (element: HTMLElement) => {
+                                parts.swatches = element;
+                            }
+                        }}
+                    >
+                        ${html.reactive(recent, (hex) => html`
+                            <button
+                                aria-label='Use ${hex}'
+                                class='color-picker-swatch'
+                                style='--swatch: ${hex};'
+                                type='button'
+                                ${this?.attributes?.[COLOR_PICKER_SWATCH]}
+                                ${attributes[COLOR_PICKER_SWATCH]}
+                                ${{
+                                    'aria-pressed': () => picker.active === hex ? 'true' : 'false',
+                                    class: () => picker.active === hex && '--active',
+                                    onclick: () => {
+                                        let next = fromHex(hex, read());
+
+                                        if (!next) {
+                                            return;
+                                        }
+
+                                        // Applies without reordering, so the swatch under the cursor stays put.
+                                        update(next);
+                                        picker.active = hex;
+                                        picker.invalid = false;
                                     }
-
-                                    // Applies without reordering, so the swatch under the cursor stays put.
-                                    update(next);
-                                    picker.active = hex;
-                                    picker.invalid = false;
-                                }
-                            }}
-                        ></button>
-                    `)}
+                                }}
+                            ></button>
+                        `)}
+                        ${html.reactive(leaving, (ghost) => html`
+                            <span
+                                aria-hidden='true'
+                                class='color-picker-swatch color-picker-swatch--leaving'
+                                style='--swatch: ${ghost.hex}; left: ${ghost.left}px; top: ${ghost.top}px;'
+                                ${{
+                                    onanimationend: () => {
+                                        let at = leaving.indexOf(ghost);
+
+                                        if (at !== -1) {
+                                            leaving.splice(at, 1);
+                                        }
+                                    }
+                                }}
+                            ></span>
+                        `)}
+                    </div>
                 </div>
-            </div>
+            `}
         </div>
     `;
 }
 
 
-export default Object.assign(template, { swatch: COLOR_PICKER_SWATCH } as const);
+export default component(template, { swatch: COLOR_PICKER_SWATCH });