@heyramzi/ui 2.1.0 → 2.2.0

package/src/slides/deck-controller.svelte.ts

@@ -1,5 +1,5 @@
-import { untrack } from 'svelte';
-import { fitBox, gridBoxes, type Box, type Size } from './layout.js';
+import { untrack } from "svelte";
+import { fitBox, gridBoxes, type Box, type Size } from "./layout.js";
 import {
   keyAction,
   nextPosition,
@@ -11,9 +11,9 @@ import {
   type KeyAction,
   type Position,
   type SlideState,
-} from './navigation.js';
-import { resolveLabels, type DeckLabels } from './labels.js';
-import { DEFAULT_CANVAS, type Canvas, type SlideNotes } from './types.js';
+} from "./navigation.js";
+import { resolveLabels, type DeckLabels } from "./labels.js";
+import { DEFAULT_CANVAS, type Canvas, type SlideNotes } from "./types.js";
 
 /** What a mounted Slide tells the deck. Properties are getters over the slide's own props. */
 export type SlideEntry = {
@@ -26,7 +26,7 @@ export type SlideEntry = {
 };
 
 /** `remote` is a move that came from another window or frame, so it must not be echoed back. */
-export type Source = 'local' | 'remote';
+export type Source = "local" | "remote";
 export type Listener = (position: Position, source: Source) => void;
 
 /** `index` and `step` are read and written through, so a Deck can back them with its bindable props. */
@@ -62,15 +62,19 @@ const MORPH_MS = 900;
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
 function isEditable(el: HTMLElement) {
-  return el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName);
+  return el.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
 }
 
 const byDocumentOrder = (a: SlideEntry, b: SlideEntry) =>
