45 lines
2.0 KiB
JavaScript
45 lines
2.0 KiB
JavaScript
/* 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>
|
|
<div class="screenshot-stage">
|
|
<img alt="">
|
|
</div>
|
|
<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 };
|
|
const total = button.closest('.screenshot-tour').querySelectorAll('[data-screenshot]').length;
|
|
title.textContent = `${button.dataset.screenshotNumber} / ${total} · ${button.dataset.screenshotTitle}`;
|
|
image.hidden = false;
|
|
error.hidden = true;
|
|
image.alt = button.dataset.screenshotTitle;
|
|
image.src = button.querySelector('img').src;
|
|
if (!dialog.open) dialog.showModal();
|
|
window.dispatchEvent(new Event('presentationchange'));
|
|
},
|
|
close,
|
|
};
|
|
})();
|