Update interactive presentation and presenter console

2026-09-20 19:43:33 +02:00
parent 348f4a9738
commit 5217c574e9
21 changed files with 1318 additions and 112 deletions
@@ -0,0 +1,39 @@
+/* Uses the deck's shared popup state, so preview and audience stay synchronized. */
+(() => {
+  const dialog = document.createElement('dialog');
+  dialog.className = 'screenshot-dialog';
+  dialog.setAttribute('aria-labelledby', 'screenshot-title');
+  dialog.innerHTML = '<header><h2 id="screenshot-title"></h2><button type="button" aria-label="Close screenshot">Close · Esc</button></header><img alt=""><p class="screenshot-error" hidden>Screenshot unavailable. Close and reopen to retry.</p>';
+  document.body.append(dialog);
+  const title = dialog.querySelector('h2');
+  const image = dialog.querySelector('img');
+  const error = dialog.querySelector('.screenshot-error');
+  let active = null;
+  let trigger = null;
+  const close = () => {
+    active = null;
+    if (dialog.open) dialog.close();
+    if (trigger?.closest('section.present')) trigger.focus({ preventScroll: true });
+    trigger = null;
+  };
+  const requestClose = () => window.PresentationControls.closePopup();
+  dialog.querySelector('button').addEventListener('click', requestClose);
+  dialog.addEventListener('cancel', event => { event.preventDefault(); requestClose(); });
+  dialog.addEventListener('click', event => { if (event.target === dialog) requestClose(); });
+  image.addEventListener('error', () => { image.hidden = true; error.hidden = false; });
+  window.ScreenshotTour = {
+    get active() { return active; },
+    open(button) {
+      trigger = button;
+      active = { kind: 'screenshot', key: button.dataset.screenshot };
+      title.textContent = `${button.dataset.screenshotNumber} / 7 · ${button.dataset.screenshotTitle}`;
+      image.hidden = false;
+      error.hidden = true;
+      image.alt = `AritmoLab: ${button.dataset.screenshotTitle}`;
+      image.src = button.querySelector('img').src;
+      if (!dialog.open) dialog.showModal();
+      window.dispatchEvent(new Event('presentationchange'));
+    },
+    close,
+  };
+})();