deck-presenter 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# deck-presenter
+
+A presenter window for a [`<deck-shift>`](../deck-shift) slide deck.
+
+```html
+<script type="module" src="https://unpkg.com/deck-presenter"></script>
+<deck-presenter></deck-presenter>
+```
+
+Or:
+
+```sh
+npm install deck-presenter
+```
+
+```js
+import "deck-presenter";
+```
+
+Add `<deck-presenter>` anywhere on the page and press <kbd>s</kbd>, and a new
+tab will open with a timer (click to reset), the position, back and next, the
+clock, the current slide, and the next, with notes below.
+
+The popup is built and run from the deck's own window, so its buttons and keys
+drive the main slide deck.
+
+### Customizing
+
+Add a `<template>` child to the `<deck-presenter>` to inject arbitrary HTML to
+the opened window, this can include CSS, scripts, or even custom elements which
+will all be rendered into the opened window, allowing you to customise the
+presenter view.
+
+Scripts run in that window, with URLs relative to the deck. Module scripts run
+once per window.
+
+```html
+<deck-presenter>
+  <template>
+    <script type="module" src="https://esm.sh/webcam-view"></script>
+    <style>
+      webcam-view {
+        position: fixed;
+        right: 24px;
+        bottom: 24px;
+        width: 280px;
+      }
+    </style>
+    <webcam-view mirror></webcam-view>
+  </template>
+</deck-presenter>
+```
+
+The view lives in a shadow root, so style it from the template with
+`::part()`:
+
+- `header`, holding `timer`, `position`, `prev-button`, `next-button` (both
+  also `button`) and `clock`.
+- `main`, holding the `current-slide` frame and the `sidebar`, which holds the
+  `label`, the `next-slide` frame (both frames are also `frame`), `end` (shown
+  over the next frame on the last step) and `notes`.
+- `cue` for each `<mark>` in the notes, plus `cue-hit` once passed or
+  `cue-next` for the one the next press reaches.
+- `help`, the shortcuts dialog.
+
+```html
+<deck-presenter>
+  <template>
+    <style>
+      ::part(main) {
+        grid-template-columns: 1fr 1fr;
+      }
+      ::part(cue-next) {
+        background: hotpink;
+      }
+    </style>
+  </template>
+</deck-presenter>
+```
+
+Notes are the slide's `<aside class="notes">`, with a `<mark>` at the word where
+you press for each step. It adds `--present` and S to the deck with
+`addShortcut()`.

package/deck-presenter.min.js

