From d283f7e661e14d6ae1881fe803e5b4f1ed0689ff Mon Sep 17 00:00:00 2001 From: David Thompson Date: Mon, 24 Jun 2024 13:49:08 -0400 Subject: Add 2024 Guix social talk. --- .../reveal.js/js/components/playback.js | 165 ++ 2024-06-18-guix-social/reveal.js/js/config.js | 330 +++ .../reveal.js/js/controllers/autoanimate.js | 643 ++++ .../reveal.js/js/controllers/backgrounds.js | 468 +++ .../reveal.js/js/controllers/controls.js | 279 ++ .../reveal.js/js/controllers/focus.js | 103 + .../reveal.js/js/controllers/fragments.js | 375 +++ .../reveal.js/js/controllers/jumptoslide.js | 197 ++ .../reveal.js/js/controllers/keyboard.js | 400 +++ .../reveal.js/js/controllers/location.js | 247 ++ .../reveal.js/js/controllers/notes.js | 126 + .../reveal.js/js/controllers/overview.js | 255 ++ .../reveal.js/js/controllers/plugins.js | 254 ++ .../reveal.js/js/controllers/pointer.js | 126 + .../reveal.js/js/controllers/printview.js | 239 ++ .../reveal.js/js/controllers/progress.js | 110 + .../reveal.js/js/controllers/scrollview.js | 919 ++++++ .../reveal.js/js/controllers/slidecontent.js | 489 ++++ .../reveal.js/js/controllers/slidenumber.js | 139 + .../reveal.js/js/controllers/touch.js | 265 ++ 2024-06-18-guix-social/reveal.js/js/index.js | 58 + 2024-06-18-guix-social/reveal.js/js/reveal.js | 3079 ++++++++++++++++++++ 2024-06-18-guix-social/reveal.js/js/utils/color.js | 77 + .../reveal.js/js/utils/constants.js | 17 + .../reveal.js/js/utils/device.js | 8 + .../reveal.js/js/utils/loader.js | 46 + 2024-06-18-guix-social/reveal.js/js/utils/util.js | 313 ++ 27 files changed, 9727 insertions(+) create mode 100644 2024-06-18-guix-social/reveal.js/js/components/playback.js create mode 100644 2024-06-18-guix-social/reveal.js/js/config.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/autoanimate.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/backgrounds.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/controls.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/focus.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/fragments.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/jumptoslide.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/keyboard.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/location.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/notes.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/overview.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/plugins.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/pointer.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/printview.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/progress.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/scrollview.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/slidecontent.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/slidenumber.js create mode 100644 2024-06-18-guix-social/reveal.js/js/controllers/touch.js create mode 100644 2024-06-18-guix-social/reveal.js/js/index.js create mode 100644 2024-06-18-guix-social/reveal.js/js/reveal.js create mode 100644 2024-06-18-guix-social/reveal.js/js/utils/color.js create mode 100644 2024-06-18-guix-social/reveal.js/js/utils/constants.js create mode 100644 2024-06-18-guix-social/reveal.js/js/utils/device.js create mode 100644 2024-06-18-guix-social/reveal.js/js/utils/loader.js create mode 100644 2024-06-18-guix-social/reveal.js/js/utils/util.js (limited to '2024-06-18-guix-social/reveal.js/js') diff --git a/2024-06-18-guix-social/reveal.js/js/components/playback.js b/2024-06-18-guix-social/reveal.js/js/components/playback.js new file mode 100644 index 0000000..06fa7ba --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/js/components/playback.js @@ -0,0 +1,165 @@ +/** + * UI component that lets the use control auto-slide + * playback via play/pause. + */ +export default class Playback { + + /** + * @param {HTMLElement} container The component will append + * itself to this + * @param {function} progressCheck A method which will be + * called frequently to get the current playback progress on + * a range of 0-1 + */ + constructor( container, progressCheck ) { + + // Cosmetics + this.diameter = 100; + this.diameter2 = this.diameter/2; + this.thickness = 6; + + // Flags if we are currently playing + this.playing = false; + + // Current progress on a 0-1 range + this.progress = 0; + + // Used to loop the animation smoothly + this.progressOffset = 1; + + this.container = container; + this.progressCheck = progressCheck; + + this.canvas = document.createElement( 'canvas' ); + this.canvas.className = 'playback'; + this.canvas.width = this.diameter; + this.canvas.height = this.diameter; + this.canvas.style.width = this.diameter2 + 'px'; + this.canvas.style.height = this.diameter2 + 'px'; + this.context = this.canvas.getContext( '2d' ); + + this.container.appendChild( this.canvas ); + + this.render(); + + } + + setPlaying( value ) { + + const wasPlaying = this.playing; + + this.playing = value; + + // Start repainting if we weren't already + if( !wasPlaying && this.playing ) { + this.animate(); + } + else { + this.render(); + } + + } + + animate() { + + const progressBefore = this.progress; + + this.progress = this.progressCheck(); + + // When we loop, offset the progress so that it eases + // smoothly rather than immediately resetting + if( progressBefore > 0.8 && this.progress < 0.2 ) { + this.progressOffset = this.progress; + } + + this.render(); + + if( this.playing ) { + requestAnimationFrame( this.animate.bind( this ) ); + } + + } + + /** + * Renders the current progress and playback state. + */ + render() { + + let progress = this.playing ? this.progress : 0, + radius = ( this.diameter2 ) - this.thickness, + x = this.diameter2, + y = this.diameter2, + iconSize = 28; + + // Ease towards 1 + this.progressOffset += ( 1 - this.progressOffset ) * 0.1; + + const endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) ); + const startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) ); + + this.context.save(); + this.context.clearRect( 0, 0, this.diameter, this.diameter ); + + // Solid background color + this.context.beginPath(); + this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false ); + this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )'; + this.context.fill(); + + // Draw progress track + this.context.beginPath(); + this.context.arc( x, y, radius, 0, Math.PI * 2, false ); + this.context.lineWidth = this.thickness; + this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )'; + this.context.stroke(); + + if( this.playing ) { + // Draw progress on top of track + this.context.beginPath(); + this.context.arc( x, y, radius, startAngle, endAngle, false ); + this.context.lineWidth = this.thickness; + this.context.strokeStyle = '#fff'; + this.context.stroke(); + } + + this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) ); + + // Draw play/pause icons + if( this.playing ) { + this.context.fillStyle = '#fff'; + this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize ); + this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize ); + } + else { + this.context.beginPath(); + this.context.translate( 4, 0 ); + this.context.moveTo( 0, 0 ); + this.context.lineTo( iconSize - 4, iconSize / 2 ); + this.context.lineTo( 0, iconSize ); + this.context.fillStyle = '#fff'; + this.context.fill(); + } + + this.context.restore(); + + } + + on( type, listener ) { + this.canvas.addEventListener( type, listener, false ); + } + + off( type, listener ) { + this.canvas.removeEventListener( type, listener, false ); + } + + destroy() { + + this.playing = false; + + if( this.canvas.parentNode ) { + this.container.removeChild( this.canvas ); + } + + } + +} \ No newline at end of file diff --git a/2024-06-18-guix-social/reveal.js/js/config.js b/2024-06-18-guix-social/reveal.js/js/config.js new file mode 100644 index 0000000..de44bd6 --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/js/config.js @@ -0,0 +1,330 @@ +/** + * The default reveal.js config object. + */ +export default { + + // The "normal" size of the presentation, aspect ratio will be preserved + // when the presentation is scaled to fit different resolutions + width: 960, + height: 700, + + // Factor of the display size that should remain empty around the content + margin: 0.04, + + // Bounds for smallest/largest possible scale to apply to content + minScale: 0.2, + maxScale: 2.0, + + // Display presentation control arrows + controls: true, + + // Help the user learn the controls by providing hints, for example by + // bouncing the down arrow when they first encounter a vertical slide + controlsTutorial: true, + + // Determines where controls appear, "edges" or "bottom-right" + controlsLayout: 'bottom-right', + + // Visibility rule for backwards navigation arrows; "faded", "hidden" + // or "visible" + controlsBackArrows: 'faded', + + // Display a presentation progress bar + progress: true, + + // Display the page number of the current slide + // - true: Show slide number + // - false: Hide slide number + // + // Can optionally be set as a string that specifies the number formatting: + // - "h.v": Horizontal . vertical slide number (default) + // - "h/v": Horizontal / vertical slide number + // - "c": Flattened slide number + // - "c/t": Flattened slide number / total slides + // + // Alternatively, you can provide a function that returns the slide + // number for the current slide. The function should take in a slide + // object and return an array with one string [slideNumber] or + // three strings [n1,delimiter,n2]. See #formatSlideNumber(). + slideNumber: false, + + // Can be used to limit the contexts in which the slide number appears + // - "all": Always show the slide number + // - "print": Only when printing to PDF + // - "speaker": Only in the speaker view + showSlideNumber: 'all', + + // Use 1 based indexing for # links to match slide number (default is zero + // based) + hashOneBasedIndex: false, + + // Add the current slide number to the URL hash so that reloading the + // page/copying the URL will return you to the same slide + hash: false, + + // Flags if we should monitor the hash and change slides accordingly + respondToHashChanges: true, + + // Enable support for jump-to-slide navigation shortcuts + jumpToSlide: true, + + // Push each slide change to the browser history. Implies `hash: true` + history: false, + + // Enable keyboard shortcuts for navigation + keyboard: true, + + // Optional function that blocks keyboard events when retuning false + // + // If you set this to 'focused', we will only capture keyboard events + // for embedded decks when they are in focus + keyboardCondition: null, + + // Disables the default reveal.js slide layout (scaling and centering) + // so that you can use custom CSS layout + disableLayout: false, + + // Enable the slide overview mode + overview: true, + + // Vertical centering of slides + center: true, + + // Enables touch navigation on devices with touch input + touch: true, + + // Loop the presentation + loop: false, + + // Change the presentation direction to be RTL + rtl: false, + + // Changes the behavior of our navigation directions. + // + // "default" + // Left/right arrow keys step between horizontal slides, up/down + // arrow keys step between vertical slides. Space key steps through + // all slides (both horizontal and vertical). + // + // "linear" + // Removes the up/down arrows. Left/right arrows step through all + // slides (both horizontal and vertical). + // + // "grid" + // When this is enabled, stepping left/right from a vertical stack + // to an adjacent vertical stack will land you at the same vertical + // index. + // + // Consider a deck with six slides ordered in two vertical stacks: + // 1.1 2.1 + // 1.2 2.2 + // 1.3 2.3 + // + // If you're on slide 1.3 and navigate right, you will normally move + // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you + // from 1.3 -> 2.3. + navigationMode: 'default', + + // Randomizes the order of slides each time the presentation loads + shuffle: false, + + // Turns fragments on and off globally + fragments: true, + + // Flags whether to include the current fragment in the URL, + // so that reloading brings you to the same fragment position + fragmentInURL: true, + + // Flags if the presentation is running in an embedded mode, + // i.e. contained within a limited portion of the screen + embedded: false, + + // Flags if we should show a help overlay when the question-mark + // key is pressed + help: true, + + // Flags if it should be possible to pause the presentation (blackout) + pause: true, + + // Flags if speaker notes should be visible to all viewers + showNotes: false, + + // Flags if slides with data-visibility="hidden" should be kep visible + showHiddenSlides: false, + + // Global override for autoplaying embedded media (video/audio/iframe) + // - null: Media will only autoplay if data-autoplay is present + // - true: All media will autoplay, regardless of individual setting + // - false: No media will autoplay, regardless of individual setting + autoPlayMedia: null, + + // Global override for preloading lazy-loaded iframes + // - null: Iframes with data-src AND data-preload will be loaded when within + // the viewDistance, iframes with only data-src will be loaded when visible + // - true: All iframes with data-src will be loaded when within the viewDistance + // - false: All iframes with data-src will be loaded only when visible + preloadIframes: null, + + // Can be used to globally disable auto-animation + autoAnimate: true, + + // Optionally provide a custom element matcher that will be + // used to dictate which elements we can animate between. + autoAnimateMatcher: null, + + // Default settings for our auto-animate transitions, can be + // overridden per-slide or per-element via data arguments + autoAnimateEasing: 'ease', + autoAnimateDuration: 1.0, + autoAnimateUnmatched: true, + + // CSS properties that can be auto-animated. Position & scale + // is matched separately so there's no need to include styles + // like top/right/bottom/left, width/height or margin. + autoAnimateStyles: [ + 'opacity', + 'color', + 'background-color', + 'padding', + 'font-size', + 'line-height', + 'letter-spacing', + 'border-width', + 'border-color', + 'border-radius', + 'outline', + 'outline-offset' + ], + + // Controls automatic progression to the next slide + // - 0: Auto-sliding only happens if the data-autoslide HTML attribute + // is present on the current slide or fragment + // - 1+: All slides will progress automatically at the given interval + // - false: No auto-sliding, even if data-autoslide is present + autoSlide: 0, + + // Stop auto-sliding after user input + autoSlideStoppable: true, + + // Use this method for navigation when auto-sliding (defaults to navigateNext) + autoSlideMethod: null, + + // Specify the average time in seconds that you think you will spend + // presenting each slide. This is used to show a pacing timer in the + // speaker view + defaultTiming: null, + + // Enable slide navigation via mouse wheel + mouseWheel: false, + + // Opens links in an iframe preview overlay + // Add `data-preview-link` and `data-preview-link="false"` to customise each link + // individually + previewLinks: false, + + // Exposes the reveal.js API through window.postMessage + postMessage: true, + + // Dispatches all reveal.js events to the parent window through postMessage + postMessageEvents: false, + + // Focuses body when page changes visibility to ensure keyboard shortcuts work + focusBodyOnPageVisibilityChange: true, + + // Transition style + transition: 'slide', // none/fade/slide/convex/concave/zoom + + // Transition speed + transitionSpeed: 'default', // default/fast/slow + + // Transition style for full page slide backgrounds + backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom + + // Parallax background image + parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg" + + // Parallax background size + parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px" + + // Parallax background repeat + parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit + + // Parallax background position + parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left" + + // Amount of pixels to move the parallax background per slide step + parallaxBackgroundHorizontal: null, + parallaxBackgroundVertical: null, + + // Can be used to initialize reveal.js in one of the following views: + // - print: Render the presentation so that it can be printed to PDF + // - scroll: Show the presentation as a tall scrollable page with scroll + // triggered animations + view: null, + + // Adjusts the height of each slide in the scroll view. + // - full: Each slide is as tall as the viewport + // - compact: Slides are as small as possible, allowing multiple slides + // to be visible in parallel on tall devices + scrollLayout: 'full', + + // Control how scroll snapping works in the scroll view. + // - false: No snapping, scrolling is continuous + // - proximity: Snap when close to a slide + // - mandatory: Always snap to the closest slide + // + // Only applies to presentations in scroll view. + scrollSnap: 'mandatory', + + // Enables and configure the scroll view progress bar. + // - 'auto': Show the scrollbar while scrolling, hide while idle + // - true: Always show the scrollbar + // - false: Never show the scrollbar + scrollProgress: 'auto', + + // Automatically activate the scroll view when we the viewport falls + // below the given width. + scrollActivationWidth: 435, + + // The maximum number of pages a single slide can expand onto when printing + // to PDF, unlimited by default + pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY, + + // Prints each fragment on a separate slide + pdfSeparateFragments: true, + + // Offset used to reduce the height of content within exported PDF pages. + // This exists to account for environment differences based on how you + // print to PDF. CLI printing options, like phantomjs and wkpdf, can end + // on precisely the total height of the document whereas in-browser + // printing has to end one pixel before. + pdfPageHeightOffset: -1, + + // Number of slides away from the current that are visible + viewDistance: 3, + + // Number of slides away from the current that are visible on mobile + // devices. It is advisable to set this to a lower number than + // viewDistance in order to save resources. + mobileViewDistance: 2, + + // The display mode that will be used to show slides + display: 'block', + + // Hide cursor if inactive + hideInactiveCursor: true, + + // Time before the cursor is hidden (in ms) + hideCursorTime: 5000, + + // Should we automatically sort and set indices for fragments + // at each sync? (See Reveal.sync) + sortFragmentsOnSync: true, + + // Script dependencies to load + dependencies: [], + + // Plugin objects to register and use for this presentation + plugins: [] + +} \ No newline at end of file diff --git a/2024-06-18-guix-social/reveal.js/js/controllers/autoanimate.js b/2024-06-18-guix-social/reveal.js/js/controllers/autoanimate.js new file mode 100644 index 0000000..5da88fa --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/js/controllers/autoanimate.js @@ -0,0 +1,643 @@ +import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js' +import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js' + +// Counter used to generate unique IDs for auto-animated elements +let autoAnimateCounter = 0; + +/** + * Automatically animates matching elements across + * slides with the [data-auto-animate] attribute. + */ +export default class AutoAnimate { + + constructor( Reveal ) { + + this.Reveal = Reveal; + + } + + /** + * Runs an auto-animation between the given slides. + * + * @param {HTMLElement} fromSlide + * @param {HTMLElement} toSlide + */ + run( fromSlide, toSlide ) { + + // Clean up after prior animations + this.reset(); + + let allSlides = this.Reveal.getSlides(); + let toSlideIndex = allSlides.indexOf( toSlide ); + let fromSlideIndex = allSlides.indexOf( fromSlide ); + + // Ensure that; + // 1. Both slides exist. + // 2. Both slides are auto-animate targets with the same + // data-auto-animate-id value (including null if absent on both). + // 3. data-auto-animate-restart isn't set on the physically latter + // slide (independent of slide direction). + if( fromSlide && toSlide && fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) + && fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) + && !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) { + + // Create a new auto-animate sheet + this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet(); + + let animationOptions = this.getAutoAnimateOptions( toSlide ); + + // Set our starting state + fromSlide.dataset.autoAnimate = 'pending'; + toSlide.dataset.autoAnimate = 'pending'; + + // Flag the navigation direction, needed for fragment buildup + animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward'; + + // If the from-slide is hidden because it has moved outside + // the view distance, we need to temporarily show it while + // measuring + let fromSlideIsHidden = fromSlide.style.display === 'none'; + if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display; + + // Inject our auto-animate styles for this transition + let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => { + return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ ); + } ); + + if( fromSlideIsHidden ) fromSlide.style.display = 'none'; + + // Animate unmatched elements, if enabled + if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) { + + // Our default timings for unmatched elements + let defaultUnmatchedDuration = animationOptions.duration * 0.8, + defaultUnmatchedDelay = animationOptions.duration * 0.2; + + this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => { + + let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions ); + let id = 'unmatched'; + + // If there is a duration or delay set specifically for this + // element our unmatched elements should adhere to those + if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) { + id = 'unmatched-' + autoAnimateCounter++; + css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` ); + } + + unmatchedElement.dataset.autoAnimateTarget = id; + + }, this ); + + // Our default transition for unmatched elements + css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` ); + + } + + // Setting the whole chunk of CSS at once is the most + // efficient way to do this. Using sheet.insertRule + // is multiple factors slower. + this.autoAnimateStyleSheet.innerHTML = css.join( '' ); + + // Start the animation next cycle + requestAnimationFrame( () => { + if( this.autoAnimateStyleSheet ) { + // This forces our newly injected styles to be applied in Firefox + getComputedStyle( this.autoAnimateStyleSheet ).fontWeight; + + toSlide.dataset.autoAnimate = 'running'; + } + } ); + + this.Reveal.dispatchEvent({ + type: 'autoanimate', + data: { + fromSlide, + toSlide, + sheet: this.autoAnimateStyleSheet + } + }); + + } + + } + + /** + * Rolls back all changes that we've made to the DOM so + * that as part of animating. + */ + reset() { + + // Reset slides + queryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=""])' ).forEach( element => { + element.dataset.autoAnimate = ''; + } ); + + // Reset elements + queryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => { + delete element.dataset.autoAnimateTarget; + } ); + + // Remove the animation sheet + if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) { + this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet ); + this.autoAnimateStyleSheet = null; + } + + } + + /** + * Creates a FLIP animation where the `to` element starts out + * in the `from` element position and animates to its original + * state. + * + * @param {HTMLElement} from + * @param {HTMLElement} to + * @param {Object} elementOptions Options for this element pair + * @param {Object} animationOptions Options set at the slide level + * @param {String} id Unique ID that we can use to identify this + * auto-animate element in the DOM + */ + autoAnimateElements( from, to, elementOptions, animationOptions, id ) { + + // 'from' elements are given a data-auto-animate-target with no value, + // 'to' elements are are given a data-auto-animate-target with an ID + from.dataset.autoAnimateTarget = ''; + to.dataset.autoAnimateTarget = id; + + // Each element may override any of the auto-animate options + // like transition easing, duration and delay via data-attributes + let options = this.getAutoAnimateOptions( to, animationOptions ); + + // If we're using a custom element matcher the element options + // may contain additional transition overrides + if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay; + if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration; + if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing; + + let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ), + toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions ); + + // Maintain fragment visibility for matching elements when + // we're navigating forwards, this way the viewer won't need + // to step through the same fragments twice + if( to.classList.contains( 'fragment' ) ) { + + // Don't auto-animate the opacity of fragments to avoid + // conflicts with fragment animations + delete toProps.styles['opacity']; + + if( from.classList.contains( 'fragment' ) ) { + + let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0]; + let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0]; + + // Only skip the fragment if the fragment animation style + // remains unchanged + if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) { + to.classList.add( 'visible', 'disabled' ); + } + + } + + } + + // If translation and/or scaling are enabled, css transform + // the 'to' element so that it matches the position and size + // of the 'from' element + if( elementOptions.translate !== false || elementOptions.scale !== false ) { + + let presentationScale = this.Reveal.getScale(); + + let delta = { + x: ( fromProps.x - toProps.x ) / presentationScale, + y: ( fromProps.y - toProps.y ) / presentationScale, + scaleX: fromProps.width / toProps.width, + scaleY: fromProps.height / toProps.height + }; + + // Limit decimal points to avoid 0.0001px blur and stutter + delta.x = Math.round( delta.x * 1000 ) / 1000; + delta.y = Math.round( delta.y * 1000 ) / 1000; + delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000; + delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000; + + let translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ), + scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 ); + + // No need to transform if nothing's changed + if( translate || scale ) { + + let transform = []; + + if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` ); + if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` ); + + fromProps.styles['transform'] = transform.join( ' ' ); + fromProps.styles['transform-origin'] = 'top left'; + + toProps.styles['transform'] = 'none'; + + } + + } + + // Delete all unchanged 'to' styles + for( let propertyName in toProps.styles ) { + const toValue = toProps.styles[propertyName]; + const fromValue = fromProps.styles[propertyName]; + + if( toValue === fromValue ) { + delete toProps.styles[propertyName]; + } + else { + // If these property values were set via a custom matcher providing + // an explicit 'from' and/or 'to' value, we always inject those values. + if( toValue.explicitValue === true ) { + toProps.styles[propertyName] = toValue.value; + } + + if( fromValue.explicitValue === true ) { + fromProps.styles[propertyName] = fromValue.value; + } + } + } + + let css = ''; + + let toStyleProperties = Object.keys( toProps.styles ); + + // Only create animate this element IF at least one style + // property has changed + if( toStyleProperties.length > 0 ) { + + // Instantly move to the 'from' state + fromProps.styles['transition'] = 'none'; + + // Animate towards the 'to' state + toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`; + toProps.styles['transition-property'] = toStyleProperties.join( ', ' ); + toProps.styles['will-change'] = toStyleProperties.join( ', ' ); + + // Build up our custom CSS. We need to override inline styles + // so we need to make our styles vErY IMPORTANT!1!! + let fromCSS = Object.keys( fromProps.styles ).map( propertyName => { + return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;'; + } ).join( '' ); + + let toCSS = Object.keys( toProps.styles ).map( propertyName => { + return propertyName + ': ' + toProps.styles[propertyName] + ' !important;'; + } ).join( '' ); + + css = '[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' + + '[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}'; + + } + + return css; + + } + + /** + * Returns the auto-animate options for the given element. + * + * @param {HTMLElement} element Element to pick up options + * from, either a slide or an animation target + * @param {Object} [inheritedOptions] Optional set of existing + * options + */ + getAutoAnimateOptions( element, inheritedOptions ) { + + let options = { + easing: this.Reveal.getConfig().autoAnimateEasing, + duration: this.Reveal.getConfig().autoAnimateDuration, + delay: 0 + }; + + options = extend( options, inheritedOptions ); + + // Inherit options from parent elements + if( element.parentNode ) { + let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' ); + if( autoAnimatedParent ) { + options = this.getAutoAnimateOptions( autoAnimatedParent, options ); + } + } + + if( element.dataset.autoAnimateEasing ) { + options.easing = element.dataset.autoAnimateEasing; + } + + if( element.dataset.autoAnimateDuration ) { + options.duration = parseFloat( element.dataset.autoAnimateDuration ); + } + + if( element.dataset.autoAnimateDelay ) { + options.delay = parseFloat( element.dataset.autoAnimateDelay ); + } + + return options; + + } + + /** + * Returns an object containing all of the properties + * that can be auto-animated for the given element and + * their current computed values. + * + * @param {String} direction 'from' or 'to' + */ + getAutoAnimatableProperties( direction, element, elementOptions ) { + + let config = this.Reveal.getConfig(); + + let properties = { styles: [] }; + + // Position and size + if( elementOptions.translate !== false || elementOptions.scale !== false ) { + let bounds; + + // Custom auto-animate may optionally return a custom tailored + // measurement function + if( typeof elementOptions.measure === 'function' ) { + bounds = elementOptions.measure( element ); + } + else { + if( config.center ) { + // More precise, but breaks when used in combination + // with zoom for scaling the deck ¯\_(ツ)_/¯ + bounds = element.getBoundingClientRect(); + } + else { + let scale = this.Reveal.getScale(); + bounds = { + x: element.offsetLeft * scale, + y: element.offsetTop * scale, + width: element.offsetWidth * scale, + height: element.offsetHeight * scale + }; + } + } + + properties.x = bounds.x; + properties.y = bounds.y; + properties.width = bounds.width; + properties.height = bounds.height; + } + + const computedStyles = getComputedStyle( element ); + + // CSS styles + ( elementOptions.styles || config.autoAnimateStyles ).forEach( style => { + let value; + + // `style` is either the property name directly, or an object + // definition of a style property + if( typeof style === 'string' ) style = { property: style }; + + if( typeof style.from !== 'undefined' && direction === 'from' ) { + value = { value: style.from, explicitValue: true }; + } + else if( typeof style.to !== 'undefined' && direction === 'to' ) { + value = { value: style.to, explicitValue: true }; + } + else { + // Use a unitless value for line-height so that it inherits properly + if( style.property === 'line-height' ) { + value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] ); + } + + if( isNaN(value) ) { + value = computedStyles[style.property]; + } + } + + if( value !== '' ) { + properties.styles[style.property] = value; + } + } ); + + return properties; + + } + + /** + * Get a list of all element pairs that we can animate + * between the given slides. + * + * @param {HTMLElement} fromSlide + * @param {HTMLElement} toSlide + * + * @return {Array} Each value is an array where [0] is + * the element we're animating from and [1] is the + * element we're animating to + */ + getAutoAnimatableElements( fromSlide, toSlide ) { + + let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs; + + let pairs = matcher.call( this, fromSlide, toSlide ); + + let reserved = []; + + // Remove duplicate pairs + return pairs.filter( ( pair, index ) => { + if( reserved.indexOf( pair.to ) === -1 ) { + reserved.push( pair.to ); + return true; + } + } ); + + } + + /** + * Identifies matching elements between slides. + * + * You can specify a custom matcher function by using + * the `autoAnimateMatcher` config option. + */ + getAutoAnimatePairs( fromSlide, toSlide ) { + + let pairs = []; + + const codeNodes = 'pre'; + const textNodes = 'h1, h2, h3, h4, h5, h6, p, li'; + const mediaNodes = 'img, video, iframe'; + + // Explicit matches via data-id + this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => { + return node.nodeName + ':::' + node.getAttribute( 'data-id' ); + } ); + + // Text + this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => { + return node.nodeName + ':::' + node.innerText; + } ); + + // Media + this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => { + return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) ); + } ); + + // Code + this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => { + return node.nodeName + ':::' + node.innerText; + } ); + + pairs.forEach( pair => { + // Disable scale transformations on text nodes, we transition + // each individual text property instead + if( matches( pair.from, textNodes ) ) { + pair.options = { scale: false }; + } + // Animate individual lines of code + else if( matches( pair.from, codeNodes ) ) { + + // Transition the code block's width and height instead of scaling + // to prevent its content from being squished + pair.options = { scale: false, styles: [ 'width', 'height' ] }; + + // Lines of code + this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => { + return node.textContent; + }, { + scale: false, + styles: [], + measure: this.getLocalBoundingBox.bind( this ) + } ); + + // Line numbers + this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => { + return node.getAttribute( 'data-line-number' ); + }, { + scale: false, + styles: [ 'width' ], + measure: this.getLocalBoundingBox.bind( this ) + } ); + + } + + }, this ); + + return pairs; + + } + + /** + * Helper method which returns a bounding box based on + * the given elements offset coordinates. + * + * @param {HTMLElement} element + * @return {Object} x, y, width, height + */ + getLocalBoundingBox( element ) { + + const presentationScale = this.Reveal.getScale(); + + return { + x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100, + y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100, + width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100, + height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100 + }; + + } + + /** + * Finds matching elements between two slides. + * + * @param {Array} pairs List of pairs to push matches to + * @param {HTMLElement} fromScope Scope within the from element exists + * @param {HTMLElement} toScope Scope within the to element exists + * @param {String} selector CSS selector of the element to match + * @param {Function} serializer A function that accepts an element and returns + * a stringified ID based on its contents + * @param {Object} animationOptions Optional config options for this pair + */ + findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) { + + let fromMatches = {}; + let toMatches = {}; + + [].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => { + const key = serializer( element ); + if( typeof key === 'string' && key.length ) { + fromMatches[key] = fromMatches[key] || []; + fromMatches[key].push( element ); + } + } ); + + [].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => { + const key = serializer( element ); + toMatches[key] = toMatches[key] || []; + toMatches[key].push( element ); + + let fromElement; + + // Retrieve the 'from' element + if( fromMatches[key] ) { + const primaryIndex = toMatches[key].length - 1; + const secondaryIndex = fromMatches[key].length - 1; + + // If there are multiple identical from elements, retrieve + // the one at the same index as our to-element. + if( fromMatches[key][ primaryIndex ] ) { + fromElement = fromMatches[key][ primaryIndex ]; + fromMatches[key][ primaryIndex ] = null; + } + // If there are no matching from-elements at the same index, + // use the last one. + else if( fromMatches[key][ secondaryIndex ] ) { + fromElement = fromMatches[key][ secondaryIndex ]; + fromMatches[key][ secondaryIndex ] = null; + } + } + + // If we've got a matching pair, push it to the list of pairs + if( fromElement ) { + pairs.push({ + from: fromElement, + to: element, + options: animationOptions + }); + } + } ); + + } + + /** + * Returns a all elements within the given scope that should + * be considered unmatched in an auto-animate transition. If + * fading of unmatched elements is turned on, these elements + * will fade when going between auto-animate slides. + * + * Note that parents of auto-animate targets are NOT considered + * unmatched since fading them would break the auto-animation. + * + * @param {HTMLElement} rootElement + * @return {Array} + */ + getUnmatchedAutoAnimateElements( rootElement ) { + + return [].slice.call( rootElement.children ).reduce( ( result, element ) => { + + const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' ); + + // The element is unmatched if + // - It is not an auto-animate target + // - It does not contain any auto-animate targets + if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) { + result.push( element ); + } + + if( element.querySelector( '[data-auto-animate-target]' ) ) { + result = result.concat( this.getUnmatchedAutoAnimateElements( element ) ); + } + + return result; + + }, [] ); + + } + +} diff --git a/2024-06-18-guix-social/reveal.js/js/controllers/backgrounds.js b/2024-06-18-guix-social/reveal.js/js/controllers/backgrounds.js new file mode 100644 index 0000000..e7ca644 --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/js/controllers/backgrounds.js @@ -0,0 +1,468 @@ +import { queryAll } from '../utils/util.js' +import { colorToRgb, colorBrightness } from '../utils/color.js' + +/** + * Creates and updates slide backgrounds. + */ +export default class Backgrounds { + + constructor( Reveal ) { + + this.Reveal = Reveal; + + } + + render() { + + this.element = document.createElement( 'div' ); + this.element.className = 'backgrounds'; + this.Reveal.getRevealElement().appendChild( this.element ); + + } + + /** + * Creates the slide background elements and appends them + * to the background container. One element is created per + * slide no matter if the given slide has visible background. + */ + create() { + + // Clear prior backgrounds + this.element.innerHTML = ''; + this.element.classList.add( 'no-transition' ); + + // Iterate over all horizontal slides + this.Reveal.getHorizontalSlides().forEach( slideh => { + + let backgroundStack = this.createBackground( slideh, this.element ); + + // Iterate over all vertical slides + queryAll( slideh, 'section' ).forEach( slidev => { + + this.createBackground( slidev, backgroundStack ); + + backgroundStack.classList.add( 'stack' ); + + } ); + + } ); + + // Add parallax background if specified + if( this.Reveal.getConfig().parallaxBackgroundImage ) { + + this.element.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")'; + this.element.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize; + this.element.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat; + this.element.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition; + + // Make sure the below properties are set on the element - these properties are + // needed for proper transitions to be set on the element via CSS. To remove + // annoying background slide-in effect when the presentation starts, apply + // these properties after short time delay + setTimeout( () => { + this.Reveal.getRevealElement().classList.add( 'has-parallax-background' ); + }, 1 ); + + } + else { + + this.element.style.backgroundImage = ''; + this.Reveal.getRevealElement().classList.remove( 'has-parallax-background' ); + + } + + } + + /** + * Creates a background for the given slide. + * + * @param {HTMLElement} slide + * @param {HTMLElement} container The element that the background + * should be appended to + * @return {HTMLElement} New background div + */ + createBackground( slide, container ) { + + // Main slide background element + let element = document.createElement( 'div' ); + element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' ); + + // Inner background element that wraps images/videos/iframes + let contentElement = document.createElement( 'div' ); + contentElement.className = 'slide-background-content'; + + element.appendChild( contentElement ); + container.appendChild( element ); + + slide.slideBackgroundElement = element; + slide.slideBackgroundContentElement = contentElement; + + // Syncs the background to reflect all current background settings + this.sync( slide ); + + return element; + + } + + /** + * Renders all of the visual properties of a slide background + * based on the various background attributes. + * + * @param {HTMLElement} slide + */ + sync( slide ) { + + const element = slide.slideBackgroundElement, + contentElement = slide.slideBackgroundContentElement; + + const data = { + background: slide.getAttribute( 'data-background' ), + backgroundSize: slide.getAttribute( 'data-background-size' ), + backgroundImage: slide.getAttribute( 'data-background-image' ), + backgroundVideo: slide.getAttribute( 'data-background-video' ), + backgroundIframe: slide.getAttribute( 'data-background-iframe' ), + backgroundColor: slide.getAttribute( 'data-background-color' ), + backgroundGradient: slide.getAttribute( 'data-background-gradient' ), + backgroundRepeat: slide.getAttribute( 'data-background-repeat' ), + backgroundPosition: slide.getAttribute( 'data-background-position' ), + backgroundTransition: slide.getAttribute( 'data-background-transition' ), + backgroundOpacity: slide.getAttribute( 'data-background-opacity' ), + }; + + const dataPreload = slide.hasAttribute( 'data-preload' ); + + // Reset the prior background state in case this is not the + // initial sync + slide.classList.remove( 'has-dark-background' ); + slide.classList.remove( 'has-light-background' ); + + element.removeAttribute( 'data-loaded' ); + element.removeAttribute( 'data-background-hash' ); + element.removeAttribute( 'data-background-size' ); + element.removeAttribute( 'data-background-transition' ); + element.style.backgroundColor = ''; + + contentElement.style.backgroundSize = ''; + contentElement.style.backgroundRepeat = ''; + contentElement.style.backgroundPosition = ''; + contentElement.style.backgroundImage = ''; + contentElement.style.opacity = ''; + contentElement.innerHTML = ''; + + if( data.background ) { + // Auto-wrap image urls in url(...) + if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test( data.background ) ) { + slide.setAttribute( 'data-background-image', data.background ); + } + else { + element.style.background = data.background; + } + } + + // Create a hash for this combination of background settings. + // This is used to determine when two slide backgrounds are + // the same. + if( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) { + element.setAttribute( 'data-background-hash', data.background + + data.backgroundSize + + data.backgroundImage + + data.backgroundVideo + + data.backgroundIframe + + data.backgroundColor + + data.backgroundGradient + + data.backgroundRepeat + + data.backgroundPosition + + data.backgroundTransition + + data.backgroundOpacity ); + } + + // Additional and optional background properties + if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize ); + if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor; + if( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient; + if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition ); + + if( dataPreload ) element.setAttribute( 'data-preload', '' ); + + // Background image options are set on the content wrapper + if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize; + if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat; + if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition; + if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity; + + const contrastClass = this.getContrastClass( slide ); + + if( typeof contrastClass === 'string' ) { + slide.classList.add( contrastClass ); + } + + } + + /** + * Returns a class name that can be applied to a slide to indicate + * if it has a light or dark background. + * + * @param {*} slide + * + * @returns {string|null} + */ + getContrastClass( slide ) { + + const element = slide.slideBackgroundElement; + + // If this slide has a background color, we add a class that + // signals if it is light or dark. If the slide has no background + // color, no class will be added + let contrastColor = slide.getAttribute( 'data-background-color' ); + + // If no bg color was found, or it cannot be converted by colorToRgb, check the computed background + if( !contrastColor || !colorToRgb( contrastColor ) ) { + let computedBackgroundStyle = window.getComputedStyle( element ); + if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) { + contrastColor = computedBackgroundStyle.backgroundColor; + } + } + + if( contrastColor ) { + const rgb = colorToRgb( contrastColor ); + + // Ignore fully transparent backgrounds. Some browsers return + // rgba(0,0,0,0) when reading the computed background color of + // an element with no background + if( rgb && rgb.a !== 0 ) { + if( colorBrightness( contrastColor ) < 128 ) { + return 'has-dark-background'; + } + else { + return 'has-light-background'; + } + } + } + + return null; + + } + + /** + * Bubble the 'has-light-background'/'has-dark-background' classes. + */ + bubbleSlideContrastClassToElement( slide, target ) { + + [ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => { + if( slide.classList.contains( classToBubble ) ) { + target.classList.add( classToBubble ); + } + else { + target.classList.remove( classToBubble ); + } + }, this ); + + } + + /** + * Updates the background elements to reflect the current + * slide. + * + * @param {boolean} includeAll If true, the backgrounds of + * all vertical slides (not just the present) will be updated. + */ + update( includeAll = false ) { + + let config = this.Reveal.getConfig(); + let currentSlide = this.Reveal.getCurrentSlide(); + let indices = this.Reveal.getIndices(); + + let currentBackground = null; + + // Reverse past/future classes when in RTL mode + let horizontalPast = config.rtl ? 'future' : 'past', + horizontalFuture = config.rtl ? 'past' : 'future'; + + // Update the classes of all backgrounds to match the + // states of their slides (past/present/future) + Array.from( this.element.childNodes ).forEach( ( backgroundh, h ) => { + + backgroundh.classList.remove( 'past', 'present', 'future' ); + + if( h < indices.h ) { + backgroundh.classList.add( horizontalPast ); + } + else if ( h > indices.h ) { + backgroundh.classList.add( horizontalFuture ); + } + else { + backgroundh.classList.add( 'present' ); + + // Store a reference to the current background element + currentBackground = backgroundh; + } + + if( includeAll || h === indices.h ) { + queryAll( backgroundh, '.slide-background' ).forEach( ( backgroundv, v ) => { + + backgroundv.classList.remove( 'past', 'present', 'future' ); + + const indexv = typeof indices.v === 'number' ? indices.v : 0; + + if( v < indexv ) { + backgroundv.classList.add( 'past' ); + } + else if ( v > indexv ) { + backgroundv.classList.add( 'future' ); + } + else { + backgroundv.classList.add( 'present' ); + + // Only if this is the present horizontal and vertical slide + if( h === indices.h ) currentBackground = backgroundv; + } + + } ); + } + + } ); + + // The previous background may refer to a DOM element that has + // been removed after a presentation is synced & bgs are recreated + if( this.previousBackground && !this.previousBackground.closest( 'body' ) ) { + this.previousBackground = null; + } + + if( currentBackground && this.previousBackground ) { + + // Don't transition between identical backgrounds. This + // prevents unwanted flicker. + let previousBackgroundHash = this.previousBackground.getAttribute( 'data-background-hash' ); + let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' ); + + if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) { + this.element.classList.add( 'no-transition' ); + + // If multiple slides have the same background video, carry + // the