@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/tooltip/group.ts

@@ -0,0 +1,162 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+
+
+const GROUP_ITEM = Symbol.for('@esportsplus/ui/tooltip.group.item');
+
+const GROUP_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.group.tooltip-content');
+
+
+type A = Attributes & {
+    [GROUP_ITEM]?: Attributes,
+    [GROUP_TOOLTIP_CONTENT]?: Attributes & { direction?: 'e' | 'n' | 's' | 'w' },
+    items: (Attributes & { content: Renderable<unknown>, tooltip: Renderable<unknown> })[],
+    onfocusin?: never,
+    onfocusout?: never,
+    onkeydown?: never,
+    onpointerleave?: never,
+    onpointerover?: never,
+    state?: { active: boolean, gliding: boolean, index: number }
+};
+
+
+function item(container: HTMLElement, target: EventTarget | null) {
+    let element = (target as Element | null)?.closest?.<HTMLElement>('.tooltip-group-item');
+
+    if (!element || element.closest('.tooltip-group') !== container) {
+        return;
+    }
+
+    return element;
+}
+
+// The layers are 'max-content', so a layer's box is the size the bubble should take.
+function measure(container: HTMLElement, element: HTMLElement, index: number) {
+    let content = container.querySelector<HTMLElement>('.tooltip-group-content'),
+        layer = content?.querySelectorAll<HTMLElement>('.tooltip-group-layer')[index];
+
+    if (!content || !layer) {
+        return;
+    }
+
+    let style = content.style;
+
+    style.setProperty('--group-height', `${layer.offsetHeight}px`);
+    style.setProperty('--group-width', `${layer.offsetWidth}px`);
+    style.setProperty('--group-x', `${element.offsetLeft + element.offsetWidth / 2}px`);
+    style.setProperty('--group-y', `${element.offsetTop + element.offsetHeight / 2}px`);
+
+    return true;
+}
+
+
+export default component(
+    ({ items, state = reactive({ active: false, gliding: false, index: -1 }), ...attributes }: A) => {
+        let { direction = 'n', ...tooltipContent } = attributes[GROUP_TOOLTIP_CONTENT] ?? {},
+            frame = 0;
+
+        let close = () => {
+            cancelAnimationFrame(frame);
+            state.active = false;
+            state.gliding = false;
+        };
+
+        let open = (container: HTMLElement, element: HTMLElement) => {
+            let index = Number(element.dataset.index);
+
+            if (state.active && state.index === index) {
+                return;
+            }
+
+            if (!measure(container, element, index)) {
+                return;
+            }
+
+            state.index = index;
+
+            if (state.active) {
+                return;
+            }
+
+            state.active = true;
+
+            // The template applies classes in its own frame; one frame is not enough to paint the pop without glide.
+            frame = requestAnimationFrame(() => {
+                frame = requestAnimationFrame(() => {
+                    state.gliding = true;
+                });
+            });
+        };
+
+        return html`
+            <div
+                class='tooltip-group'
+                ${attributes}
+                ${{
+                    class: () => `${state.active ? '--active' : ''} ${state.gliding ? '--gliding' : ''}`,
+                    ondisconnect: () => {
+                        cancelAnimationFrame(frame);
+                    },
+                    onfocusin: (e: FocusEvent) => {
+                        let container = e.currentTarget as HTMLElement,
+                            element = item(container, e.target);
+
+                        if (element && (e.target as Element).matches(':focus-visible')) {
+                            open(container, element);
+                        }
+                    },
+                    onfocusout: (e: FocusEvent) => {
+                        if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
+                            close();
+                        }
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        if (e.key === 'Escape') {
+                            close();
+                        }
+                    },
+                    onpointerleave: close,
+                    onpointerover: (e: PointerEvent) => {
+                        let container = e.currentTarget as HTMLElement,
+                            element = item(container, e.target);
+
+                        if (element) {
+                            open(container, element);
+                        }
+                    }
+                }}
+            >
+                ${items.map(({ content, tooltip, ...o }, i) => html`
+                    <div
+                        class='tooltip-group-item'
+                        data-index='${i}'
+                        ${o}
+                        ${attributes[GROUP_ITEM]}
+                    >
+                        ${content}
+                    </div>
+                `)}
+
+                <div
+                    class='tooltip-group-content ${`tooltip-group-content--${direction}`}'
+                    role='tooltip'
+                    ${tooltipContent}
+                >
+                    <div class='tooltip-group-box'>
+                        ${items.map(({ tooltip }, i) => html`
+                            <div
+                                class='tooltip-group-layer'
+                                ${{
+                                    class: () => state.index === i ? '--active' : state.index > i ? '--before' : '--after'
+                                }}
+                            >
+                                ${tooltip}
+                            </div>
+                        `)}
+                    </div>
+                </div>
+            </div>
+        `;
+    },
+    { item: GROUP_ITEM, tooltipContent: GROUP_TOOLTIP_CONTENT }
+);

