slideshow = { const canonName = (n) => typeof n === "string" ? n.replace(/^(viewof|mutable)\$/, "$1 ") : n; const platformName = (n) => String(n).replace(/^(viewof|mutable) /, "$1$"); const lookup = (m, n) => m._scope.get(n) ?? m._scope.get(platformName(n)); const LAYOUTS = { default: {}, central: { className: "slide-central" }, upper: { className: "slide-central slide-central--upper" }, left: { className: "slide-body" }, columns: { className: "slide-columns-page", contentClassName: "slide-columns" }, fit: { className: "slide-fit-page", contentClassName: "slide-fit" } }; const BACKGROUND_KEYS = ["backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOpacity", "backgroundTransition", "backgroundColor", "backgroundGradient"]; const normalise = (entry) => { const d = typeof entry === "string" || Array.isArray(entry) ? { cell: entry } : { ...entry }; d.cells = (Array.isArray(d.cell) ? d.cell : [d.cell]).filter((c) => typeof c === "string"); return d; }; const literal = (v) => Array.isArray(v) ? `[${v.map(literal).join(", ")}]` : JSON.stringify(v); const serialiseEntry = (d) => { const { cells, ...rest } = d; const cell = cells.length === 1 ? cells[0] : cells; const keys = Object.keys(rest).filter((k) => k !== "cell" && rest[k] !== undefined); if (!keys.length && typeof cell === "string") return JSON.stringify(cell); return "{" + [["cell", cell], ...keys.map((k) => [k, rest[k]])] .map(([k, v]) => `${k}: ${literal(v)}`).join(", ") + "}"; }; const isImportVar = (v) => v._inputs?.some((i) => i._name === "@variable"); const make = (rt, { invalidation, module = main, slides = [], width = 1600, height = 900, transition = "none", builder = true, persist = true, filename = null, ...config } = {}) => { // imports settle over several recomputes at boot; each re-runs this cell, so an unchanged // deck is handed back as-is instead of being rebuilt (which blanks every slide for a frame) const key = JSON.stringify({ slides, width, height, transition, builder, persist, filename, config }) + String(make) + String(slideBuilder) + String(coreSlideStyle); const prev = liveDecks.get(module); if (prev && prev.rt === rt && prev.key === key && !prev.disposed) { prev.claim(invalidation, cellEditor); return prev.wrap; } const remembered = prev?.memory || {}; prev?.dispose(); const entry = { rt, key, memory: null, disposed: false }; liveDecks.set(module, entry); let latestCellEditor = cellEditor; const deckState = slides.map(normalise); const frame = htl.html`

`; const root = htl.html`

`; frame.append(coreSlideStyle(), root); const wrap = htl.html`

${frame}

`; let disposed = false; const container = root.querySelector(".slides"); const cleanups = []; const self = () => [...rt._variables].find((v) => v._value === wrap); // --- the lens: each slide adopts the live DOM of the cells it names const renderValue = (value, name) => { if (value instanceof Node) return value; const node = document.createElement("div"); new Inspector(node).fulfilled(value, name); return node; }; const renderError = (error, name) => { const node = document.createElement("pre"); node.className = "slide-error"; node.textContent = `${name}: ${error?.message ?? error}`; return node; }; const mount = (body, name) => { let current = document.createElement("div"); current.className = "slide-placeholder"; body.append(current); const v = lookup(module, name); if (!v || v._type !== 1) { current.replaceWith((current = renderError("no cell with this name", name))); return; } const place = (node) => { if (node === current) return; if (current.parentNode === body) current.replaceWith(node); else body.append(node); current = node; }; const observer = { _node: body, pending() {}, fulfilled: (value) => place(renderValue(value, name)), rejected: (error) => place(renderError(error, name)) }; const cancel = observe(v, observer, { detachNodes: true }); v._module._runtime._computeSoon(); cleanups.push(() => { cancel(); // hand an adopted element back to the notebook's own view // (the Inspector renders an element that still has a parent as an object, so detach first) if (v._value instanceof Node && v._value.parentNode === body && v._observer?.fulfilled) { v._value.remove(); v._observer.fulfilled(v._value, v._name); } }); }; deckState.forEach((d) => { const layout = LAYOUTS[d.layout] || LAYOUTS.default; const section = document.createElement("section"); section.className = [layout.className, d.className].filter(Boolean).join(" "); const body = document.createElement("div"); body.className = ["slide-content", layout.contentClassName, d.contentClassName].filter(Boolean).join(" "); d.cells.forEach((name) => mount(body, name)); if (body.classList.contains("slide-columns")) body.style.setProperty("--slide-columns", columnTracks(d.cells.length, d.ratios)); section.append(body); for (const k of BACKGROUND_KEYS) if (d[k] != null) section.dataset[k] = String(d[k]); if (d.backgroundImage != null) { section.dataset.backgroundSize ??= "contain"; section.dataset.backgroundPosition ??= "center"; section.dataset.backgroundRepeat ??= "no-repeat"; } if (d.notes != null) { const aside = document.createElement("aside"); aside.className = "notes"; aside.textContent = d.notes; section.append(aside); } if (d.timing != null) section.dataset.timing = String(d.timing); container.append(section); }); if (!deckState.length) { const section = document.createElement("section"); section.className = "slide-central"; section.innerHTML = `

No slides yet. Open the builder below and add a cell.

`; container.append(section); } // --- persistence: the order lives in the calling cell's own `slides:` literal const writeOrder = async (next) => { if (!persist) return; const v = self(); if (!v) return console.warn("slideshow: defining cell not found; order not saved"); const idx = deck?.getIndices?.() || {}; entry.memory = { h: idx.h, v: idx.v, editing: strip?.open }; const source = "[\n " + next.map(serialiseEntry).join(",\n ") + "\n ]"; const src = await decompile([v]); if (v._value !== wrap) return; const out = spliceSlides(src, source); if (!out || out === src) return; const [spec] = compile(out); const [fn] = await realize([spec._definition.toString()], rt); v.define(spec._name, spec._inputs, fn); }; // --- the builder: order, layout, add, remove, edit — every action is a source rewrite let strip = null; const edit = (fn) => { const next = deckState.map((d) => ({ ...d, cells: [...d.cells] })); fn(next); writeOrder(next); }; const candidates = () => { const used = new Set(deckState.flatMap((d) => d.cells)); const me = self(); return [...module._scope] .filter(([n, v]) => typeof n === "string" && v._type === 1 && v !== me) .map(([n, v]) => [canonName(n), v]) .filter(([n, v]) => !/^(module |initial |mutable |cell )/.test(n) && !isImportVar(v)) .filter(([n]) => !used.has(n) && !lookup(module, "viewof " + n)) .filter(([, v]) => typeof v._value !== "function" && !v._value?.slideshow) .map(([n]) => n) .sort(); }; wrap.slideshow = { module, get order() { return deckState.map((d) => ({ ...d, cells: [...d.cells] })); }, candidates, add: (name, at = deckState.length) => edit((s) => s.splice(at, 0, { cells: [name] })), remove: (i) => edit((s) => s.splice(i, 1)), move: (from, to) => edit((s) => s.splice(to, 0, ...s.splice(from, 1))), setLayout: (i, layout) => edit((s) => { s[i].layout = layout === "default" ? undefined : layout; }), setNotes: (i, notes) => edit((s) => { s[i].notes = notes || undefined; }), merge: (i) => edit((s) => { if (s[i + 1]) { s[i].cells.push(...s[i + 1].cells); s[i].layout = "columns"; s.splice(i + 1, 1); } }), split: (i) => edit((s) => { const [first, ...rest] = s[i].cells; s.splice(i, 1, { ...s[i], cells: [first], layout: s[i].layout === "columns" ? undefined : s[i].layout }, ...rest.map((c) => ({ cells: [c] }))); }) }; // an offline copy is the whole notebook, so the deck keeps working with the network unplugged const download = filename ? downloadAnchor({ className: "sl-download", title: `Save this notebook as ${filename} to present offline` }, `⤓ ${filename}`, { filename, mains: rt.mains }) : null; if (builder || download) { strip = slideBuilder(wrap, { cellEditor: (...a) => latestCellEditor(...a), lookup: (n) => lookup(module, n), layouts: Object.keys(LAYOUTS), open: remembered.editing, arrange: builder, download }); wrap.append(strip); } // --- Reveal needs the deck in the document to measure it let deck = null; wrap.ready = (async () => { while (!frame.isConnected) { await new Promise((r) => requestAnimationFrame(r)); if (disposed) return null; } owner = self(); deck = new Reveal(root, { ...config, width, height, transition, embedded: true, keyboard: false }); await deck.initialize(); if (disposed) { deck.destroy(); return null; } if (remembered.h != null) deck.slide(Math.min(remembered.h, deckState.length - 1), remembered.v); wrap.deck = deck; deck.on("slidechanged", () => strip?.sync(deck.getIndices().h)); strip?.sync(deck.getIndices().h); root.addEventListener("keydown", onKeydown); return deck; })(); const onKeydown = (event) => { if (event.ctrlKey || event.metaKey || event.target.closest?.("input, textarea, select, [contenteditable='true'], .cm-editor")) return; const nav = { skipFragments: event.altKey }; switch (event.key) { case "ArrowRight": case "ArrowDown": case "PageDown": case "n": case "N": deck.next(nav); break; case "ArrowLeft": case "ArrowUp": case "PageUp": case "p": case "P": deck.prev(nav); break; case " ": event.shiftKey ? deck.prev(nav) : deck.next(nav); break; case "Home": deck.slide(0); break; case "End": deck.slide(deck.getHorizontalSlides().length - 1); break; case "o": case "O": deck.toggleOverview(); break; case "f": case "F": { const viewport = deck.getViewportElement(); const doc = viewport.ownerDocument; (doc.fullscreenElement ? doc.exitFullscreen() : viewport.requestFullscreen()) .catch((e) => console.warn("slideshow: fullscreen change refused", e)); break; } case "b": case "B": case "v": case "V": case ".": deck.togglePause(); break; default: return; } event.preventDefault(); event.stopPropagation(); }; // `invalidation` covers redefinition; deleting the cell never resolves it, so watch for that too let owner = null; let teardown = null; const dispose = () => { if (disposed) return; disposed = entry.disposed = true; clearTimeout(teardown); if (liveDecks.get(module) === entry) liveDecks.delete(module); offCodeChange(); root.removeEventListener("keydown", onKeydown); for (const c of cleanups) c(); strip?.dispose?.(); deck?.destroy(); }; const offCodeChange = onCodeChange(({ variable, previous }) => { if (!variable && owner && previous?.variable === owner) dispose(); }); // a re-run that keeps this deck claims it before the grace period ends const claim = (inv, editor) => { clearTimeout(teardown); teardown = null; latestCellEditor = editor; inv?.then(() => { teardown = setTimeout(dispose, 3000); }); }; Object.assign(entry, { wrap, dispose, claim }); claim(invalidation, cellEditor); return wrap; }; return make; }