-  a.el && b.el ? (a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1) : 0;
+  a.el && b.el
+    ? a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING
+      ? -1
+      : 1
+    : 0;
 
 export class DeckController {
   entries = $state.raw<SlideEntry[]>([]);
-  view = $state<'slide' | 'overview'>('slide');
+  view = $state<"slide" | "overview">("slide");
   /** The highlighted thumbnail in the overview, as an index among the visible slides. */
   cursor = $state(0);
   direction = $state<1 | -1>(1);
@@ -88,7 +92,10 @@ export class DeckController {
   canvas = $derived(this.options.canvas ?? DEFAULT_CANVAS);
   labels = $derived(resolveLabels(this.options.labels));
   slides = $derived<SlideState[]>(
-    this.entries.map((entry) => ({ steps: this.options.fragments === false ? 0 : entry.steps, hidden: entry.hidden })),
+    this.entries.map((entry) => ({
+      steps: this.options.fragments === false ? 0 : entry.steps,
+      hidden: entry.hidden,
+    })),
   );
   visible = $derived(visibleIndexes(this.slides));
   position = $derived(settle(this.slides, { index: this.options.index, step: this.options.step }));
@@ -97,7 +104,7 @@ export class DeckController {
   current = $derived(this.entries[this.position.index]);
   /** The slide after this one, for a presenter's preview. Null on the last. */
   upcoming = $derived(this.visible.find((i) => i > this.position.index) ?? null);
-  overview = $derived(this.view === 'overview');
+  overview = $derived(this.view === "overview");
   /** True when every fragment shows: in the overview, or on a deck that doesn't stage reveals. */
   revealAll = $derived(this.overview || this.options.fragments === false);
   atStart = $derived(prevPosition(this.slides, this.position, this.options.loop) === null);
@@ -105,7 +112,10 @@ export class DeckController {
   fit = $derived(fitBox(this.size, this.canvas));
   grid = $derived(
     gridBoxes(
-      { w: this.size.w, h: Math.max(0, this.size.h - (this.options.controls === false ? 0 : CONTROLS_ROOM)) },
+      {
+        w: this.size.w,
+        h: Math.max(0, this.size.h - (this.options.controls === false ? 0 : CONTROLS_ROOM)),
+      },
       this.canvas,
       this.visible.length,
     ),
@@ -159,7 +169,7 @@ export class DeckController {
     this.options.step = position.step;
   }
 
-  commit(target: Position | null, source: Source = 'local') {
+  commit(target: Position | null, source: Source = "local") {
     if (!target) return;
     const from = this.position;
     const to = settle(this.slides, target);
@@ -179,7 +189,7 @@ export class DeckController {
     this.commit(prevPosition(this.slides, this.position, this.options.loop));
   }
 
-  go(index: number, step = 0, source: Source = 'local') {
+  go(index: number, step = 0, source: Source = "local") {
     this.commit({ index, step }, source);
   }
 
@@ -187,7 +197,7 @@ export class DeckController {
     const open = force ?? !this.overview;
     if (open === this.overview) return;
     if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
-    this.view = open ? 'overview' : 'slide';
+    this.view = open ? "overview" : "slide";
     this.#morph();
   }
 
@@ -213,13 +223,15 @@ export class DeckController {
    * `fullscreen` and `presenter` are returned untouched, since they need the page.
    */
   handleKey(event: KeyboardEvent): KeyAction | null {
-    if (event.defaultPrevented || !this.listening || event.altKey || event.ctrlKey || event.metaKey) return null;
+    if (event.defaultPrevented || !this.listening || event.altKey || event.ctrlKey || event.metaKey)
+      return null;
     const target = event.target instanceof HTMLElement ? event.target : null;
     if (target && isEditable(target)) return null;
     const action = keyAction(event.key, event.shiftKey);
     if (!action) return null;
     /* Space and Enter belong to a focused control, not to the deck. */
-    if ((event.key === ' ' || event.key === 'Enter') && target?.closest('button, a, summary')) return null;
+    if ((event.key === " " || event.key === "Enter") && target?.closest("button, a, summary"))
+      return null;
 
     const handled = this.overview ? this.#overviewKey(action) : this.#slideKey(action);
     if (!handled) return null;
@@ -229,24 +241,24 @@ export class DeckController {
 
   #slideKey(action: KeyAction): boolean {
     switch (action) {
-      case 'next':
+      case "next":
         this.next();
         return true;
-      case 'prev':
+      case "prev":
         this.prev();
         return true;
-      case 'first':
+      case "first":
         this.go(this.visible[0] ?? 0);
         return true;
-      case 'last':
+      case "last":
         this.go(this.visible[this.visible.length - 1] ?? 0);
         return true;
-      case 'overview':
+      case "overview":
         this.toggleOverview(true);
         return true;
-      case 'fullscreen':
+      case "fullscreen":
         return true;
-      case 'presenter':
+      case "presenter":
         return !!this.options.presenter;
       default:
         return false;
@@ -256,34 +268,34 @@ export class DeckController {
   #overviewKey(action: KeyAction): boolean {
     const cols = this.grid.cols;
     switch (action) {
-      case 'next':
+      case "next":
         this.#moveCursor(this.cursor + 1);
         return true;
-      case 'prev':
+      case "prev":
         this.#moveCursor(this.cursor - 1);
         return true;
-      case 'down':
+      case "down":
         this.#moveCursor(this.cursor + cols);
         return true;
-      case 'up':
+      case "up":
         this.#moveCursor(this.cursor - cols);
         return true;
-      case 'first':
+      case "first":
         this.#moveCursor(0);
         return true;
-      case 'last':
+      case "last":
         this.#moveCursor(this.visible.length - 1);
         return true;
-      case 'select':
+      case "select":
         this.select(this.visible[this.cursor] ?? this.position.index);
         return true;
-      case 'close':
-      case 'overview':
+      case "close":
+      case "overview":
         this.toggleOverview(false);
         return true;
-      case 'fullscreen':
+      case "fullscreen":
         return true;
-      case 'presenter':
+      case "presenter":
         return !!this.options.presenter;
       default:
         return false;