package/src/components/tooltip/index.ts

@@ -1,10 +1,12 @@
+import context from './context';
+import group from './group';
 import menu from './menu';
 import onclick from './onclick';
 import onhover from './onhover';
 import './scss/index.scss';
 
 
-const tooltip: { menu: typeof menu, onclick: typeof onclick, onhover: typeof onhover } = { menu, onclick, onhover };
+const tooltip: { context: typeof context, group: typeof group, menu: typeof menu, onclick: typeof onclick, onhover: typeof onhover } = { context, group, menu, onclick, onhover };
 
 
 export default tooltip;

package/src/components/tooltip/menu.ts

@@ -1,20 +1,33 @@
-import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { MENU_OPTION, MENU_TOOLTIP_CONTENT } from './constants';
 import onclick from './onclick';
+import render, { type Option } from './options';
+
+
+const MENU_OPTION = Symbol.for('@esportsplus/ui/tooltip.menu.option');
+
+const MENU_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.menu.tooltip-content');
 
 
 type A = Attributes & {
     [MENU_OPTION]?: Attributes,
     [MENU_TOOLTIP_CONTENT]?: Attributes & { direction?: string },
-    options: (Attributes & { content: Renderable<unknown> })[],
+    onanimationcancel?: never,
+    onanimationend?: never,
+    onanimationstart?: never,
+    onclick?: never,
+    ondocumentclick?: never,
+    ontransitioncancel?: never,
+    ontransitionend?: never,
+    ontransitionrun?: never,
+    options: Option[],
     state?: { active: boolean },
     toggle?: boolean
 };
 
 
