@fusion.dev/helix-headless 0.162.1 → 0.164.0

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

@@ -4,7 +4,7 @@ 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, drawStatus, formatWords, HelixElement, HelixEndEvent, inlineStep, MixinControllerActive, StatusController, words, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, formatWords, HelixElement, HelixEndEvent, inlineStep, MixinControllerActive, ReorderController, StatusController, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
@@ -12,11 +12,30 @@ import { playOrder, stepTo } from '../order.js';
 let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
+        this.canceledLabel = 'Canceled';
+        this.droppedLabel = 'Dropped';
         this.emptyLabel = 'No videos';
         this.label = 'Playlist';
+        this.movedLabel = '{name} moved to position {position} of {count}';
         this.noAdvance = false;
+        this.pickedUpLabel = 'Picked up {name}';
         this.playingLabel = 'Now playing {title}';
+        this.reorderable = false;
         this.status = new StatusController(this);
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (value) => this.entryFor(value)?.getBoundingClientRect(),
+            current: (event) => this.entryOf(event)?.value,
+            grip: (event) => {
+                const entry = this.entryOf(event);
+                return entry ? { element: entry, key: entry.value } : undefined;
+            },
+            holds: false,
+            keys: () => this.items.map((one) => one.value),
+            name: (value) => this.entryFor(value)?.text || value,
+            refocus: (value) => this.entryFor(value)?.focus(),
+            say: (words) => this.status.say(words),
+        });
         this.shuffle = false;
         this.chased = false;
         this.known = {
@@ -116,6 +135,21 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         };
     }
     static { this.words = 'helix-video-playlist'; }
+    entryOf(event) {
+        const items = this.items;
+        return event
+            .composedPath()
+            .find((node) => items.includes(node) &&
+            !node.disabled);
+    }
+    entryFor(value) {
+        return this.items.find((one) => one.value === value);
+    }
+    markMoves() {
+        for (const entry of this.items) {
+            entry.move = this.reorderable ? this.reorder.moveOf(entry.value) : undefined;
+        }
+    }
     get items() {
         return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
@@ -228,6 +262,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     }
     updated(changed) {
         super.updated?.(changed);
+        this.markMoves();
         const items = this.items;
         const current = this.resolveActive(items);
         for (const item of items) {
@@ -270,6 +305,14 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
       ${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessVideoPlaylist.prototype, "canceledLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessVideoPlaylist.prototype, "droppedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'empty-label' })
@@ -278,13 +321,24 @@ __decorate([
     words,
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessVideoPlaylist.prototype, "movedLabel", void 0);
 __decorate([
     property({ attribute: 'no-advance', type: Boolean })
 ], HelixHeadlessVideoPlaylist.prototype, "noAdvance", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessVideoPlaylist.prototype, "pickedUpLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'playing-label' })
 ], HelixHeadlessVideoPlaylist.prototype, "playingLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessVideoPlaylist.prototype, "reorderable", void 0);
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "repeat", void 0);