5.1.0

Re-add question mark for help

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2011-2023 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -46,5 +46,5 @@ Hakim's open source work is supported by <a href="https://github.com/sponsors/ha
 
 --- 
 <div align="center">
-  MIT licensed | Copyright © 2011-2023 Hakim El Hattab, https://hakim.se
+  MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
 </div>

css/layout.scss

@@ -25,6 +25,7 @@
 // Stack multiple elements on top of each other
 .reveal .r-stack {
 	display: grid;
+	grid-template-rows: 100%;
 }
 
 .reveal .r-stack > * {

css/reveal.scss

@@ -631,11 +631,16 @@ $controlsArrowAngleActive: 36deg;
 	touch-action: pinch-zoom;
 }
 
-// Swiping on an embedded deck should not block page scrolling
+// Swiping on an embedded deck should not block page scrolling...
 .reveal.embedded {
 	touch-action: pan-y;
 }
 
+// ... unless we're on a vertical slide
+.reveal.embedded.is-vertical-slide {
+	touch-action: none;
+}
+
 .reveal .slides {
 	position: absolute;
 	width: 100%;

demo.html

@@ -165,9 +165,9 @@
 				</section>
 				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
 					<div class="r-stack">
-						<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
-						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
-						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
+						<div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
+						<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
+						<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
 					</div>
 					<h2 style="margin-top: 20px;">Auto-Animate</h2>
 				</section>

examples/scroll.html

@@ -106,13 +106,13 @@
 		<script src="../plugin/markdown/markdown.js"></script>
 		<script src="../plugin/highlight/highlight.js"></script>
 		<script>
-      Reveal.initialize({
-        view: 'scroll',
-        hash: true,
+			Reveal.initialize({
+				view: 'scroll',
+				hash: true,
 
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
 			});
-    </script>
+		</script>
 
 	</body>
 </html>

gulpfile.js

@@ -29,7 +29,7 @@ const banner = `/*!
 * ${pkg.homepage}
 * MIT licensed
 *
-* Copyright (C) 2011-2023 Hakim El Hattab, https://hakim.se
+* Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
 */\n`
 
 // Prevents warnings from opening too many test pages

js/controllers/autoanimate.js

@@ -31,10 +31,13 @@ export default class AutoAnimate {
 		let toSlideIndex = allSlides.indexOf( toSlide );
 		let fromSlideIndex = allSlides.indexOf( fromSlide );
 
-		// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
-		// (including null if absent on both) and that data-auto-animate-restart isn't set on the
-		// physically latter slide (independent of slide direction)
-		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
+		// 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' ) ) {
 

js/controllers/backgrounds.js

@@ -268,14 +268,15 @@ export default class Backgrounds {
 	 */
 	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 = this.Reveal.getConfig().rtl ? 'future' : 'past',
-			horizontalFuture = this.Reveal.getConfig().rtl ? 'past' : 'future';
+		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)
@@ -321,6 +322,42 @@ export default class Backgrounds {
 
 		} );
 
+		// 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 <video> element forward so that it plays continuously
+				// across multiple slides
+				const currentVideo = currentBackground.querySelector( 'video' );
+				const previousVideo = this.previousBackground.querySelector( 'video' );
+
+				if( currentVideo && previousVideo ) {
+
+					const currentVideoParent = currentVideo.parentNode;
+					const previousVideoParent = previousVideo.parentNode;
+
+					// Swap the two videos
+					previousVideoParent.appendChild( currentVideo );
+					currentVideoParent.appendChild( previousVideo );
+
+				}
+			}
+
+		}
+
 		// Stop content inside of previous backgrounds
 		if( this.previousBackground ) {
 
@@ -347,14 +384,6 @@ export default class Backgrounds {
 
 			}
 
-			// Don't transition between identical backgrounds. This
-			// prevents unwanted flicker.
-			let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
-			let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
-			if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
-				this.element.classList.add( 'no-transition' );
-			}
-
 			this.previousBackground = currentBackground;
 
 		}
