30:T90f,keyBindings = { let currentSlide = 0; let showNotes = () => {}; function keyUp(event) { const slides = document.querySelectorAll('.observablehq .slide'); switch (event.key) { case 'ArrowUp': case 'ArrowLeft': // Check if there are any more bullets to *hide* // If there are displayed LI elements, hide them (instead of advancing slides) let cell = slides[currentSlide].parentNode; let hidden_lis = cell.querySelectorAll("li:not(.hidden)"); console.log(hidden_lis); if (hidden_lis.length !== 0) { hidden_lis[hidden_lis.length - 1].classList.add("hidden"); } else { currentSlide = Math.max(currentSlide - 1, 0); slides[currentSlide].scrollIntoView(); showNotes(slides[currentSlide]); } break; case 'ArrowDown': case 'ArrowRight': // Check if there are any more bullets to move through // If there are hidden LI elements, show them (instead of advancing slides) currentSlide = Math.min(currentSlide, slides.length - 1); console.log(currentSlide, slides[currentSlide]); let current_cell = slides[currentSlide].parentNode; const lis = current_cell.querySelectorAll("li.hidden"); if (lis.length !== 0) { lis[0].classList.remove("hidden"); } // Otherwise, advance else { currentSlide = Math.min(currentSlide + 1, slides.length - 1); const slide = slides[currentSlide]; hide_li_elements(slide); slide.scrollIntoView(); showNotes(slide); } break; } } document.removeEventListener('keyup', keyUp); document.addEventListener('keyup', keyUp); const button = html``; button.onclick = () => { const notes = open("about:blank", "notes", "width=300,height=200").document .body; showNotes = slide => { notes.innerHTML = ""; let 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; } } }; }; return button; }31:T8b3,style = html` `32:[] 2e:{"title":"Slides","cells":[{"id":0,"value":"md`# Slides\n\nForked from [@visnup/slides](https://observablehq.com/@visnup/slides), which was insprired by [@mbostock/slide](https://beta.observablehq.com/@mbostock/slide). \n\nAdding the ability to use key events to **show/hide** list items (\\`

\\`)\n\nAdding new styles for various classes:\n\n- \\`slide.md(\"intro\")\\` for intro slides\n- \\`slide.html(\"feature\")\\` for slides featuring some primary \"content\" with a label below\n- \\`slide.html(\"bullets\")\\` for slides with \\`

\\` elements to show/hide\n- \\`slide.html(\"callout\")\\` for a quote to direct attention to\n\n\nSome examples:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"slide.md(\"intro\")`\n# Title Slide\nSubtitle\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"slide.md(\"bullets\")`\n# Items that appear on keystroke\n\n- one\n- two\n- three\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"slide.html(\"feature\")`${chart}\n

Slide featuring something (here, an imported chart)

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"slide.md(\"callout\")`\n# Draw attention to this point\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"slide.html('small')`\n

Code is a code example -- edit the code below to change the display\n

\n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"import { chart } from \"@info474/preparing-for-covid-19-teaching\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`---\n## Usage\n~~~js\nimport { slide, notes, style, keyBindings } from '@mkfreeman/slides'\nstyle\nkeyBindings\n~~~\n\nBe sure to reference \\`style\\` and \\`keyBindings\\` from cells in your notebook.\n\nIf you want to style your slides (e.g., add background colors or change fonts), add an additional \\`