30:T1b5d,styles = html``31:T9c3,function __normalizeDeckInput(slidesInput) { const flattened = slidesInput.map((s) => { if (_.isFunction(s)) { return s(); } if (_.isString(s)) { return s.split("\n---\n"); } return s; }); return _.flattenDeep(flattened).map((s, i) => { // We will render this later let prerendered; if (__isHtmlImageElement(s) || __isImageAttachment(s)) { prerendered = __getImageSlideHtmlFromAttachment(s); // } else if (__isVideoAttachment(s)) { // prerendered = __getVideoSlideHtmlFromAttachment(s); } else if (typeof s === "object") { prerendered = s; } // FIXME: this will not work for prerendered items const markdown = (s.trim ? s : s.toString()) .trim() .replaceAll("----", "---"); let h1 = 0; let h2 = 0; let h3 = 0; let h4 = 0; let h5 = 0; let h6 = 0; let p = 0; let ul = 0; let ol = 0; let pre = 0; // FIXME: this is unreliable and hacky. Should parse the markdown properly. Using HTML can easily break this const lines = _.compact(markdown.split("\n").map((l) => l.trim())); for (let i = 0; i < lines.length; ++i) { if (lines[i].indexOf("# ") === 0) { h1++; } else if (lines[i].indexOf("## ") === 0) { h2++; } else if (lines[i].indexOf("### ") === 0) { h3++; } else if (lines[i].indexOf("#### ") === 0) { h4++; } else if (lines[i].indexOf("##### ") === 0) { h5++; } else if (lines[i].indexOf("###### ") === 0) { h6++; } else if (lines[i].indexOf("- ") === 0 || lines[i].indexOf("* ") === 0) { ul++; // FIXME: doesn't actually detect ordered numbers and every list item } else if (lines[i].indexOf("1. ") === 0) { ol++; } else if (lines[i].indexOf("```") === 0) { pre++; } else { p++; } } const isCover = !!h1; const slideshowId = config ? config.id : "slideshow"; // FIXME: this is unreliable // The purpose is to detect if the slide will be rendered with a parent div or not const hasWrapper = lines.length > 1 && (h1 || h2 || h3 || h4 || h5 || h6 || p || pre); return { iAmSlide: true, slideshowId, id: slideshowId + "-" + i, i, prerendered, markdown, lines, hasWrapper, isCover, h1, h2, h3, h4, h5, h6, p, ul, ol, pre }; }); }32:T194b,function __getDeckHtml(deckIndex) { const d = __decks[deckIndex]; const c = __deckConfigs[deckIndex]; const slideCount = d.length; const oneSlideOnly = slideCount < 2; const prevIndex = parseInt - 1; const nextIndex = parseInt + 1; const firstIndex = 0; const lastIndex = slideCount - 1; const currentIndex = __getCurrentIndex(deckIndex); const percentage = currentIndex / (lastIndex || 1); const classes = [ "slides", ...c.theme.map((t) => `${t}-slides`), oneSlideOnly ? "slides-single" : "slides-multiple", c.loop ? "slides-with-loop" : "slides-without-loop", c.select ? "slides-with-select" : "slides-without-select", c.title ? "slides-with-title" : "slides-without-title", c.controls ? "slides-with-controls" : "slides-without-controls", c.arrows ? "slides-with-arrows" : "slides-without-arrows", c.counter ? "slides-with-counter" : "slides-without-counter", c.fullscreen ? "slides-with-fullscreen" : "slides-without-fullscreen", c.progress ? "slides-with-progress" : "slides-without-progress" ]; if (currentIndex === firstIndex) { classes.push("slides-on-first"); } if (currentIndex === lastIndex) { classes.push("slides-on-last"); } const titleElement = c.title ? htl.html`

${c.title}

` : ""; const buttonPrev = document.createElement("button"); buttonPrev.textContent = "←"; buttonPrev.classList.add( "slides-controls-button", "slides-controls-button-icon", "slides-controls-prev" ); buttonPrev.onclick = (e) => { e.stopPropagation(); if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) { goToFirst(deckIndex); } else { goToPrev(deckIndex); } }; const buttonNext = document.createElement("button"); buttonNext.textContent = "→"; buttonNext.classList.add( "slides-controls-button", "slides-controls-button-icon", "slides-controls-next" ); buttonNext.onclick = (e) => { e.stopPropagation(); if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) { goToLast(deckIndex); } else { goToNext(deckIndex); } }; // Disabling arrows if (!c.loop) { if (currentIndex === firstIndex && !buttonPrev.disabled) { buttonPrev.disabled = true; } if (currentIndex === lastIndex && !buttonNext.disabled) { buttonNext.disabled = true; } } const buttonFullscreen = document.createElement("button"); buttonFullscreen.classList.add( "slides-controls-button", "slides-controls-button-icon", "slides-controls-fullscreen" ); buttonFullscreen.onclick = (e) => { e.stopPropagation(); if (document.fullscreenElement != null) { document.exitFullscreen(); // FIXME: unbinding this doesn't really work, as HTML gets rewritten all the time unbindKeyboardShortcuts(); } else { const parentCell = slidesElement.parentElement; parentCell.requestFullscreen ? parentCell.requestFullscreen() : parentCell.webkitRequestFullscreen(); // FIXME: unbinding this doesn't really work, as HTML gets rewritten all the time unbindKeyboardShortcuts(); bindKeyboardShortcuts(); } buttonFullscreen.blur(); }; const buttonFullscreenIcon = document.createElement("span"); buttonFullscreenIcon.classList.add("slides-controls-fullscreen-icon"); buttonFullscreenIcon.textContent = "⛶"; const buttonFullscreenOverlay = document.createElement("span"); buttonFullscreenOverlay.classList.add( "slides-controls-fullscreen-icon-overlay" ); buttonFullscreenOverlay.textContent = "⟋"; buttonFullscreen.appendChild(buttonFullscreenIcon); buttonFullscreen.appendChild(buttonFullscreenOverlay); const progressBar = htl.html`

{ event.stopPropagation(); const relativeX = event.offsetX / event.target.offsetWidth; const desiredSlideIndex = Math.max( 0, Math.min(slideCount - 1, Math.round(relativeX * slideCount - 0.5)) ); __setCurrentSlide(deckIndex, desiredSlideIndex); }}>

`; const slidesElement = htl.html`

${buttonPrev} ${progressBar}

${ currentIndex + 1 }/${slideCount}

${titleElement} ${buttonFullscreen} ${buttonNext}

${d.map((slide, slideIndex) => __getSlideHtml({ deckIndex, slideIndex, slideCount, currentIndex, prevIndex, nextIndex, firstIndex, lastIndex }) )}

`; // Bindings function bindKeyboardShortcuts() { document.addEventListener("keydown", onKeydown); } // FIXME: unbinding this doesn't really work, as HTML gets rewritten all the time function unbindKeyboardShortcuts() { document.removeEventListener("keydown", onKeydown); } function onKeydown(event) { const withModifier = event.ctrlKey || event.shiftKey || event.altKey || event.metaKey; if (event.code === "ArrowLeft") { withModifier ? goToFirst(deckIndex) : goToPrev(deckIndex); } if ( event.code === "ArrowRight" || event.code === "Space" || event.code === "Enter" ) { withModifier ? goToLast(deckIndex) : goToNext(deckIndex); } } // Click anywhere to progress, but allow text selection if (c.clickAnywhere) { slidesElement.onclick = (event) => { var selection = window.getSelection(); if (selection && selection.type != "Range") { if ( (event.pageX - slidesElement.offsetLeft) / slidesElement.offsetWidth <= 0.33 ) { goToPrev(deckIndex); } else { goToNext(deckIndex); } } }; } return slidesElement; }33:T5b0,function __getSlideHtml({ deckIndex, slideIndex, slideCount, currentIndex, prevIndex, nextIndex, firstIndex, lastIndex }) { const slide = __decks[deckIndex][slideIndex]; const c = __deckConfigs[deckIndex]; const classes = [ "slide", ...c.theme.map((t) => `${t}-slide`), `slide-${slideIndex}` ]; if (slideIndex < currentIndex) { classes.push("slide-past"); classes.push("slide-not-current"); } else if (slideIndex > currentIndex) { classes.push("slide-upcoming"); classes.push("slide-not-current"); } else { classes.push("slide-current"); } if (slideIndex === firstIndex) { classes.push("slide-first"); } if (slideIndex === lastIndex) { classes.push("slide-last"); } if (slideIndex === prevIndex) { classes.push("slide-prev"); } if (slideIndex === nextIndex) { classes.push("slide-next"); } const tags = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "ul", "ol", "pre"]; for (let i = 0; i < tags.length; ++i) { if (slide[tags[i]]) { classes.push(`slide-with-${tags[i]}`); } } if (slide.isCover) { classes.push("slide-cover"); } const content = slide.prerendered ? slide.prerendered : md`${slide.markdown}`; return html`

${!slide.hasWrapper ? "

" : ""}${content}${ !slide.hasWrapper ? "

" : "" }

`; }34:T400,decks = [ `# Slides on Observable ## An interactive story about **not** using PowerPoint \`\`\`js import { slideshow, styles } with { deck } from "@jerryjappinen/slides" deck = \`# Hello world\` \`\`\` --- ## Why? Sometimes you want to present content in a slideshow. On Observable, you can also compose a deck programmatically, perhaps from a dataset. --- ## Usage \`\`\`js import { slideshow, styles } with { deck } from "@jerryjappinen/slides" deck = [ \`# Hello world\`, \`- I am a walrus.\` ] styles \`\`\` --- Default configuration: \`\`\`js config = ({ start: 0, title: "", slideWidth: 640, ratio: 16 / 9, select: false, loop: false, theme: "light", controls: true, arrows: true, counter: true, fullscreen: true, progress: true }) \`\`\` --- Inspired by [Markdown-based presentation tools](https://gist.github.com/johnloy/27dd124ad40e210e91c70dd1c24ac8c8) like [play.presenta.cc](https://play.presenta.cc/peek/YiUpCT0klC6CL#s0). --- # Have fun! ` ]35:Tabc,- Consider using `transform` for scaling slides - Do not register `goToPrev`/`goToNext` when clicking on links or buttons from slides (try `stopPropagation`) - Bake in URL support, keeping all `__currentSlides` data in URL - Allow turning off keyboard shortcuts - Slightly deprioritise slide height when calculating font size - Document `fontSize` - Fix keyboard shortcut binding issues

~~Done:~~ - Allow turning off click anywhere - External control of current slide - Auto hide navigation controls when there's only one slide in a deck - Refactor - ~~Update examples~~ - ~~Remove old code~~ - ~~Reorder docs~~ - ~~`import with { __currentSlides }`~~ - ~~Remove slides function~~ - ~~Add optional external controls to be imported~~ - ~~Make HTML and Markdown objects work in slides~~ - ~~Auto progress timer~~ - ~~Make `position: absolute;` work well with custom-styled elements in slides~~ - ~~Go to previous slide when tapping on the left 33% of the slide~~ - ~~Clamp fullscreen font height so it works better on phone screens~~ - ~~Add keyboard shortcuts for skipping to start/end with meta keys~~ - ~~Allow easy reset, i.e. going back to first slide (possibly by making progress bar interactive)~~ - ~~Keyboard shortcuts on fullscreen~~ - ~~Bug: resizing screen or going fullscreen resets slideshow~~ - ~~Scale font size to roughly match size of presentation~~ - ~~Visibly disable buttons on first/last slide when not looping~~ - ~~Make `slideWidth` configurable per slideshow~~ - ~~Allow hiding `arrows`~~ - ~~Add support for title shown on all slides~~ - ~~Configuration~~ - ~~Allow hiding page count (`counter: false`)~~ - ~~Allow hiding progress bar (`progress: false`)~~ - ~~Allow hiding fullscreen button (`fullscreen: false`)~~ - ~~Allow preventing text selection (`select: false`)~~ - ~~Support bigger hit areas to progress (possibly clicking anywhere)~~ - ~~Add fullscreen button~~ - ~~Progress bar~~ - ~~Nicer theming for controls~~ - ~~Add next and prev buttons~~ - ~~Add slide counter/pagination~~ - ~~Add CSS customisation support~~ - ~~Normalize `_decks` based on decks and/or deck~~ - ~~Return slideshows~~ - ~~`mutable __currentSlides`~~ - ~~`slideshow = slideshows[0]`~~ - ~~`currentSlide = currentSlide[0]`~~ - ~~Remove yielding values from slides()~~ - ~~Normalize `__decks`~~ - ~~Rename `slides` to `__getDeckHtml`~~ - ~~Refactor `slides()` to use new `__deckConfigs`~~ - ~~Re-enable `width` in config~~ - ~~Remove slide IDs~~ - ~~Mutate `__currentSlides` upon click~~ - ~~Remove `updateSlides`~~ - ~~Support keyed slideshows (`decks` and `slideshows` are objects instead of arrays: e.g. use `slideshows.companyIntro`)~~ - ~~Make `start` work~~ - ~~Make timer work~~

36:[] 2e:{"title":"Slides on Observable","cells":[{"id":3216,"value":"slideshow = slideshows[__deckKeys[0]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"toc({\n // title: \"Documentation\",\n // select: \".observablehq > h2:not(#source)\"\n closed: true,\n select: \"h2[toc]\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9298,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1851,"value":"viewof title = Inputs.text({\n label: html`title =`,\n placeholder: \"Empty\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"viewof slideWidth = Inputs.range([320, width], {\n label: html`slideWidth =`,\n step: 1,\n value: 640\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"viewof ratio = Inputs.range([1 / 1, 21 / 9], {\n label: html`ratio =`,\n step: 0.001,\n value: 16 / 9\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"viewof theme = Inputs.radio(themes, {\n label: html`theme =`,\n value: themes[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"viewof select = Inputs.toggle({\n label: html`select =`,\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"viewof loop = Inputs.toggle({\n label: html`loop =`,\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1883,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":11094,"value":"viewof clickAnywhere = Inputs.toggle({\n label: html`clickAnywhere =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"viewof controls = Inputs.toggle({\n label: html`controls =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1892,"value":"viewof arrows = Inputs.toggle({\n label: html`arrows =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"viewof counter = Inputs.toggle({\n label: html`counter =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"viewof fullscreen = Inputs.toggle({\n label: html`fullscreen =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"viewof progress = Inputs.toggle({\n label: html`progress =`,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2390,"value":"

Examples and use cases

","pinned":false,"hidden":false,"mode":"md"},{"id":10281,"value":"- Showcase your insights\n- Generate slides programmatically\n- Use reactive data in your slides\n- Use LaTeX\n- Use images\n- Apply custom styling to slide content\n- Code templates\n- Use URL parameters to set the start slide\n- Use timers\n- Navigate slides programmatically\n\nOpen demo notebook or keep scrolling to read the documentation.","pinned":false,"hidden":false,"mode":"md"},{"id":922,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"

Usage

","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"Import `slideshow` and `styles` with your `deck`:","pinned":false,"hidden":false,"mode":"md"},{"id":4518,"value":"viewof __multipleExampleType = Inputs.radio([\"One deck\", \"Multiple decks\", \"Named decks\"], {value: \"One deck\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"```js\n${{\n \"One deck\": `import { slideshow, styles } with { deck } from \"@jerryjappinen/slides\"\n\ndeck = \\`# Hello World\\`\n\nslideshow\n\nstyles`,\n \"Multiple decks\": `import { slideshows, styles } with { decks } from \"@jerryjappinen/slides\"\n\ndecks = [\n \\`# Hello World\\`,\n [\n \\`# One\\`,\n \\`# Two\\`\n ]\n]\n\nslideshows[0]\n\nstyles`,\n \"Named decks\": `import { slideshows, styles } with { decks } from \"@jerryjappinen/slides\"\n\ndecks = ({\n intro: \\`# Hello World\\`,\n lessonOne: [\n \\`# One\\`,\n \\`# Two\\`\n ]\n})\n\nslideshows.lessonOne\n\nstyles`\n}[__multipleExampleType]}\n```\n\n${__examplesForMulti ? \"You only need to add `styles` once. `decks` can be an array or an object.\" : \"\"}","pinned":false,"hidden":false,"mode":"md"},{"id":1092,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"Provide your `deck` as a string (slides separated by `---`):","pinned":false,"hidden":false,"mode":"md"},{"id":4714,"value":"```js\ndeck = `# Hello world\n---\nSlide 2`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1099,"value":"Or multiple strings in an array:","pinned":false,"hidden":false,"mode":"md"},{"id":4662,"value":"```js\ndeck = [\"Crawling in my skin\", \"These wounds, they will not heal\", \"Fear is how I fall\", \"Confusing what is real\"]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1328,"value":"Both methods are interchangeable, can be mixed, and result in the same output.","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1228,"value":"

Keyboard shortcuts

","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"Keyboard shortcuts work in fullscreen mode only.\n\nUse arrows, space or enter to browse your slideshow. Hold down ctrl, shift, alt/option or meta key to jump to the first/last slide.\n\n_NOTE: There’s a small bug in keyboard shortcuts: going into and out of fullscreen multiple times will cause them to stop working correctly._","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1202,"value":"

Configuration

","pinned":false,"hidden":false,"mode":"md"},{"id":1203,"value":"You can set configuration options while importing using `with`, or per deck by providing your config as the last \"slide\":","pinned":false,"hidden":false,"mode":"md"},{"id":4463,"value":"viewof __configExampleType = Inputs.radio(\n [\"import with\", \"config object\", \"inline\"],\n {\n // label: \"See example using\",\n value: \"import with\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"```js\n${\n ({\n \"import with\": `import { slideshow, styles } with { deck, ratio } from \"@jerryjappinen/slides\"\n\ndeck = \"# Hello World\"\n\nratio = 4 / 3`,\n \"config object\": `import { slideshow, styles } with { deck, config } from \"@jerryjappinen/slides\"\n\ndeck = \"# Hello World\"\n\nconfig = ({\n ratio: 4 / 3\n})`,\n \"inline\": `import { slideshow, styles } with { deck } from \"@jerryjappinen/slides\"\n\ndeck = [\"# Hello World\", {\n ratio: 4 / 3\n}]`\n })[__configExampleType]\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":4483,"value":"If you have more than one deck, you can override default settings on a deck-by-deck basis using the inline configuration.","pinned":false,"hidden":false,"mode":"md"},{"id":1205,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1218,"value":"

Basic options

","pinned":false,"hidden":false,"mode":"md"},{"id":1072,"value":"- Set `title: \"My title\"` to show deck title on each slide.\n- Set `select: true` to enable text selection, which is disabled by default.\n- Set `loop: true` to loop from the last slide to the first and vice versa.\n- Set `start: 2` to start from the slide you want.","pinned":false,"hidden":false,"mode":"md"},{"id":1217,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"

Width and aspect ratio

","pinned":false,"hidden":false,"mode":"md"},{"id":1989,"value":"You can set a custom width for the slides with `slideWidth`. Note that on Observable, every notebook has a global variable `width`, which you can use:","pinned":false,"hidden":false,"mode":"md"},{"id":1990,"value":"```js\nimport { ... } with { width as slideWidth } from \"jerryjappinen/slides\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1984,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4454,"value":"Control the height of your slideshow with `ratio`:","pinned":false,"hidden":false,"mode":"md"},{"id":613,"value":"```js\nimport { ... } with { ratio } from \"@jerryjappinen/slides\"\n\nratio = 4 / 3\n```","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"In fullscreen mode the slides will always fill the screen though (unless you change this with custom CSS).","pinned":false,"hidden":false,"mode":"md"},{"id":1226,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1062,"value":"

Controls

","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"All controls are visible by default, but you can hide them:\n\n```js\n{\n // Hide all controls\n controls: false,\n\n // Hide individual controls\n arrows: false,\n counter: false,\n fullscreen: false,\n progress: false\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2963,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"

Theming

","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"The default theme follows the Observable's look and feel. You can follow user’s dark mode preference or force dark slides by changing the theme:","pinned":false,"hidden":false,"mode":"md"},{"id":1253,"value":"theme","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"themes = [\"light\", \"white\", \"dark\", \"auto\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"Set theme for all slides in your notebook while importing:","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"```js\nimport { ... } with { deck, theme } from \"@jerryjappinen/slides\"\n\ntheme = \"light\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"Set theme for one slideshow only:","pinned":false,"hidden":false,"mode":"md"},{"id":427,"value":"```js\nimport { ... } with { decks } from \"@jerryjappinen/slides\"\n\ndeck = [\n \"Deck 1\",\n [\n `# Deck 2: slide 1`,\n `# Deck 2: slide 2`,\n {\n theme: \"dark\"\n }\n ]\n]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"

Custom themes

","pinned":false,"hidden":false,"mode":"md"},{"id":1258,"value":"Inject your own CSS into `styles`:","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"```js\nimport { slideshow, styles } with { deck, css, theme } from \"@jerryjappinen/slides\"\n\ndeck = `# Hello World`\n\ntheme = \"mytheme\"\n\ncss = `\n.mytheme-slides {}\n.mytheme-slides .slide-first {}\n.mytheme-slides .slide-last {}\n.mytheme-slides .slide-with-h1 {}\n.mytheme-slides .slide-with-h2.slide-with-p:not(.slide-with-ul) {}\n`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"You can achieve the same result with a custom HTML tag, but this will ensure your styles are injected after the base styles and overrides will work better.","pinned":false,"hidden":false,"mode":"md"},{"id":541,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2383,"value":"### Theme inheritance","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"You can inherit styles by using multiple themes. This will inject the class names for both `dark` and `mytheme` theme:","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"```js\ntheme = [\"mytheme\", \"dark\"]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"

Current slide value

","pinned":false,"hidden":false,"mode":"md"},{"id":930,"value":"Use `currentSlide` or `currentSlides` to get the current slide index:","pinned":false,"hidden":false,"mode":"md"},{"id":4644,"value":"```js\nimport { currentSlide } from \"@jerryjappinen/slides\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":3209,"value":"currentSlide = __currentSlides[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":10259,"value":"currentSlides = {\n const slideIndexes = __deckKeys.map((key, i) => { return __getCurrentIndex(i) })\n\n // if (__decksAreNamed) {\n // return _.mapValues(\n // _.keyBy(\n // __deckKeys.map((key, i) => {\n // return {\n // i,\n // key\n // };\n // }),\n // \"key\"\n // ),\n // ({ i }) => {\n // return __getCurrentIndex(i);\n // }\n // );\n // }\n\n return __mapToDeckKeys(slideIndexes);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"You can now do other things in your notebook based on where the user is in the slideshow. Like reward them with cash: 💰${_.repeat(\"💰\", _.max(__currentSlides))}","pinned":false,"hidden":false,"mode":"md"},{"id":2391,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2964,"value":"

Timer

","pinned":false,"hidden":false,"mode":"md"},{"id":2966,"value":"Start a `timer` to auto progress slides:","pinned":false,"hidden":false,"mode":"md"},{"id":2969,"value":"```js\nimport { timer } from \"@jerryjappinen/slides\"\n\n// Set timer in seconds, one deck:\ntimer(10)\n\n// Multiple decks\ntimer(\"myDeckKey\", 10)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4003,"value":"

Programmatic navigation

","pinned":false,"hidden":false,"mode":"md"},{"id":9371,"value":"You can create custom buttons for advancing slideshows.","pinned":false,"hidden":false,"mode":"md"},{"id":9204,"value":"```js\nimport { goToLast } from \"@jerryjappinen/slides\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":9380,"value":"Inputs.button(\"Go to last slide\", {\n reduce() {\n return goToLast();\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9387,"value":"The following functions are available:","pinned":false,"hidden":false,"mode":"md"},{"id":4016,"value":"function goToPrev(deckIndex = 0) {\n const di = __getDeckIndex(deckIndex)\n const i = __getCurrentIndexMutable(di)\n\n if (i > 0) {\n __setCurrentSlide(di, i - 1);\n } else if (__deckConfigs[di].loop) {\n __setCurrentSlide(di, __decks[di].length - 1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4012,"value":"function goToNext(deckIndex = 0) {\n const di = __getDeckIndex(deckIndex)\n const i = __getCurrentIndexMutable(di);\n\n if (i < __decks[di].length - 1) {\n __setCurrentSlide(di, i + 1);\n } else if (__deckConfigs[di].loop) {\n __setCurrentSlide(di, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4011,"value":"function goToFirst(deckIndex = 0) {\n const di = __getDeckIndex(deckIndex);\n __setCurrentSlide(di, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4014,"value":"function goToLast(deckIndex = 0) {\n const di = __getDeckIndex(deckIndex);\n __setCurrentSlide(di, __decks[di].length - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4028,"value":"function goTo(...args) {\n return args.length < 1\n ? __setCurrentSlide(0, args[0])\n : __setCurrentSlide(__getDeckIndex(args[0]), args[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10916,"value":"If you have multiple decks, give the index or key of the deck as an argument.","pinned":false,"hidden":false,"mode":"md"},{"id":3386,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3256,"value":"

Source

","pinned":false,"hidden":false,"mode":"md"},{"id":3261,"value":"slideshows = {\n const shows = __decks.map((d, i) => {\n return __getDeckHtml(i);\n });\n\n // Generate keyed map of slideshows, rather than array\n if (__decksAreNamed) {\n return _.mapValues(\n _.keyBy(\n __deckKeys.map((key, i) => {\n return { key, show: shows[i] };\n }),\n \"key\"\n ),\n \"show\"\n );\n }\n\n return shows;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10534,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3221,"value":"config = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"css = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"slideHeight = Math.round(slideWidth / ratio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3231,"value":"start = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":4612,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4215,"value":"__decksAreNamed = _.isPlainObject(__decksInput)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4199,"value":"__decksInput = (deck ? [deck] : _.isString(decks) ? [decks] : decks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4183,"value":"__deckKeys = __decksAreNamed\n ? _.keys(__decksInput)\n : _.range(0, __decksInput.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9743,"value":"function __getDeckIndex (indexOrKey) {\n if (__decksAreNamed && _.isString(indexOrKey)) {\n return Math.max(0, __deckKeys.indexOf(indexOrKey))\n }\n\n return indexOrKey\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"__decks = __decksWithConfigs.map((d) => {\n if (__isConfigObject(d[d.length - 1])) {\n return _.slice(d, 0, d.length - 1);\n }\n\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3320,"value":"__decksWithConfigs = _.values(__decksInput).map(__normalizeDeck)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3222,"value":"// If the user provided a config as the last element in their deck, that will be included here\n__deckConfigs = __decksWithConfigs.map((d) => {\n const thisConfig = d[d.length - 1];\n return __isConfigObject(thisConfig) ? thisConfig : __baseConfig;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3370,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":9812,"value":"interval = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":10603,"value":"function* timer(...args) {\n const deckIndex = args.length < 2 ? 0 : __getDeckIndex(args[0]);\n const intervalInput = args.length < 2 ? args[0] : args[1];\n const paused = args.length - 1 === true ? true : false;\n\n let i = 0;\n let j = 0;\n while (true) {\n if (\n j &&\n // __getCurrentIndex(deckIndex) < __decks[deckIndex].length - 1 &&\n !paused\n ) {\n goToNext(deckIndex);\n }\n\n ++j;\n const d = intervalInput || interval || 1;\n yield Promises.delay(d * 1000, (i = i + d));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3250,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3228,"value":"__defaultConfig = __normalizeConfig({\n title,\n slideWidth,\n ratio,\n theme,\n loop,\n select,\n clickAnywhere,\n controls,\n arrows,\n counter,\n fullscreen,\n progress,\n start\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3237,"value":"__baseConfig = __normalizeConfig(_.merge({}, __defaultConfig, config))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3397,"value":"__normalizeConfig = function (configInput) {\n const config = configInput || {};\n\n if (!config.slideWidth) {\n config.slideWidth = Math.max(1, Math.min(width, slideWidth || 640));\n }\n\n if (!config.ratio) {\n config.ratio = ratio || 16 / 9;\n }\n\n config.slideHeight = Math.round(config.slideWidth / config.ratio);\n\n if (!config.fontSize) {\n config.fontSize =\n 1.2 * (config.slideWidth / config.ratio / __slideAreaBase);\n }\n\n if (!config.theme) {\n config.theme = theme || themes[0] || \"light\";\n }\n\n // FIXME: brute-forcing stuff here...\n config.theme = _.flatten(\n _.flattenDeep([config.theme]).map((s) => s.trim().split(\" \"))\n );\n\n config.iAmConfig = true;\n\n return config;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3294,"value":"function __isConfigObject(potentialConfigObject) {\n return !!(\n potentialConfigObject &&\n _.isPlainObject(potentialConfigObject) &&\n !potentialConfigObject.iAmSlide\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4751,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3298,"value":"function __normalizeDeck(deckInput) {\n const slidesInput = _.flattenDeep([\n _.isFunction(deckInput) ? deckInput() : deckInput\n ]);\n const lastArg = slidesInput[slidesInput.length - 1];\n const hasConfig = __isConfigObject(lastArg);\n\n const normalizedDeck = __normalizeDeckInput(\n hasConfig ? _.slice(slidesInput, 0, slidesInput.length - 1) : slidesInput\n );\n\n return hasConfig\n ? [...normalizedDeck, __normalizeConfig(_.merge({}, __baseConfig, lastArg))]\n : normalizedDeck;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3328,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11125,"value":"function __isHtmlImageElement(obj) {\n if (\n obj &&\n typeof obj === \"object\" &&\n obj.src &&\n obj.tagName &&\n obj.tagName === \"IMG\"\n ) {\n return true;\n }\n\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11124,"value":"function __isImageAttachment(obj) {\n if (\n obj &&\n typeof obj === \"object\" &&\n obj.name &&\n obj.url &&\n obj.image &&\n obj.mimeType &&\n obj.mimeType.indexOf(\"image/\") === 0\n ) {\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11129,"value":"function __isVideoAttachment(obj) {\n if (\n obj &&\n typeof obj === \"object\" &&\n obj.name &&\n obj.url &&\n obj.mimeType &&\n obj.mimeType.indexOf(\"video/\") === 0\n ) {\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3834,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3212,"value":"mutable __currentSlides = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":4313,"value":"function __getCurrentIndex (deckIndex) {\n return _.isNumber(__currentSlides[deckIndex])\n ? __currentSlides[deckIndex]\n : __startSlides[deckIndex];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4320,"value":"function __getCurrentIndexMutable(deckIndex) {\n return _.isNumber(mutable __currentSlides[deckIndex])\n ? mutable __currentSlides[deckIndex]\n : __startSlides[deckIndex];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11135,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":11136,"value":"/* async */ function __getImageSlideHtmlFromAttachment(imageAttachment) {\n const img = imageAttachment.src\n ? imageAttachment\n : /* await */ imageAttachment.image();\n return html` $\"${\n$ `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11143,"value":"async function __getVideoSlideHtmlFromAttachment(videoAttachment) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3317,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3419,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4757,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4069,"value":"function __getNewSlideIndex(deckIndex, slideIndex) {\n if (__decks[deckIndex]) {\n return Math.min(Math.max(0, slideIndex), __decks[deckIndex].length - 1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10607,"value":"function __mapToDeckKeys(indexedValues) {\n const mapping = __deckKeys.map((key, i) => {\n return {\n i,\n key,\n value: indexedValues[i]\n };\n });\n\n if (__decksAreNamed) {\n return _.mapValues(_.keyBy(mapping, \"key\"), \"value\");\n }\n\n return _.map(_.orderBy(_.values(mapping), \"i\"), \"value\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3412,"value":"function __setCurrentSlide(deckIndex, slideIndex) {\n const newIndex = __getNewSlideIndex(deckIndex, slideIndex);\n if (_.isNumber(newIndex)) {\n const indices = [...mutable __currentSlides];\n indices[deckIndex] = newIndex;\n mutable __currentSlides = indices;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4285,"value":"__startSlides = __deckConfigs.map((c) => c.start)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4671,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2014,"value":"__slideAreaBase = 640 / (16 / 9)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":10162,"value":"### Docs","pinned":false,"hidden":false,"mode":"md"},{"id":4666,"value":"__examplesForMulti = __multipleExampleType !== \"One deck\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3205,"value":"deck = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":3203,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":8751,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":10215,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"import { darkMode } from \"@jerryjappinen/dark-mode\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"import { baseStyles } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11195,"value":"import { toc } from \"@jerryjappinen/snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11113,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"},{"id":4564,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":9864,"value":"

Todo

","pinned":false,"hidden":false,"mode":"md"},{"id":3146,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":2982,"value":"

Known issues

","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"When config or slide data changes, `slideshows` will reset. This leads to some problems:\n\n- Prerendered blocks do not get content-based CSS classes for proper theming support.\n- CSS class generation in `__normalizeDeckInput` is unreliable\n- Minor: There might be very brief flicker when rerendering\n- Rerendering will break interactions for some milliseconds.\n - If your slide updates every millisecond, for example due to a visualisation or when using `now`, slideshow interactions will basically not work.\n - CSS animations or transitions will not cause this issue.\n - You can still use external buttons to control slides.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W36","stdlib":"1","titling":"auto"}