@@ -368,7 +397,7 @@ export default class Backgrounds {
 		// Allow the first background to apply without transition
 		setTimeout( () => {
 			this.element.classList.remove( 'no-transition' );
-		}, 1 );
+		}, 10 );
 
 	}
 

js/controllers/controls.js

@@ -1,4 +1,4 @@
-import { queryAll } from '../utils/util.js'
+import { queryAll, enterFullscreen } from '../utils/util.js'
 import { isAndroid } from '../utils/device.js'
 
 /**
@@ -12,6 +12,7 @@ import { isAndroid } from '../utils/device.js'
  * - .navigate-left
  * - .navigate-next
  * - .navigate-prev
+ * - .enter-fullscreen
  */
 export default class Controls {
 
@@ -25,6 +26,7 @@ export default class Controls {
 		this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
 		this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
 		this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
+		this.onEnterFullscreen = this.onEnterFullscreen.bind( this );
 
 	}
 
@@ -50,6 +52,7 @@ export default class Controls {
 		this.controlsDown = queryAll( revealElement, '.navigate-down' );
 		this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
 		this.controlsNext = queryAll( revealElement, '.navigate-next' );
+		this.controlsFullscreen = queryAll( revealElement, '.enter-fullscreen' );
 
 		// The left, right and down arrows in the standard reveal.js controls
 		this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
@@ -89,6 +92,7 @@ export default class Controls {
 			this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
 			this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
 			this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
+			this.controlsFullscreen.forEach( el => el.addEventListener( eventName, this.onEnterFullscreen, false ) );
 		} );
 
 	}
@@ -102,6 +106,7 @@ export default class Controls {
 			this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
 			this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
 			this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
+			this.controlsFullscreen.forEach( el => el.removeEventListener( eventName, this.onEnterFullscreen, false ) );
 		} );
 
 	}
@@ -262,5 +267,13 @@ export default class Controls {
 
 	}
 
+	onEnterFullscreen( event ) {
+
+		const config = this.Reveal.getConfig();
+		const viewport = this.Reveal.getViewportElement();
+
+		enterFullscreen( config.embedded ? viewport : viewport.parentElement );
+
+	}
 
 }

js/controllers/fragments.js

@@ -257,6 +257,26 @@ export default class Fragments {
 
 		}
 
+		if( changedFragments.hidden.length ) {
+			this.Reveal.dispatchEvent({
+				type: 'fragmenthidden',
+				data: {
+					fragment: changedFragments.hidden[0],
+					fragments: changedFragments.hidden
+				}
+			});
+		}
+
+		if( changedFragments.shown.length ) {
+			this.Reveal.dispatchEvent({
+				type: 'fragmentshown',
+				data: {
+					fragment: changedFragments.shown[0],
+					fragments: changedFragments.shown
+				}
+			});
+		}
+
 		return changedFragments;
 
 	}
