31:Ta6c,This notebook contains methods to create slideshow. The implementation is based on the excellent [Swiper JS]( https://swiperjs.com/) library. ```js import { newSlideDeck, newSlideDeckCss } from "@kotelnikov/slide-deck" // --- htl.html`` // Include CSS styles in the notebook // --- slides = [ { content: () => md`## Hello, world!\n- item one\n- item two` }, { content: () => md`## The second slide` } // ... ]; // --- viewof deck = newSlideDeck({ count: slides.length, width: width, // This is the "global" ObservableHQ variable height: width / 1.6, slideWidth: 640, slideHeight: 640 / 1.6, // Keep the same proportions as the deck activate: async ({ slideElement, index }) => { if (!slideElement._initialized) { slideElement._initialized = true; const slideContent = await slides[index].content(); slideElement.appendChild(slideContent); } console.log("Activated", index); }, deactivate: async ({ slideElement, index }) => { console.log("Deactivated", index); } }); ``` ## `newBasicSlideDeck` The method `newBasicSlideDeck(...)` creates simple (not re-scalable) slide decks. It takes the following parameters: * `count` - the mandatory parameter defining the number of slides to create * `width` - the mandatory width of the slide deck * `height` - optional height of the slide deck * `activate(options)` - async method called to activate slides * `deactivate(options)` - async method called to de-activate slides All other parameters are transferred directly to the SwiperJS constructor. For more information - see https://swiperjs.com/ The `activate(options)` / `deactivate(options)` methods should render slides on activation and cleanup resources when slides are moved away. The are called with the following parameters: * `options.element` - the currently active element representing the container for the slide * `options.slideElement` - the DOM element containing the slide itself; in the simplest case it is the same value as the `element` parameter. In the case of scalable slides this element contains the real re-scaled content. * `options.index` - slide index * `options.swiper` - the internal swiper instance managing slides ## `newSlideDeck` The `newSlideDeck` method allows to deal with re-scaled slides. It takes all parameters used by the `newBasicSlideDeck` method and adds slide re-scaling functionality. Additional parameters used by this method: * `slideWidth` - the internal slide width; * `slideHeight` - the internal slide height; * ## `newSlideDeckCss` This method returns a serialized CSS style to include to the page. 32:Tce5,function newBasicSlideDeck({ count = 0, id, activate = () => {}, deactivate = () => {}, handleError = console.error, width = 500, height = width / 1.6, delay = 100, ...options }) { id = id || newId(); const div = document.createElement("div"); div.innerHTML = `

`; const rootElm = div.querySelector(".swiper"); const wrapperElm = rootElm.querySelector(".swiper-wrapper"); for (let i = 0; i < count; i++) { const element = document.createElement("div"); element.classList.add("swiper-slide"); wrapperElm.appendChild(element); } let info; let promise = Promise.resolve(); const onUpdate = debounce((swiper) => { promise = promise.then(async () => { try { const element = swiper.slides[swiper.realIndex]; if (info && element === info.element) return; if (info) { await deactivate(info); info = null; } if (!element) return; info = { element, slideElement: element, index: swiper.realIndex, swiper, width, height, ...options }; await activate(info); div.dispatchEvent(new CustomEvent("input")); } catch (error) { handleError(error); } }); }, delay); const swiper = new Swiper(rootElm, { // Optional parameters // direction: "horizontal", // "vertical", direction: "horizontal", ...options, keyboard: { enabled: true, ...options.keyboard }, // If we need pagination pagination: { ...options.pagination, el: rootElm.querySelector(".swiper-pagination"), // clickable: true, type: "fraction" }, // Navigation arrows navigation: { ...options.navigation, nextEl: rootElm.querySelector(".swiper-button-next"), prevEl: rootElm.querySelector(".swiper-button-prev") }, // And if we need scrollbar scrollbar: { draggable: true, // draggable scrollbar snapOnRelease: true, ...options.scrollbar, el: div.querySelector(".swiper-scrollbar") }, on: { beforeSlideChangeStart: onUpdate, slideChange: onUpdate } }); Object.defineProperty(div, "value", { get: () => (info ? info.index : -1), set: (value = 0) => { !isNaN(value) && swiper.slideTo(value); } }); return Object.assign(div, { swiper }); function newId(prefix = "id") { const ns = newId; const base = (ns._base = ns._base || Date.now()); const id = (ns._counter = (ns._counter || 0) + 1); return `${prefix}-${base}-${id}`; } function debounce(func, delay) { let id; return (...args) => ( clearTimeout(id), (id = setTimeout(() => func(...args), delay)) ); } }33:T971,function getSlidesScaleParams({ activate = () => {}, deactivate = () => {}, width = 1024, height = width / 1.6, slideWidth = width, slideHeight = (slideWidth * height) / width, ...params }) { function getSize(style, top, right, bottom, left) { return { left: parseFloat(style[left]) || 0, right: parseFloat(style[right]) || 0, top: parseFloat(style[top]) || 0, bottom: parseFloat(style[bottom]) || 0 }; } function updateOptions(options) { // https://www.javascripttutorial.net/javascript-dom/javascript-width-height/ const slideElement = options.element._slideElm; const style = getComputedStyle(options.element); const padding = getSize( style, "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ); const border = getSize( style, "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ); const width = parseFloat(style.width) - padding.left - padding.right - border.left - border.right - 0; const height = parseFloat(style.height) - padding.top - padding.bottom - border.top - border.bottom - 0; const slideScaleX = width / slideWidth; const slideScaleY = height / slideHeight; return { ...options, slideElement, slideScaleX, slideScaleY }; } return { ...params, width, height, slideWidth, slideHeight, activate: async (options) => { const { element, index } = options; let slideElement = element._slideElm; if (!slideElement) { slideElement = element._slideElm = document.createElement("div"); element.appendChild(slideElement); Object.assign(element.style, { position: "relative", padding: 0 }); Object.assign(slideElement.style, { position: "absolute", top: 0, left: 0, transformOrigin: "top left", width: `${slideWidth}px`, height: `${slideHeight}px` }); } options = updateOptions(options); Object.assign(options.slideElement.style, { transform: `scale(${options.slideScaleX}, ${options.slideScaleY})` }); await activate(options); }, deactivate: async (options) => { await deactivate(updateOptions(options)); } }; }34:T682,function newSlideDeckCss() { return ` @import "https://cdn.jsdelivr.net/npm/swiper@8.0.7/swiper-bundle.css"; /* * / :root { --swiper-scrollbar-color: #eee; --swiper-slide-border-color : #eee; --swiper-slide-background-color: white; --swiper-slide-border-width: 5px; --swiper-slide-border-radius: 0.2em; } /* */ .swiper { height: 100%; } .swiper .swiper-wrapper { height: 100%; } .swiper .swiper-scrollbar { background-color: var(--swiper-scrollbar-color, #eee); } .swiper .swiper-slide { box-sizing: border-box; border: var(--swiper-slide-border-width, 5px) solid var(--swiper-slide-border-color, #eee); border-radius: var(--swiper-slide-border-radius, 0.2em); background: var(--swiper-slide-background-color, white); display: flex; justify-content: center; align-items: center; } .swiper.swiper-horizontal .swiper-slide { height: calc(100% - 3px); } .swiper.swiper-vertical .swiper-slide { width: calc(100% - 3px); } .swiper .swiper-scrollbar-drag { background-color: var(--swiper-theme-color); } .swiper .swiper-button-next, .swiper .swiper-button-next { } .swiper .swiper-pagination { font-size: 1.2em; background-color: rgba(255,255,255,0.4); border-radius: var(--swiper-slide-border-radius); color: rgba(0,0,0,0.4); left: calc(50% - 2.5em); width: 5em; padding: 0.5em; } .swiper .swiper-pagination:hover { background-color: rgba(255,255,255,1); color: rgba(0,0,0,1); } `; }35:[] 2f:{"title":"Slide Deck: Implementation","cells":[{"id":0,"value":"# Slide Deck: Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":293,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"function newSlideDeck(options) {\n return newBasicSlideDeck(getSlidesScaleParams(options));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"## JS Imports / CSS","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"Swiper = {\n return (await import(\"swiper@8.0.7/swiper-bundle.esm.browser.js\")).default;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}