@nysds/playground 0.1.0 → 0.2.0

package/src/main.ts

@@ -11,6 +11,8 @@ import type {PlaygroundProject} from 'playground-elements/playground-project.js'
 import type {Slide, StoredDeck} from './deck-model';
 import {
   BLANK_SLIDE_HTML,
+  arrangeSlides,
+  hasContent,
   getSlide,
   makeSlide,
   nextSlideId,
@@ -24,6 +26,7 @@ import {needsReboot, routeFor, slideIdFromHash} from './routing';
 import {PLAYGROUND_CONFIG, componentsUrl, stylesUrl} from './playground.config';
 import {PlaygroundHost} from './playground';
 import {Presentation} from './present';
+import {SlideList} from './slide-list';
 import type {PlaygroundState} from './state';
 import {
   debounce,
@@ -60,8 +63,13 @@ import {isPrerelease, loadVersions, resolveVersion} from './versions';
 /** How long to wait after a keystroke before writing the URL. */
 const HASH_DEBOUNCE_MS = 300;
 
-/** How long a toast stays on screen, in milliseconds. */
-const TOAST_DURATION_MS = 2600;
+/**
+ * How long a toast stays on screen, in milliseconds.
+ *
+ * Long enough to read two short sentences. The timer pauses while the
+ * pointer or focus is on the toast, and the toast can be dismissed sooner.
+ */
+const TOAST_DURATION_MS = 6000;
 
 /** The name every new deck starts with, until someone types over it. */
 export const UNTITLED_DECK = 'Untitled';
@@ -141,7 +149,10 @@ class PlaygroundApp {
   private fontSize: FontSize = initialFontSize();
   private updateMode: UpdateMode = initialUpdateMode();
   private theme: EditorTheme = initialTheme();
+  private readonly slideList: SlideList;
   private toastTimer: number | undefined;
+  /** The element that had focus when the toast appeared. */
+  private toastOpener: Element | null = null;
   private leaveListeners: AbortController | undefined;
   private presentation: Presentation | undefined;
 
@@ -175,6 +186,17 @@ class PlaygroundApp {
     this.buildButton = required('#build-button');
     this.savedIndicator = required('#saved-indicator');
     this.toast = required('#toast');
+    this.slideList = new SlideList(required('#slide-list'), required('#slide-list-status'));
+    // A toast waits while someone is reading it with the pointer or has
+    // tabbed to its close button.
+    this.toast.addEventListener('mouseenter', () => this.clearToastTimer());
+    this.toast.addEventListener('mouseleave', () => this.resumeToastTimer());
+    this.toast.addEventListener('focusin', () => this.clearToastTimer());
+    this.toast.addEventListener('focusout', (event) => {
+      if (!this.toast.contains(event.relatedTarget as Node | null)) {
+        this.resumeToastTimer();
+      }
+    });
     this.openedWith = {html: initial.html, css: initial.css, js: initial.js};
     this.host = new PlaygroundHost(project, initial, deck.baseCss);
     this.host.setUpdateMode(this.updateMode);
@@ -307,8 +329,6 @@ class PlaygroundApp {
 
     bindClick('#add-slide-button', () => void this.addSlide());
     bindClick('#slide-settings-button', () => this.openSlideSettings());
-    bindClick('#move-slide-back-button', () => void this.moveSlide(-1));
-    bindClick('#move-slide-forward-button', () => void this.moveSlide(1));
     bindClick('#duplicate-slide-button', () => void this.duplicateSlide());
     bindClick('#delete-slide-button', () => this.deleteSlide());
     bindClick('#slide-modal-done', () => {
@@ -510,31 +530,21 @@ class PlaygroundApp {
   private async addSlide(): Promise<void> {
     await this.flushSave();
     const title = `Slide ${this.deck.slides.length + 1}`;
+    // A new deck's first slide shows the Excelsior button, so there is something
+    // to see. A slide added to a deck that is already going starts empty, so
+    // there is nothing to clear away first.
     const slide = makeSlide({
       id: nextSlideId(title, this.deck.slides),
       title,
-      html: BLANK_SLIDE_HTML,
     });
     const at = slideIndex(this.deck, this.activePresetId);
     const slides = [...this.deck.slides];
     slides.splice(at === -1 ? slides.length : at + 1, 0, slide);
     await this.updateDeck({...this.deck, slides});
     this.loadPreset(slide);
-    this.openSlideSettings();
-  }
-
-  /** Moves the current slide one place earlier or later. */
-  private async moveSlide(delta: number): Promise<void> {
-    await this.flushSave();
-    const from = slideIndex(this.deck, this.activePresetId);
-    const to = from + delta;
-    if (from === -1 || to < 0 || to >= this.deck.slides.length) {
-      return;
-    }
-    const slides = [...this.deck.slides];
-    const [slide] = slides.splice(from, 1);
-    slides.splice(to, 0, slide!);
-    await this.updateDeck({...this.deck, slides});
+    // The slide opens ready to code. A toast points at Slide settings for the
+    // title and notes, rather than a modal standing in the way.
+    this.showToast('success', `${title} added`, 'Name it and add notes in Slide settings.');
   }
 
   /** Copies the current slide in place. */
@@ -562,7 +572,7 @@ class PlaygroundApp {
       this.showToast('warning', 'Keep one slide', 'A deck needs at least one slide.');
       return;
     }
-    confirmAction(`Delete the slide "${current.title}"? This cannot be undone.`, async () => {
+    const remove = async () => {
       this.saveSoon.cancel();
       const index = slideIndex(this.deck, current.id);
       const slides = this.deck.slides.filter((slide) => slide.id !== current.id);
@@ -575,7 +585,16 @@ class PlaygroundApp {
         this.loadPreset(next);
       }
       this.presentation?.refresh();
-    });
+    };
+    // A blank slide has nothing to lose, so it goes without a question. The
+    // editors may hold something not yet saved, so check what is on screen.
+    const onScreen = this.host.getState();
+    const asEdited = {...current, html: onScreen.html, css: onScreen.css, js: onScreen.js};
+    if (hasContent(asEdited)) {
+      confirmAction(`Delete the slide "${current.title}"? This cannot be undone.`, remove);
+    } else {
+      void remove();
+    }
   }
 
   /** Opens the deck settings modal, which also renames the deck. */
@@ -584,6 +603,7 @@ class PlaygroundApp {
     setFieldValue('#deck-title-input', this.deck.title);
     setFieldValue('#deck-description-input', this.deck.description);
     setFieldValue('#deck-base-css-input', this.deck.baseCss);
+    this.slideList.load(this.deck.slides);
     modal.open = true;
   }
 
@@ -591,13 +611,26 @@ class PlaygroundApp {
     if (!this.hasDeck) {
       return;
     }
+    // Write the editors out first, so a slide the list removed cannot take
+    // the current editor contents with it.
+    await this.flushSave();
     const title = fieldValue('#deck-title-input').trim() || this.deck.title;
+    const slides = arrangeSlides(this.deck.slides, this.slideList.value());
+    const activeSurvives = slides.some((slide) => slide.id === this.activePresetId);
+    if (!activeSurvives) {
+      this.saveSoon.cancel();
+      this.activePresetId = slides[0]?.id ?? null;
+    }
     await this.updateDeck({
       ...this.deck,
       title,
       description: fieldValue('#deck-description-input'),
       baseCss: fieldValue('#deck-base-css-input'),
+      slides,
     });
+    if (!activeSurvives && slides[0]) {
+      this.loadPreset(slides[0]);
+    }
     // The base CSS lives in the hidden head, so the preview has to be rebuilt.
     this.host.load(this.currentState(), this.deck.baseCss);
   }
@@ -1041,21 +1074,52 @@ class PlaygroundApp {
     });
   }
 
+  /**
+   * Shows a toast and lets screen readers announce it.
+   *
+   * The container is a live region that is always in the page, so inserting
+   * the alert is the change that gets announced. Warnings use the alert's own
+   * assertive region as well. The toast goes away on its own, when its close
+   * button is used, and dismissing it hands focus back to the control that
+   * raised it.
+   */
   private showToast(type: string, heading: string, text: string): void {
     const alert = document.createElement('nys-alert');
     alert.setAttribute('type', type);
     alert.setAttribute('heading', heading);
     alert.setAttribute('text', text);
     alert.setAttribute('dismissible', '');
+    alert.addEventListener('nys-close', () => this.hideToast());
+    this.toastOpener = document.activeElement;
     this.toast.replaceChildren(alert);
-    this.toast.hidden = false;
+    this.resumeToastTimer();
+  }
+
+  /** Removes the toast. Focus goes back where it came from if it was inside. */
+  private hideToast(): void {
+    this.clearToastTimer();
+    const hadFocus = this.toast.contains(document.activeElement);
+    this.toast.replaceChildren();
+    const opener = this.toastOpener;
+    this.toastOpener = null;
+    if (hadFocus && opener instanceof HTMLElement && opener.isConnected) {
+      opener.focus();
+    }
+  }
+
+  private clearToastTimer(): void {
     if (this.toastTimer !== undefined) {
       window.clearTimeout(this.toastTimer);
+      this.toastTimer = undefined;
+    }
+  }
+
+  /** Starts the countdown over, if there is a toast to count down. */
+  private resumeToastTimer(): void {
+    this.clearToastTimer();
+    if (this.toast.childElementCount > 0) {
+      this.toastTimer = window.setTimeout(() => this.hideToast(), TOAST_DURATION_MS);
     }
-    this.toastTimer = window.setTimeout(() => {
-      this.toast.hidden = true;
-      this.toast.replaceChildren();
-    }, TOAST_DURATION_MS);
   }
 }
 

package/src/present.ts

@@ -48,6 +48,8 @@ export class Presentation {
   private readonly notes: HTMLElement;
   private readonly notesBody: HTMLElement;
   private readonly notesButton: HTMLElement;
+  private readonly prevButton: HTMLElement & {disabled?: boolean};
+  private readonly nextButton: HTMLElement & {disabled?: boolean};
   private readonly panes: EditorPanes;
   private collapsed = false;
   private notesOpen = false;
@@ -69,6 +71,8 @@ export class Presentation {
     this.notes = required(root, '#notes');
     this.notesBody = required(root, '#notes-body');
     this.notesButton = required(root, '#notes-button');
+    this.prevButton = required(root, '#prev-button');
+    this.nextButton = required(root, '#next-button');
   }
 
   /** Binds the slide bar, then enters presentation mode when asked. */
@@ -150,6 +154,11 @@ export class Presentation {
     for (const element of document.querySelectorAll<HTMLElement>('[data-count]')) {
       element.textContent = counter;
     }
+    // The arrows go quiet at the ends of the deck. From a shared code link,
+    // where no slide is current, both still work: forward starts the deck and
+    // back lands on its last slide.
+    this.prevButton.disabled = deck.slides.length === 0 || index === 0;
+    this.nextButton.disabled = deck.slides.length === 0 || index === deck.slides.length - 1;
 
     const notes = preset?.notes ?? '';
     this.notesBody.textContent = notes;

package/src/slide-list.ts

@@ -0,0 +1,276 @@
+/**
+ * The slide list inside Deck settings.
+ *
+ * One row per slide: a drag handle, the position, the title and group as
+ * fields, and Move up, Move down, and Remove. Everything stays in the list
+ * until Deck settings is applied, so a removal can be undone with Restore, and
+ * closing the modal without Done discards the lot.
+ *
+ * Dragging is for the pointer; the arrows do the same job from the keyboard,
+ * and a live region reads out each move.
+ */
+import type {Slide, SlideEdit} from './deck-model';
+
+type Control = 'handle' | 'up' | 'down' | 'remove' | 'restore';
+
+export class SlideList {
+  private rows: SlideEdit[] = [];
+  private dragId: string | null = null;
+
+  constructor(
+    private readonly list: HTMLElement,
+    private readonly status: HTMLElement,
+  ) {
+    list.addEventListener('dragover', (event) => this.onDragOver(event));
+    list.addEventListener('dragleave', (event) => {
+      if (!(event.relatedTarget instanceof Node) || !list.contains(event.relatedTarget)) {
+        this.clearDropMarks();
+      }
+    });
+    list.addEventListener('drop', (event) => this.onDrop(event));
+  }
+
+  /** Fills the list from the deck's slides, discarding any earlier edits. */
+  load(slides: readonly Slide[]): void {
+    this.rows = slides.map((slide) => ({id: slide.id, title: slide.title, group: slide.group}));
+    this.status.textContent = '';
+    this.render();
+  }
+
+  /** The rows as edited, in their current order. */
+  value(): SlideEdit[] {
+    return this.rows.map((row) => ({...row}));
+  }
+
+  private get kept(): number {
+    return this.rows.filter((row) => !row.removed).length;
+  }
+
+  private render(focus?: {id: string; control: Control}): void {
+    this.list.replaceChildren(...this.rows.map((row, index) => this.row(row, index)));
+    if (focus) {
+      const selector = `[data-id="${CSS.escape(focus.id)}"] [data-control="${focus.control}"]`;
+      const host = this.list.querySelector<HTMLElement & {updateComplete?: Promise<unknown>}>(
+        selector,
+      );
+      // The design system button does not delegate focus to its inner button,
+      // and that button only exists once the element has rendered.
+      void host?.updateComplete?.then(() => {
+        (host.shadowRoot?.querySelector<HTMLElement>('button') ?? host).focus();
+      });
+    }
+  }
+
+  private row(row: SlideEdit, index: number): HTMLElement {
+    const item = document.createElement('li');
+    item.className = row.removed ? 'slide-row slide-row--removed' : 'slide-row';
+    item.dataset.id = row.id;
+
+    // The handle is a button like the row's other controls. The pointer drags
+    // it; from the keyboard, the up and down arrow keys move the row while it
+    // has focus.
+    const handle = this.circle('handle', 'menu', 'Drag to reorder', !!row.removed, () => undefined);
+    handle.classList.add('slide-row__handle');
+    handle.draggable = !row.removed;
+    handle.addEventListener('keydown', (event) => {
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        this.move(row, event.key === 'ArrowUp' ? -1 : 1, 'handle');
+      }
+    });
+    handle.addEventListener('dragstart', (event) => {
+      this.dragId = row.id;
+      item.classList.add('slide-row--dragging');
+      if (event.dataTransfer) {
+        event.dataTransfer.setData('text/plain', row.id);
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setDragImage(item, 24, 24);
+      }
+    });
+    handle.addEventListener('dragend', () => {
+      this.dragId = null;
+      item.classList.remove('slide-row--dragging');
+      this.clearDropMarks();
+    });
+
+    const position = document.createElement('span');
+    position.className = 'slide-row__position';
+    position.textContent = String(index + 1);
+
+    const title = this.field('slide-row__title', `Slide ${index + 1} title`, row.title, (value) => {
+      row.title = value;
+    });
+    const group = this.field('slide-row__group', `Slide ${index + 1} group`, row.group, (value) => {
+      row.group = value;
+    });
+    group.setAttribute('placeholder', 'Group');
+    group.setAttribute('width', 'md');
+    if (row.removed) {
+      title.setAttribute('disabled', '');
+      group.setAttribute('disabled', '');
+    }
+
+    const actions = document.createElement('div');
+    actions.className = 'slide-row__actions';
+    if (row.removed) {
+      const restore = document.createElement('nys-button');
+      restore.dataset.control = 'restore';
+      restore.setAttribute('size', 'sm');
+      restore.setAttribute('variant', 'ghost');
+      restore.setAttribute('label', 'Restore');
+      restore.addEventListener('nys-click', () => this.restore(row));
+      actions.append(restore);
+    } else {
+      actions.append(
+        this.circle('up', 'arrow_upward', 'Move up', index === 0, () => this.move(row, -1)),
+        this.circle('down', 'arrow_downward', 'Move down', index === this.rows.length - 1, () =>
+          this.move(row, 1),
+        ),
+        this.circle('remove', 'delete', 'Remove', this.kept === 1, () => this.remove(row)),
+      );
+    }
+
+    item.append(handle, position, title, group, actions);
+    return item;
+  }
+
+  private field(
+    className: string,
+    label: string,
+    value: string,
+    onInput: (value: string) => void,
+  ): HTMLElement {
+    const input = document.createElement('nys-textinput');
+    input.className = className;
+    input.setAttribute('arialabel', label);
+    input.setAttribute('value', value);
+    input.addEventListener('nys-input', (event) => {
+      onInput((event as CustomEvent<{value: string}>).detail.value);
+    });
+    return input;
+  }
+
+  private circle(
+    control: Control,
+    icon: string,
+    label: string,
+    disabled: boolean,
+    handler: () => void,
+  ): HTMLElement {
+    const button = document.createElement('nys-button');
+    button.dataset.control = control;
+    button.setAttribute('size', 'sm');
+    button.setAttribute('variant', 'ghost');
+    button.setAttribute('circle', '');
+    button.setAttribute('icon', icon);
+    button.setAttribute('label', label);
+    if (disabled) {
+      button.setAttribute('disabled', '');
+    }
+    button.addEventListener('nys-click', handler);
+    return button;
+  }
+
+  private move(row: SlideEdit, delta: number, from_control: 'arrow' | 'handle' = 'arrow'): void {
+    const from = this.rows.indexOf(row);
+    const to = from + delta;
+    if (from === -1 || to < 0 || to >= this.rows.length) {
+      return;
+    }
+    this.rows.splice(from, 1);
+    this.rows.splice(to, 0, row);
+    // Focus stays on the control that was used, unless the row has reached an
+    // end and that arrow is now disabled.
+    const arrow: Control =
+      delta < 0 ? (to === 0 ? 'down' : 'up') : to === this.rows.length - 1 ? 'up' : 'down';
+    this.render({id: row.id, control: from_control === 'handle' ? 'handle' : arrow});
+    this.announce(`Moved "${this.name(row)}" to position ${to + 1} of ${this.rows.length}.`);
+  }
+
+  private remove(row: SlideEdit): void {
+    if (this.kept === 1) {
+      return;
+    }
+    row.removed = true;
+    this.render({id: row.id, control: 'restore'});
+    this.announce(`"${this.name(row)}" goes when you select Done. Select Restore to keep it.`);
+  }
+
+  private restore(row: SlideEdit): void {
+    row.removed = false;
+    this.render({id: row.id, control: 'remove'});
+    this.announce(`Restored "${this.name(row)}".`);
+  }
+
+  private name(row: SlideEdit): string {
+    return row.title.trim() || 'Untitled slide';
+  }
+
+  /** Reads a message to screen readers, even when it repeats the last one. */
+  private announce(text: string): void {
+    this.status.textContent = '';
+    window.requestAnimationFrame(() => {
+      this.status.textContent = text;
+    });
+  }
+
+  private onDragOver(event: DragEvent): void {
+    if (!this.dragId) {
+      return;
+    }
+    const target = this.rowAt(event);
+    if (!target) {
+      return;
+    }
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+    this.clearDropMarks();
+    const rect = target.getBoundingClientRect();
+    const before = event.clientY < rect.top + rect.height / 2;
+    target.classList.add(before ? 'slide-row--drop-before' : 'slide-row--drop-after');
+  }
+
+  private onDrop(event: DragEvent): void {
+    if (!this.dragId) {
+      return;
+    }
+    const target = this.rowAt(event);
+    if (!target) {
+      return;
+    }
+    event.preventDefault();
+    const before = target.classList.contains('slide-row--drop-before');
+    const from = this.rows.findIndex((row) => row.id === this.dragId);
+    const targetIndex = this.rows.findIndex((row) => row.id === target.dataset.id);
+    this.clearDropMarks();
+    if (from === -1 || targetIndex === -1 || from === targetIndex) {
+      return;
+    }
+    const [row] = this.rows.splice(from, 1);
+    let to = before ? targetIndex : targetIndex + 1;
+    if (from < to) {
+      to -= 1;
+    }
+    this.rows.splice(to, 0, row!);
+    this.render();
+    this.announce(`Moved "${this.name(row!)}" to position ${to + 1} of ${this.rows.length}.`);
+  }
+
+  /** The row under a drag event, or the last row when the event is on the list itself. */
+  private rowAt(event: DragEvent): HTMLElement | null {
+    if (event.target === this.list) {
+      return this.list.querySelector<HTMLElement>('.slide-row:last-child');
+    }
+    const target =
+      event.target instanceof Element ? event.target.closest<HTMLElement>('.slide-row') : null;
+    return target && this.list.contains(target) ? target : null;
+  }
+
+  private clearDropMarks(): void {
+    for (const element of this.list.querySelectorAll('.slide-row--drop-before, .slide-row--drop-after')) {
+      element.classList.remove('slide-row--drop-before', 'slide-row--drop-after');
+    }
+  }
+}