@@ -0,0 +1,2 @@
+var S=`:host{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr;background:#111;color:#eee;font:16px/1.45 ui-sans-serif,system-ui,sans-serif}header{display:flex;gap:28px;align-items:baseline;padding:14px 22px;border-bottom:1px solid #2a2a2a}[part=timer]{font:600 34px/1 ui-monospace,monospace;cursor:pointer;font-variant-numeric:tabular-nums}[part=position]{flex:1;color:#aaa}button{background:#262626;color:#eee;border:1px solid #3a3a3a;border-radius:8px;padding:9px 16px;cursor:pointer;font:600 15px/1 ui-sans-serif,system-ui,sans-serif;&:hover{background:#333}}[part=clock]{font:500 22px/1 ui-monospace,monospace;color:#aaa}main{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;padding:22px;min-height:0}aside{display:grid;grid-template-rows:auto 1fr;gap:18px;min-height:0}label{display:block;color:#888;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}[part=frame]{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:6px;overflow:hidden;iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.end{position:absolute;inset:0;display:none;place-items:center;color:#777;font-size:24px;background:#000}&.over .end{display:grid}}[part=notes]{overflow:auto;font-size:24px;line-height:1.45;color:#f2f2f2;padding-right:8px;p{margin:0 0 .7em}em.none{color:#777}mark{background:none;color:inherit;border-bottom:2px solid #555}mark[part~=cue-hit]{border-color:#6c6;color:#9d9}mark[part~=cue-next]{background:var(--deck-ui-accent, #ffd23f);color:#000;border-radius:3px;border-color:transparent}}dialog{border:0;padding:24px 30px 18px;border-radius:12px;background:#fff;color:#111;box-shadow:0 20px 60px #0000004d;font:15px/1.5 ui-sans-serif,system-ui,sans-serif;&::backdrop{background:#0000008c}h1{margin:0 0 12px;font-size:18px}td{padding:3px 14px 3px 0}td:first-child{color:#555;white-space:nowrap}kbd{display:inline-block;min-width:1.4em;padding:0 .35em;border:1px solid rgba(127,127,127,.45);border-bottom-width:2px;border-radius:4px;font:600 .85em/1.5 ui-monospace,monospace;text-align:center}}
+;`;var L='<header part=header><span part=timer title="click to reset">00:00</span><span part=position></span> <button part="button prev-button" aria-label=Back>&lsaquo; Back</button><button part="button next-button" aria-label=Next>Next &rsaquo;</button> <span part=clock></span></header><main part=main><section><div part="frame current-slide"><iframe tabindex=-1></iframe></div></section><aside part=sidebar><div><label part=label>Next</label><div class="frame next" part="frame next-slide"><iframe tabindex=-1></iframe><div class=end part=end>End of deck</div></div></div><div part=notes></div></aside></main><dialog closedby=any part=help aria-label="Keyboard shortcuts"><h1>Presenter view</h1><table><tr><td><kbd>&rarr;</kbd> <kbd>Space</kbd> <kbd>PgDn</kbd><td>next step<tr><td><kbd>&larr;</kbd> <kbd>PgUp</kbd><td>back<tr><td><kbd>&darr;</kbd> <kbd>&uarr;</kbd><td>next / previous slide<tr><td><kbd>Home</kbd> <kbd>End</kbd><td>first / last slide<tr><td>click the timer<td>reset it<tr><td><kbd>?</kbd><td>this help</table></dialog>;';var k=class extends HTMLElement{static define(r="deck-presenter",o=customElements){o.define(r,this)}#e=null;#t=null;async connectedCallback(){if(this.#e)return;let r=this.closest("deck-shift")??this.ownerDocument.querySelector("deck-shift");await customElements.whenDefined(r.localName),this.#e=r,this.addEventListener("command",o=>o.command==="--present"&&this.open()),this.#e.addShortcut("--present","s",()=>this.open(),"Open presenter mode")}open(){let r=open("","deck-presenter","popup,width=1400,height=860");if(!r||!this.#e)return;this.#t?.abort();let{signal:o}=this.#t=new AbortController,n=this.#e,a=r.document;a.title=`Presenter: ${document.title}`,a.body.replaceChildren(),a.body.style.margin="0";let x=a.body.appendChild(a.createElement("div"));x.style.setProperty("--deck-ui-accent",getComputedStyle(this).getPropertyValue("--deck-ui-accent"));let g=this.querySelector(":scope > template");g&&a.body.append(a.importNode(g.content,!0));let l=x.attachShadow({mode:"open"});l.innerHTML=`<style>${S}</style>`+L;let i=e=>l.querySelector(`[part~=${e}]`),[b,s]=l.querySelectorAll("iframe"),y=i("timer"),C=i("position"),K=i("clock"),d=i("notes"),u=i("help");i("prev-button").onclick=()=>n.prev(),i("next-button").onclick=()=>n.next(),r.addEventListener("keydown",e=>{if(e.key==="?")return u.open?u.close():u.showModal();if(/^[sf]$/i.test(e.key)||e.target.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName))return;let t=new KeyboardEvent("keydown",{key:e.key,code:e.code,shiftKey:e.shiftKey,altKey:e.altKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,cancelable:!0});dispatchEvent(t)||e.preventDefault()},{signal:o});let v=Date.now();y.onclick=()=>v=Date.now();let c=e=>String(e).padStart(2,"0"),N=setInterval(()=>{let e=Math.floor((Date.now()-v)/1e3),t=new Date;y.textContent=`${c(Math.floor(e/60))}:${c(e%60)}`,K.textContent=`${c(t.getHours())}:${c(t.getMinutes())}`},250);o.addEventListener("abort",()=>clearInterval(N));let w=(e,t)=>e.contentWindow?.postMessage({deck:"goto",...t},"*"),m=()=>{let{slide:e,step:t,slides:h}=n,q=h[e],M=n.script()[e].title,f=n.steps,p=t<f?[e,t+1]:e+1<h.length?[e+1,0]:null;C.textContent=`${e+1} / ${h.length}${f?` \xB7 step ${t+1} of ${f+1}`:""} \xB7 ${M}`,w(b,{slide:e,step:t}),s.parentElement.classList.toggle("over",!p),p&&w(s,{slide:p[0],step:p[1],animate:!1});let E=q.querySelector(":scope > aside.notes");if(!E)return void(d.innerHTML='<em class="none">No notes for this slide.</em>');d.replaceChildren(...a.importNode(E,!0).childNodes),d.querySelectorAll("mark").forEach((T,$)=>T.setAttribute("part",$<t?"cue cue-hit":$===t?"cue cue-next":"cue")),d.querySelector('mark[part~="cue-next"]')?.scrollIntoView({block:"center",behavior:"smooth"})};n.addEventListener("deckchange",m,{signal:o});for(let e of[b,s])e.addEventListener("load",m,{signal:o});r.addEventListener("pagehide",()=>this.#t.signal===o&&this.#t.abort(),{signal:o}),b.src=s.src=`${location.href.split("#")[0]}#${n.slide+1}.${n.step}`,m()}};new URL(import.meta.url).searchParams.has("nodefine")||k.define();export{k as DeckPresenter};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "deck-presenter",
+  "version": "0.1.0",
+  "description": "A presenter window for a <deck-shift> slide deck: timer, current and next slide, and notes with cues.",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "slides",
+    "presentation",
+    "speaker-notes"
+  ],
+  "author": "Keith Cirkel",
+  "type": "module",
+  "exports": "./deck-presenter.min.js",
+  "files": [
+    "deck-presenter.min.js"
+  ],
+  "scripts": {
+    "build": "node esbuild.js"
+  },
+  "peerDependencies": {
+    "deck-shift": "^0.1.0"
+  }
+}