@fusion.dev/helix-headless 0.144.0 → 0.146.0

package/dist/video-playlist/root/video-playlist-root.js

@@ -4,14 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, MixinControllerActive } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixEndEvent, MixinControllerActive, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
+import { playOrder, stepTo } from '../order.js';
 let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = 'Playlist';
+        this.shuffle = false;
         this.chased = false;
         this.handleSelect = (event) => {
             event.stopImmediatePropagation();
@@ -22,18 +24,23 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             this.requestActive(event.detail.value);
         };
         this.handleNext = () => {
-            this.chased = true;
-            this.step(1);
+            this.next();
         };
         this.handlePrevious = () => {
-            this.chased = true;
-            this.step(-1);
+            this.previous();
         };
         this.handleEnded = (event) => {
             if (event.target !== this.player) {
                 return;
             }
-            this.chased = true;
+            if (this.repeat === 'one') {
+                this.replay();
+                return;
+            }
+            if (this.following(1).next === undefined) {
+                this.dispatchEvent(new HelixEndEvent());
+                return;
+            }
             this.step(1);
         };
     }
@@ -42,17 +49,44 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     }
     get player() {
         const slot = this.renderRoot?.querySelector('slot[name="player"]');
-        const first = slot?.assignedElements()[0];
-        return (first ?? null);
+        return slot?.assignedElements()[0] ?? null;
     }
-    step(by) {
+    following(by) {
         const items = this.items.filter((one) => !one.disabled);
-        const at = items.findIndex((one) => one.value === this.resolveActive(items)?.value);
-        const next = items[at + by];
-        if (next) {
-            this.requestActive(next.value);
+        const values = items.map((one) => one.value);
+        const current = this.resolveActive(items)?.value;
+        this.dealt = this.shuffle ? playOrder(values, true, this.dealt, current) : undefined;
+        const order = this.dealt ?? values;
+        return { current, next: stepTo(order, current, by, this.repeat === 'all') };
+    }
+    step(by) {
+        const { current, next } = this.following(by);
+        if (next === undefined) {
+            return;
+        }
+        if (next === current) {
+            this.replay();
+            return;
+        }
+        this.chased = true;
+        if (!this.requestActive(next)) {
+            this.chased = false;
         }
     }
+    replay() {
+        const player = this.player;
+        if (!player) {
+            return;
+        }
+        player.currentTime = 0;
+        void Promise.resolve(player.play()).catch(() => { });
+    }
+    next() {
+        this.step(1);
+    }
+    previous() {
+        this.step(-1);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelect);
@@ -67,6 +101,12 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         this.removeEventListener('helix-previous', this.handlePrevious);
         this.removeEventListener('ended', this.handleEnded, true);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('shuffle') && !this.shuffle) {
+            this.dealt = undefined;
+        }
+    }
     updated(changed) {
         super.updated?.(changed);
         const items = this.items;
@@ -83,9 +123,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             player.poster = current.poster;
             player.label = current.text;
             if (this.chased) {
-                void player.updateComplete?.then(() => {
-                    player.play();
-                });
+                void player.updateComplete?.then(() => player.play()).catch(() => { });
             }
         }
         this.chased = false;
@@ -100,6 +138,12 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylist.prototype, "repeat", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessVideoPlaylist.prototype, "shuffle", void 0);
 HelixHeadlessVideoPlaylist = __decorate([
     customElement('helix-headless-video-playlist')
 ], HelixHeadlessVideoPlaylist);

package/dist/virtual-list/controls.d.ts

@@ -0,0 +1,4 @@
+/** Takes the controls in `rows` out of the tab order. */
+export declare const holdControls: (rows: Element[]) => void;
+/** Puts the controls in `rows` back in the tab order, as they were written. */
+export declare const releaseControls: (rows: Element[]) => void;

package/dist/virtual-list/controls.js

@@ -0,0 +1,30 @@
+import { focusableElements } from '@fusion.dev/helix-core';
+const held = new WeakMap();
+export const holdControls = (rows) => {
+    for (const row of rows) {
+        if (!(row instanceof HTMLElement)) {
+            continue;
+        }
+        for (const control of focusableElements(row)) {
+            held.set(control, control.getAttribute('tabindex'));
+            control.setAttribute('tabindex', '-1');
+        }
+    }
+};
+export const releaseControls = (rows) => {
+    for (const row of rows) {
+        for (const control of row.querySelectorAll('[tabindex]')) {
+            if (!held.has(control)) {
+                continue;
+            }
+            const was = held.get(control);
+            held.delete(control);
+            if (was === null || was === undefined) {
+                control.removeAttribute('tabindex');
+            }
+            else {
+                control.setAttribute('tabindex', was);
+            }
+        }
+    }
+};

package/dist/virtual-list/fill.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Filling a row from an item, for a list whose rows come from a `<template>`.
+ *
+ * A row template marks its holes with data attributes, so it stays markup a
+ * server can send and a framework can write as a string:
+ *
+ * - `data-field="name"` takes the item's `name` as its text.
+ * - `data-field-href="url"` takes the item's `url` as its `href`, and the same
+ *   for any attribute: `data-field-aria-label`, `data-field-src`,
+ *   `data-field-title`.
+ *
+ * A field is a key, or a path of keys joined by dots (`author.name`).
+ */
+/**
+ * The text a value takes in a row.
+ *
+ * Nothing for a missing value, so a hole whose field is absent is empty and
+ * does not read "undefined".
+ */
+export declare const textOf: (value: unknown) => string;
+/** Fills one element's holes, its own and those below it, from an item. */
+export declare const fillHoles: (root: Element, item: unknown) => void;