@@ -311,26 +331,6 @@ export default class Fragments {
 
 				let changedFragments = this.update( index, fragments );
 
-				if( changedFragments.hidden.length ) {
-					this.Reveal.dispatchEvent({
-						type: 'fragmenthidden',
-						data: {
-							fragment: changedFragments.hidden[0],
-							fragments: changedFragments.hidden
-						}
-					});
-				}
-
-				if( changedFragments.shown.length ) {
-					this.Reveal.dispatchEvent({
-						type: 'fragmentshown',
-						data: {
-							fragment: changedFragments.shown[0],
-							fragments: changedFragments.shown
-						}
-					});
-				}
-
 				this.Reveal.controls.update();
 				this.Reveal.progress.update();
 

js/controllers/keyboard.js

@@ -167,7 +167,7 @@ export default class Keyboard {
 		let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
 
 		// Whitelist certain modifiers for slide navigation shortcuts
-		let keyCodeUsesModifier = [32, 37, 38, 39, 40, 78, 80, 191].indexOf( event.keyCode ) !== -1;
+		let keyCodeUsesModifier = [32, 37, 38, 39, 40, 63, 78, 80, 191].indexOf( event.keyCode ) !== -1;
 
 		// Prevent all other events when a modifier is pressed
 		let unusedModifier = 	!( keyCodeUsesModifier && event.shiftKey || event.altKey ) &&
@@ -178,7 +178,7 @@ export default class Keyboard {
 		if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;
 
 		// While paused only allow resume keyboard events; 'b', 'v', '.'
-		let resumeKeyCodes = [66,86,190,191];
+		let resumeKeyCodes = [66,86,190,191,112];
 		let key;
 
 		// Custom key bindings for togglePause should be able to resume
@@ -271,7 +271,12 @@ export default class Keyboard {
 					this.Reveal.slide( 0 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev({skipFragments: event.altKey});
+					if( config.rtl ) {
+						this.Reveal.next({skipFragments: event.altKey});
+					}
+					else {
+						this.Reveal.prev({skipFragments: event.altKey});
+					}
 				}
 				else {
 					this.Reveal.left({skipFragments: event.altKey});
@@ -283,7 +288,12 @@ export default class Keyboard {
 					this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next({skipFragments: event.altKey});
+					if( config.rtl ) {
+						this.Reveal.prev({skipFragments: event.altKey});
+					}
+					else {
+						this.Reveal.next({skipFragments: event.altKey});
+					}
 				}
 				else {
 					this.Reveal.right({skipFragments: event.altKey});
@@ -354,7 +364,11 @@ export default class Keyboard {
 				}
 			}
 			// ?
-			else if( keyCode === 191 && event.shiftKey ) {
+			else if( ( keyCode === 63 || keyCode === 191 ) && event.shiftKey ) {
+				this.Reveal.toggleHelp();
+			}
+			// F1
+			else if( keyCode === 112 ) {
 				this.Reveal.toggleHelp();
 			}
 			else {
@@ -383,4 +397,4 @@ export default class Keyboard {
 
 	}
 
-}
+}

js/controllers/scrollview.js

@@ -1,4 +1,4 @@
-import { HORIZONTAL_SLIDES_SELECTOR } from '../utils/constants.js'
+import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants.js'
 import { queryAll } from '../utils/util.js'
 
 const HIDE_SCROLLBAR_TIMEOUT = 500;
@@ -40,6 +40,7 @@ export default class ScrollView {
 		this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;
 
 		const horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR );
+		const horizontalBackgrounds = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_BACKGROUNDS_SELECTOR );
 
 		this.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' );
 
@@ -57,7 +58,7 @@ export default class ScrollView {
 
 		// Creates a new page element and appends the given slide/bg
 		// to it.
-		const createPageElement = ( slide, h, v ) => {
+		const createPageElement = ( slide, h, v, isVertical ) => {
 
 			let contentContainer;
 
@@ -76,8 +77,20 @@ export default class ScrollView {
 				page.className = 'scroll-page';
 				pageElements.push( page );
 
-				// Copy the presentation-wide background to each page
-				if( presentationBackground ) {
+				// This transfers over the background of the vertical stack containing
+				// the slide if it exists. Otherwise, it uses the presentation-wide
+				// background.
+				if( isVertical && horizontalBackgrounds.length > h ) {
+					const slideBackground = horizontalBackgrounds[h];
+					const pageBackground = window.getComputedStyle( slideBackground );
+
+					if( pageBackground && pageBackground.background ) {
+						page.style.background = pageBackground.background;
+					}
+					else if( presentationBackground ) {
+						page.style.background = presentationBackground;
+					}
+				} else if( presentationBackground ) {
 					page.style.background = presentationBackground;
 				}
 
@@ -110,7 +123,7 @@ export default class ScrollView {
 
 			if( this.Reveal.isVerticalStack( horizontalSlide ) ) {
 				horizontalSlide.querySelectorAll( 'section' ).forEach( ( verticalSlide, v ) => {
-					createPageElement( verticalSlide, h, v );
+					createPageElement( verticalSlide, h, v, true );
 				});
 			}
 			else {
@@ -277,7 +290,7 @@ export default class ScrollView {
 		const pageHeight = useCompactLayout ? compactHeight : viewportHeight;
 
 		// The height that needs to be scrolled between scroll triggers
-		const scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;
+		this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;
 
 		this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
 		this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';
@@ -333,12 +346,12 @@ export default class ScrollView {
 			for( let i = 0; i < totalScrollTriggerCount + 1; i++ ) {
 				const triggerStick = document.createElement( 'div' );
 				triggerStick.className = 'scroll-snap-point';
-				triggerStick.style.height = scrollTriggerHeight + 'px';
+				triggerStick.style.height = this.scrollTriggerHeight + 'px';
 				triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';
 				page.pageElement.appendChild( triggerStick );
 
 				if( i === 0 ) {
-					triggerStick.style.marginTop = -scrollTriggerHeight + 'px';
+					triggerStick.style.marginTop = -this.scrollTriggerHeight + 'px';
 				}
 			}
 
@@ -355,7 +368,7 @@ export default class ScrollView {
 			}
 
 			// Add scroll padding based on how many scroll triggers we have
-			page.scrollPadding = scrollTriggerHeight * totalScrollTriggerCount;
+			page.scrollPadding = this.scrollTriggerHeight * totalScrollTriggerCount;
 
 			// The total height including scrollable space
 			page.totalHeight = page.pageHeight + page.scrollPadding;
@@ -699,6 +712,24 @@ export default class ScrollView {
 
 	}
 
+	/**
+	 * Scroll to the previous page.
+	 */
+	prev() {
+
+		this.viewportElement.scrollTop -= this.scrollTriggerHeight;
+
+	}
+
+	/**
+	 * Scroll to the next page.
+	 */
+	next() {
+
+		this.viewportElement.scrollTop += this.scrollTriggerHeight;
+
+	}
+
 	/**
 	 * Scrolls the given slide element into view.
 	 *

js/controllers/slidecontent.js

@@ -375,8 +375,11 @@ export default class SlideContent {
 			isVisible  		= !!closest( event.target, '.present' );
 
 		if( isAttachedToDOM && isVisible ) {
-			event.target.currentTime = 0;
-			event.target.play();
+			// Don't restart if media is already playing
+			if( event.target.paused || event.target.ended ) {
+				event.target.currentTime = 0;
+				event.target.play();
+			}
 		}
 
 		event.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );

js/controllers/touch.js

@@ -84,7 +84,7 @@ export default class Touch {
 	isSwipePrevented( target ) {
 
 		// Prevent accidental swipes when scrubbing timelines
-		if( matches( target, 'video, audio' ) ) return true;
+		if( matches( target, 'video[controls], audio[controls]' ) ) return true;
 
 		while( target && typeof target.hasAttribute === 'function' ) {
 			if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
@@ -103,6 +103,8 @@ export default class Touch {
 	 */
 	onTouchStart( event ) {
 
+		this.touchCaptured = false;
+
 		if( this.isSwipePrevented( event.target ) ) return true;
 
 		this.touchStartX = event.touches[0].clientX;

js/reveal.js

@@ -28,7 +28,7 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '5.0.1';
+export const VERSION = '5.1.0';
 
 /**
  * reveal.js
@@ -51,6 +51,9 @@ export default function( revealElement, options ) {
 	// Configuration defaults, can be overridden at initialization time
 	let config = {},
 
+		// Flags if initialize() has been invoked for this reveal instance
+		initialized = false,
+
 		// Flags if reveal.js is loaded (has dispatched the 'ready' event)
 		ready = false,
 
@@ -127,6 +130,8 @@ export default function( revealElement, options ) {
 
 		if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
 
+		initialized = true;
+
 		// Cache references to key DOM elements
 		dom.wrapper = revealElement;
 		dom.slides = revealElement.querySelector( '.slides' );
@@ -604,6 +609,10 @@ export default function( revealElement, options ) {
 	 */
 	function destroy() {
 
+		// There's nothing to destroy if this instance hasn't been
+		// initialized yet
+		if( initialized === false ) return;
+
 		removeEventListeners();
 		cancelAutoSlide();
 		disablePreviewLinks();
@@ -1446,6 +1455,9 @@ export default function( revealElement, options ) {
 		let currentHorizontalSlide = horizontalSlides[ indexh ],
 			currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
 
+		// Indicate when we're on a vertical slide
+		revealElement.classList.toggle( 'is-vertical-slide', currentVerticalSlides.length > 1 );
+
 		// Store references to the previous and current slides
 		currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;
 
@@ -2499,6 +2511,9 @@ export default function( revealElement, options ) {
 
 		navigationHistory.hasNavigatedHorizontally = true;
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.prev();
+
 		// Reverse for RTL
 		if( config.rtl ) {
 			if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
@@ -2516,6 +2531,9 @@ export default function( revealElement, options ) {
 
 		navigationHistory.hasNavigatedHorizontally = true;
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.next();
+
 		// Reverse for RTL
 		if( config.rtl ) {
 			if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
@@ -2531,6 +2549,9 @@ export default function( revealElement, options ) {
 
 	function navigateUp({skipFragments=false}={}) {
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.prev();
+
 		// Prioritize hiding fragments
 		if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
 			slide( indexh, indexv - 1 );
@@ -2542,6 +2563,9 @@ export default function( revealElement, options ) {
 
 		navigationHistory.hasNavigatedVertically = true;
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.next();
+
 		// Prioritize revealing fragments
 		if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
 			slide( indexh, indexv + 1 );
@@ -2557,6 +2581,9 @@ export default function( revealElement, options ) {
 	 */
 	function navigatePrev({skipFragments=false}={}) {
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.prev();
+
 		// Prioritize revealing fragments
 		if( skipFragments || fragments.prev() === false ) {
 			if( availableRoutes().up ) {
@@ -2580,6 +2607,9 @@ export default function( revealElement, options ) {
 					let h = indexh - 1;
 					slide( h, v );
 				}
+				else if( config.rtl ) {
+					navigateRight({skipFragments});
+				}
 				else {
 					navigateLeft({skipFragments});
 				}
@@ -2596,6 +2626,9 @@ export default function( revealElement, options ) {
 		navigationHistory.hasNavigatedHorizontally = true;
 		navigationHistory.hasNavigatedVertically = true;
 
+		// Scroll view navigation is handled independently
+		if( scrollView.isActive() ) return scrollView.next();
+
 		// Prioritize revealing fragments
 		if( skipFragments || fragments.next() === false ) {
 
@@ -2902,7 +2935,7 @@ export default function( revealElement, options ) {
 		loadSlide: slideContent.load.bind( slideContent ),
 		unloadSlide: slideContent.unload.bind( slideContent ),
 
-		// Media playback
+		// Start/stop all media inside of the current slide
 		startEmbeddedContent: () => slideContent.startEmbeddedContent( currentSlide ),
 		stopEmbeddedContent: () => slideContent.stopEmbeddedContent( currentSlide, { unloadIframes: false } ),
 

js/utils/constants.js

@@ -2,6 +2,7 @@
 export const SLIDES_SELECTOR = '.slides section';
 export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
 export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
+export const HORIZONTAL_BACKGROUNDS_SELECTOR = '.backgrounds>.slide-background';
 
 // Methods that may not be invoked via the postMessage API
 export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "reveal.js",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reveal.js",
-      "version": "5.0.2",
+      "version": "5.0.5",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.23.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",

plugin/math/math.esm.js

@@ -3,4 +3,4 @@ const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(",
  * This plugin is a wrapper for the MathJax2,
  * MathJax3 and KaTeX typesetter plugins.
  */
-var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:l,version:o,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export{a as default};
+var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:l,version:o,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{t.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){t.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export{a as default};

plugin/math/math.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{t.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){t.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})}));

plugin/math/mathjax3.js

@@ -21,7 +21,7 @@ export const MathJax3 = () => {
             ready: () => {
                 MathJax.startup.defaultReady();
                 MathJax.startup.promise.then(() => {
-                    Reveal.layout();
+                    deck.layout();
                 });
             }
         }
@@ -66,7 +66,7 @@ export const MathJax3 = () => {
 
             loadScript( url, function() {
                 // Reprocess equations in slides when they turn visible
-                Reveal.addEventListener( 'slidechanged', function( event ) {
+                deck.addEventListener( 'slidechanged', function( event ) {
                     MathJax.typeset();
                 } );
             } );

plugin/notes/plugin.js

@@ -180,14 +180,16 @@ const Plugin = () => {
 		// (added 12/5/22 as a XSS safeguard)
 		if( isSameOriginEvent( event ) ) {
 
-			let data = JSON.parse( event.data );
-			if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
-				clearInterval( connectInterval );
-				onConnected();
-			}
-			else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
-				callRevealApi( data.methodName, data.arguments, data.callId );
-			}
+			try {
+				let data = JSON.parse( event.data );
+				if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
+					clearInterval( connectInterval );
+					onConnected();
+				}
+				else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
+					callRevealApi( data.methodName, data.arguments, data.callId );
+				}
+		  } catch (e) {}
 
 		}
 

plugin/notes/speaker-view.html

@@ -383,6 +383,13 @@
 
 				window.addEventListener( 'message', function( event ) {
 
+					// Validate the origin of all messages to avoid parsing messages
+					// that aren't meant for us. Ignore when running off file:// so
+					// that the speaker view continues to work without a web server.
+					if( window.location.origin !== event.origin && window.location.origin !== 'file://' ) {
+						return
+					}
+
 					clearTimeout( connectionTimeout );
 					connectionStatus.style.display = 'none';
 

test/test-scroll.html

@@ -97,14 +97,61 @@
 
 					return new Promise( resolve => {
 						let callback = ( event ) => {
-								Reveal.off( 'slidechanged', callback );
-								assert.ok( true, 'slidechanged event fired' );
-								assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' );
-								resolve();
-							}
+							Reveal.off( 'slidechanged', callback );
+							assert.ok( true, 'slidechanged event fired' );
+							assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' );
+							resolve();
+						}
 
-							Reveal.on( 'slidechanged', callback );
-							Reveal.getViewportElement().scrollTop = getViewportHeight() * 2;
+						Reveal.on( 'slidechanged', callback );
+						Reveal.getViewportElement().scrollTop = getViewportHeight() * 2;
+					});
+				});
+
+				QUnit.test( 'Fires fragmentshown event when scrolling', assert => {
+					assert.timeout( 200 );
+					assert.expect( 2 );
+
+					const slides = document.querySelectorAll( '.reveal .slides section' );
+
+					return new Promise( resolve => {
+						let callback = ( event ) => {
+							Reveal.off( 'fragmentshown', callback );
+							assert.ok( true, 'fragmentshown event fired' );
+							assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' );
+							resolve();
+						}
+
+						Reveal.on( 'fragmentshown', callback );
+
+						Reveal.getViewportElement().scrollTop = 0;
+						Reveal.next();
+						Reveal.next();
+						Reveal.getViewportElement().scrollTop += getViewportHeight();
+					});
+				});
+
+				QUnit.test( 'Fires fragmenthidden event when scrolling', assert => {
+					assert.timeout( 200 );
+					assert.expect( 2 );
+
+					const slides = document.querySelectorAll( '.reveal .slides section' );
+
+					return new Promise( resolve => {
+						let callback = ( event ) => {
+							Reveal.off( 'fragmenthidden', callback );
+							assert.ok( true, 'fragmenthidden event fired' );
+							assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' );
+							resolve();
+						}
+
+						Reveal.on( 'fragmenthidden', callback );
+
+						Reveal.getViewportElement().scrollTop = 0;
+						Reveal.next();
+						Reveal.next();
+						Reveal.next();
+						Reveal.getViewportElement().scrollTop -= getViewportHeight();
 					});
 				});