31:T52b,keyBindings = { let currentSlide = -1; let showNotes = () => {}; function gotoSlide(i) { const slides = document.querySelectorAll('.observablehq .slide'); currentSlide = Math.min(Math.max(i, 0), slides.length - 1); slides[currentSlide].scrollIntoView(); showNotes(slides[currentSlide]); } function keyUp(event) { switch (event.key) { case 'ArrowUp': case 'ArrowLeft': gotoSlide(currentSlide - 1); break; case 'ArrowDown': case 'ArrowRight': gotoSlide(currentSlide + 1); break; } } document.removeEventListener('keyup', keyUp); document.addEventListener('keyup', keyUp); const button = html``; button.onclick = () => { const notes = open("about:blank", "notes", "width=600,height=400").document.body; showNotes = slide => { notes.innerHTML = ""; const cell = slide.parentNode; const siblings = Array.from(document.querySelectorAll('.observablehq')); for (const sibling of siblings.slice(siblings.indexOf(cell))) { if (sibling.querySelector('.notes')) { notes.innerHTML = sibling.innerHTML; break; } } } } const wrapper = html`

${button}

` wrapper.value = { gotoSlide: gotoSlide } return wrapper; }32:[] 2f:{"title":"Slides","cells":[{"id":0,"value":"md`# Slides\n\nFor when you want some hybrid of **slides + blog post + explorable explanation**. Used for [my talk at JSConf Hawai‘i 2019](/@visnup/cheat) and [Observable + Vega-Lite crash course](https://www.youtube.com/watch?v=ZV_Yjcs5WtM).\n\nInspired by [@mbostock/slide](https://beta.observablehq.com/@mbostock/slide), but with:\n\n- A more complicated \\`slide.html\\` template literal for more complicated slides\n- Keyboard shortcuts (up, down or left, right) to advance or rewind slides\n- \\`notes\\` helper for interstitial speaker notes / blog post content`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`---\n## Usage\n~~~js\nimport { slide, notes, style, keyBindings } from '@visnup/slides'\n~~~\n\n👉🏼 See [@visnup/slides-usage](slides-usage) for a forkable example.\n\n⚠️ Be sure to reference \\`style\\` and \\`keyBindings\\` from two new cells in your notebook for styling and arrow keys to work. Further, before arrow keys really work, you’ll need to click a slide’s content to give it keyboard focus.\n\n🎥 To begin the presentation, click the ... menu in the top right and choose “View in fullscreen.”\n\nIf you want to customize your slides’ style (e.g., add background colors or change fonts), add additional \\``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}