-export default Object.assign(component<A>(
-    ({ options, state = reactive({ active: false }), ...attributes }, content) => {
+export default component(
+    ({ options, state = reactive({ active: false }), ...attributes }: A, content) => {
         let { direction = 'nw', ...tooltipContent } = attributes[MENU_TOOLTIP_CONTENT] ?? {};
 
         return onclick(
@@ -29,32 +42,13 @@ export default Object.assign(component<A>(
                         inert: () => !state.active
                     }}
                 >
-                    ${options.map(({ content, ...o }) => {
-                        if (o.href) {
-                            return html`
-                                <a
-                                    class='link --width-full'
-                                    target='_blank'
-                                    ${o}
-                                    ${attributes[MENU_OPTION]}
-                                >
-                                    ${content}
-                                </a>
-                            `;
-                        }
-
-                        return html`
-                            <div
-                                class='link --width-full'
-                                ${o}
-                                ${attributes[MENU_OPTION]}
-                            >
-                                ${content}
-                            </div>
-                        `;
-                    })}
+                    ${render(options, attributes[MENU_OPTION])}
                 </div>
             `
         );
-    }
-), { option: MENU_OPTION, tooltipContent: MENU_TOOLTIP_CONTENT } as const);
+    },
+    { option: MENU_OPTION, tooltipContent: MENU_TOOLTIP_CONTENT }
+);
+
+
+export type { A };

package/src/components/tooltip/onclick.ts

@@ -1,29 +1,67 @@
 import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import { morph, morphing } from './utilities';
 
 
-export default component<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
-    ({ state = reactive({ active: false }), toggle = false, ...attributes }, content) => html`
-        <div
-            class='tooltip'
-            ${attributes}
-            ${{
-                class: () => state.active && '--active',
-                onclick: function(e) {
-                    state.active = this === e.target || toggle ? !state.active : true;
-                },
-                ondocumentclick: function(this, event) {
-                    if (!this?.isConnected || !state.active) {
-                        return;
-                    }
-
-                    if (!this.contains(event.target as Node | null)) {
-                        state.active = false;
-                    }
-                }
-            }}
-        >
-            ${content}
-        </div>
-    `
+type A = Attributes & {
+    onanimationcancel?: never,
+    onanimationend?: never,
+    onanimationstart?: never,
+    onclick?: never,
+    ondocumentclick?: never,
+    ontransitioncancel?: never,
+    ontransitionend?: never,
+    ontransitionrun?: never,
+    state?: { active: boolean },
+    toggle?: boolean
+};
+
+
+export default component<A>(
+    ({ state = reactive({ active: false }), toggle = false, ...attributes }, content) => {
+        let cancel: VoidFunction | undefined;
+
+        return html`
+            <div
+                class='tooltip'
+                ${attributes}
+                ${{
+                    class: () => state.active && '--active',
+                    onanimationcancel: morphing(false),
+                    onanimationend: morphing(false),
+                    onanimationstart: morphing(true),
+                    onclick: function(e) {
+                        let active = this === e.target || toggle ? !state.active : true;
+
+                        cancel?.();
+                        cancel = undefined;
+
+                        if (active && !state.active) {
+                            cancel = morph(this, () => {
+                                cancel = undefined;
+                                state.active = true;
+                            });
+                            return;
+                        }
+
+                        state.active = active;
+                    },
+                    ondocumentclick: function(this, event) {
+                        if (!this?.isConnected || !state.active) {
+                            return;
+                        }
+
+                        if (!this.contains(event.target as Node | null)) {
+                            state.active = false;
+                        }
+                    },
+                    ontransitioncancel: morphing(false),
+                    ontransitionend: morphing(false),
+                    ontransitionrun: morphing(true)
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
 );

package/src/components/tooltip/onhover.ts

@@ -1,23 +1,153 @@
 import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import { content, morph, morphing } from './utilities';
 
 
-export default component<Attributes & { state?: { active: boolean } }>(
-    ({ state = reactive({ active: false }), ...attributes }, content) => html`
-        <div
-            class='tooltip'
-            ${attributes}
-            ${{
-                class: () => state.active && '--active',
-                onmouseover: () => {
-                    state.active = true;
-                },
-                onmouseout: () => {
-                    state.active = false;
-                }
-            }}
-        >
-            ${content}
-        </div>
-    `
+type A = Attributes & {
+    onanimationcancel?: never,
+    onanimationend?: never,
+    onanimationstart?: never,
+    onmouseover?: never,
+    onmouseout?: never,
+    onpointermove?: never,
+    ontransitioncancel?: never,
+    ontransitionend?: never,
+    ontransitionrun?: never,
+    state?: { active: boolean }
+};
+
+type Point = [number, number];
+
+
+function cross(o: Point, a: Point, b: Point) {
+    return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+}
+
+// Andrew's monotone chain: convex hull of the pointer and the tooltip corners.
+function hull(points: Point[]) {
+    let lower: Point[] = [],
+        upper: Point[] = [];
+
+    points.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+
+    for (let i = 0, n = points.length; i < n; i++) {
+        while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], points[i]) <= 0) {
+            lower.pop();
+        }
+
+        lower.push(points[i]);
+    }
+
+    for (let i = points.length - 1; i >= 0; i--) {
+        while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], points[i]) <= 0) {
+            upper.pop();
+        }
+
+        upper.push(points[i]);
+    }
+
+    lower.pop();
+    upper.pop();
+
+    return lower.concat(upper);
+}
+
+function safe(element: HTMLElement, x: number, y: number) {
+    let rect = element.getBoundingClientRect();
+
+    // Only follow the pointer while it is over the trigger; once it enters the
+    // cone the apex stays put, so drifting sideways leaves the shape and closes.
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+        return;
+    }
+
+    let tooltip = content(element);
+
+    if (!tooltip) {
+        return;
+    }
+
+    let box = tooltip.getBoundingClientRect(),
+        left = Math.min(x, box.left),
+        points = hull([[x, y], [box.left, box.top], [box.right, box.top], [box.right, box.bottom], [box.left, box.bottom]]),
+        polygon = '',
+        style = element.style,
+        top = Math.min(y, box.top);
+
+    for (let i = 0, n = points.length; i < n; i++) {
+        polygon += `${i ? ', ' : ''}${points[i][0] - left}px ${points[i][1] - top}px`;
+    }
+
+    style.setProperty('--safe-area', `polygon(${polygon})`);
+    style.setProperty('--safe-height', `${Math.max(y, box.bottom) - top}px`);
+    style.setProperty('--safe-left', `${left - rect.left - element.clientLeft}px`);
+    style.setProperty('--safe-top', `${top - rect.top - element.clientTop}px`);
+    style.setProperty('--safe-width', `${Math.max(x, box.right) - left}px`);
+}
+
+
+export default component<A>(
+    ({ state = reactive({ active: false }), ...attributes }, content) => {
+        let cancel: VoidFunction | undefined,
+            settled = morphing(false),
+            x = 0,
+            y = 0;
+
+        return html`
+            <div
+                class='tooltip'
+                ${attributes}
+                ${{
+                    class: () => state.active && '--active',
+                    onanimationcancel: settled,
+                    onanimationend: settled,
+                    onanimationstart: morphing(true),
+                    onmouseover: (e: MouseEvent) => {
+                        let element = e.currentTarget as HTMLElement;
+
+                        // Moving between the trigger and its own children isn't entering it.
+                        if (state.active || cancel || element.contains(e.relatedTarget as Node | null)) {
+                            return;
+                        }
+
+                        cancel = morph(element, () => {
+                            cancel = undefined;
+                            state.active = true;
+                        });
+                    },
+                    onmouseout: (e: MouseEvent) => {
+                        if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as Node | null)) {
+                            return;
+                        }
+
+                        cancel?.();
+                        cancel = undefined;
+                        state.active = false;
+                    },
+                    onpointermove: (e: PointerEvent) => {
+                        let element = e.currentTarget as HTMLElement;
+
+                        x = e.clientX;
+                        y = e.clientY;
+
+                        if (state.active) {
+                            safe(element, x, y);
+                        }
+                    },
+                    ontransitioncancel: settled,
+                    // Content animates in; re-measure once it settles so the cone targets its final position.
+                    ontransitionend: (e: TransitionEvent) => {
+                        settled(e);
+
+                        if (state.active) {
+                            safe(e.currentTarget as HTMLElement, x, y);
+                        }
+                    },
+                    ontransitionrun: morphing(true)
+                }}
+            >
+                ${content}
+            </div>
+        `;
+    }
 );

package/src/components/tooltip/options.ts

@@ -0,0 +1,33 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+
+
+type Option = Attributes & { content: Renderable<unknown> };
+
+
+export default (options: Option[], attributes?: Attributes) => options.map(({ content, ...o }) => {
+    if (o.href) {
+        return html`
+            <a
+                class='link --width-full'
+                target='_blank'
+                ${o}
+                ${attributes}
+            >
+                ${content}
+            </a>
+        `;
+    }
+
+    return html`
+        <div
+            class='link --width-full'
+            ${o}
+            ${attributes}
+        >
+            ${content}
+        </div>
+    `;
+});
+
+
+export type { Option };

package/src/components/tooltip/scss/_center.scss

@@ -3,11 +3,7 @@
         bottom: 50%;
         position: absolute;
         right: 50%;
-        transform: translate(50%, 50%);
         transform-origin: center center;
-
-        #{$active} {
-            transform: translate(50%, 50%);
-        }
+        translate: 50% 50%;
     }
 }

package/src/components/tooltip/scss/_east.scss

@@ -1,23 +1,23 @@
 @mixin east($active) {
     &--en,
     &--es {
-        left: calc(100% - var(--spacer));
+        left: calc(100% + var(--spacer) - var(--offset));
         position: absolute;
 
         #{$active} {
-            transform: translateX(calc(var(--spacer) * 2));
+            translate: var(--offset);
         }
     }
 
     &--e {
         bottom: 50%;
-        left: calc(100% - var(--spacer));
+        left: calc(100% + var(--spacer) - var(--offset));
         position: absolute;
-        transform: translateY(50%);
         transform-origin: center left;
+        translate: 0 50%;
 
         #{$active} {
-            transform: translate(calc(var(--spacer) * 2), 50%);
+            translate: var(--offset) 50%;
         }
     }