package/dist/virtual-list/fill.js

@@ -0,0 +1,23 @@
+import { valueAt } from '@fusion.dev/helix-core';
+export const textOf = (value) => value === undefined || value === null || typeof value === 'object' ? '' : String(value);
+const ATTRIBUTE = 'data-field-';
+const writeAttribute = (element, name, value) => {
+    if (value === undefined || value === null || value === false) {
+        element.removeAttribute(name);
+        return;
+    }
+    element.setAttribute(name, value === true ? '' : textOf(value));
+};
+export const fillHoles = (root, item) => {
+    const holes = [...(root.matches('[data-field]') ? [root] : []), ...root.querySelectorAll('*')];
+    for (const hole of holes) {
+        for (const { name, value } of [...hole.attributes]) {
+            if (name === 'data-field') {
+                hole.textContent = textOf(valueAt(item, value));
+            }
+            else if (name.startsWith(ATTRIBUTE)) {
+                writeAttribute(hole, name.slice(ATTRIBUTE.length), valueAt(item, value));
+            }
+        }
+    }
+};

package/dist/virtual-list/keys.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Which item a key moves to in a vertical list of `count` items, from `at`.
+ *
+ * Index arithmetic, because most of the items are not drawn: the list moves to
+ * an index, scrolls it into view, and focuses the row once it is there. The
+ * keys are the ones a listbox answers:
+ *
+ * - Up and Down move one item.
+ * - Home and End move to the first and the last.
+ * - Page Up and Page Down move by `page`, the number of items on screen less
+ *   one, so the item at one edge of the box lands at the other.
+ *
+ * `undefined` for a key the list does not take, and for an empty list.
+ */
+export declare const stepIndex: (key: string, at: number, count: number, page: number) => number | undefined;

package/dist/virtual-list/keys.js

@@ -0,0 +1,24 @@
+export const stepIndex = (key, at, count, page) => {
+    if (count <= 0) {
+        return undefined;
+    }
+    const last = count - 1;
+    const from = Math.max(0, Math.min(at, last));
+    const jump = Math.max(1, page);
+    switch (key) {
+        case 'ArrowDown':
+            return Math.min(last, from + 1);
+        case 'ArrowUp':
+            return Math.max(0, from - 1);
+        case 'End':
+            return last;
+        case 'Home':
+            return 0;
+        case 'PageDown':
+            return Math.min(last, from + jump);
+        case 'PageUp':
+            return Math.max(0, from - jump);
+        default:
+            return undefined;
+    }
+};

package/dist/virtual-list/plan.d.ts

@@ -0,0 +1,49 @@
+/**
+ * What one pass of a virtual list draws, worked out before any element moves.
+ *
+ * The list keeps the element of a row that stays in the window, so a pass
+ * compares what is drawn with what is wanted and changes only the difference.
+ * These are that comparison and the tab-stop rule that follows it, as
+ * arithmetic over item indices.
+ */
+/** What a pass does to the rows in the tree. */
+export interface DrawPlan {
+    /** The items the pass draws, in order: the window, and a kept item outside it. */
+    wanted: number[];
+    /** The items whose rows leave the tree. */
+    remove: Set<number>;
+}
+/** The window, the set's length, the item kept outside the window, and the rows drawn. */
+export interface DrawInput {
+    /** The first item of the window. */
+    first: number;
+    /** One past the last item of the window. */
+    last: number;
+    /** How many items the set holds. */
+    count: number;
+    /** The item drawn outside the window to keep or take focus, where there is one. */
+    kept?: number | undefined;
+    /** The item each drawn row element holds, `NaN` for an element that holds none. */
+    drawn: readonly number[];
+    /** Whether every drawn row is drawn again from nothing, as for a new way of drawing. */
+    redraw?: boolean;
+}
+/**
+ * Which items a pass draws, and which drawn rows leave.
+ *
+ * A drawn row leaves when its item is not wanted, when it holds no item, or
+ * when everything is drawn again. A wanted item with no row left is drawn new.
+ */
+export declare const drawPlan: ({ count, drawn, first, kept, last, redraw, }: DrawInput) => DrawPlan;
+/**
+ * Which item holds the list's tab stop after a pass.
+ *
+ * The item that held it, while its row is drawn. Otherwise the first item on
+ * screen, held inside the window and the set.
+ */
+export declare const stopAfter: (active: number, wanted: readonly number[], { count, first, last, onScreen, }: {
+    count: number;
+    first: number;
+    last: number;
+    onScreen: number;
+}) => number;

package/dist/virtual-list/plan.js

@@ -0,0 +1,16 @@
+export const drawPlan = ({ count, drawn, first, kept, last, redraw = false, }) => {
+    const wanted = [];
+    for (let at = first; at < Math.min(last, count); at += 1) {
+        wanted.push(at);
+    }
+    if (kept !== undefined && !wanted.includes(kept)) {
+        wanted.push(kept);
+        wanted.sort((a, b) => a - b);
+    }
+    const keep = new Set(wanted);
+    const remove = new Set(drawn.filter((index) => redraw || !Number.isInteger(index) || !keep.has(index)));
+    return { remove, wanted };
+};
+export const stopAfter = (active, wanted, { count, first, last, onScreen, }) => wanted.includes(active)
+    ? active
+    : Math.max(Math.min(onScreen, Math.min(last, count) - 1), first, 0);