ox-reveal update

scripts/reveal.js/js/controllers/autoanimate.js

@@ -27,8 +27,16 @@ export default class AutoAnimate {
 		// Clean up after prior animations
 		this.reset();
 
-		// Ensure that both slides are auto-animate targets
-		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {
+		let allSlides = this.Reveal.getSlides();
+		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' )
+				&& 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();
@@ -40,8 +48,7 @@ export default class AutoAnimate {
 			toSlide.dataset.autoAnimate = 'pending';
 
 			// Flag the navigation direction, needed for fragment buildup
-			let allSlides = this.Reveal.getSlides();
-			animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';
+			animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
 
 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {

scripts/reveal.js/js/controllers/backgrounds.js

@@ -27,8 +27,6 @@ export default class Backgrounds {
 	 */
 	create() {
 
-		let printMode = this.Reveal.isPrintingPDF();
-
 		// Clear prior backgrounds
 		this.element.innerHTML = '';
 		this.element.classList.add( 'no-transition' );
@@ -114,9 +112,24 @@ export default class Backgrounds {
 	 */
 	sync( slide ) {
 
-		let element = slide.slideBackgroundElement,
+		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' ),
+			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' );
@@ -135,19 +148,6 @@ export default class Backgrounds {
 		contentElement.style.opacity = '';
 		contentElement.innerHTML = '';
 
-		let 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' ),
-			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
-			backgroundPosition: slide.getAttribute( 'data-background-position' ),
-			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
-			backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
-		};
-
 		if( data.background ) {
 			// Auto-wrap image urls in url(...)
 			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
@@ -179,7 +179,7 @@ export default class Backgrounds {
 		if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
 
-		if( slide.hasAttribute( 'data-preload' ) ) element.setAttribute( 'data-preload', '' );
+		if( dataPreload ) element.setAttribute( 'data-preload', '' );
 
 		// Background image options are set on the content wrapper
 		if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
@@ -192,8 +192,8 @@ export default class Backgrounds {
 		// color, no class will be added
 		let contrastColor = data.backgroundColor;
 
-		// If no bg color was found, check the computed background
-		if( !contrastColor ) {
+		// 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;
@@ -201,7 +201,7 @@ export default class Backgrounds {
 		}
 
 		if( contrastColor ) {
-			let rgb = colorToRgb( contrastColor );
+			const rgb = colorToRgb( contrastColor );
 
 			// Ignore fully transparent backgrounds. Some browsers return
 			// rgba(0,0,0,0) when reading the computed background color of
@@ -394,4 +394,10 @@ export default class Backgrounds {
 
 	}
 
-}
+	destroy() {
+
+		this.element.remove();
+
+	}
+
+}

scripts/reveal.js/js/controllers/controls.js

@@ -188,6 +188,13 @@ export default class Controls {
 		}
 	}
 
+	destroy() {
+
+		this.unbind();
+		this.element.remove();
+
+	}
+
 	/**
 	 * Event handlers for navigation control buttons.
 	 */

scripts/reveal.js/js/controllers/focus.js

@@ -79,6 +79,12 @@ export default class Focus {
 
 	}
 
+	destroy() {
+
+		this.Reveal.getRevealElement().classList.remove( 'focused' );
+
+	}
+
 	onRevealPointerDown( event ) {
 
 		this.focus();

scripts/reveal.js/js/controllers/fragments.js

@@ -235,6 +235,7 @@ export default class Fragments {
 						el.classList.remove( 'current-fragment' );
 
 						if( wasVisible ) {
+							this.Reveal.slideContent.stopEmbeddedContent( el );
 							changedFragments.hidden.push( el );
 							this.Reveal.dispatchEvent({
 								target: el,

scripts/reveal.js/js/controllers/keyboard.js

@@ -32,15 +32,15 @@ export default class Keyboard {
 		}
 		else {
 			this.shortcuts['N  ,  SPACE']   = 'Next slide';
-			this.shortcuts['P']             = 'Previous slide';
+			this.shortcuts['P  ,  Shift SPACE']             = 'Previous slide';
 			this.shortcuts['←  ,  H'] = 'Navigate left';
 			this.shortcuts['→  ,  L'] = 'Navigate right';
 			this.shortcuts['↑  ,  K'] = 'Navigate up';
 			this.shortcuts['↓  ,  J'] = 'Navigate down';
 		}
 
-		this.shortcuts['Home  ,  Shift ←']        = 'First slide';
-		this.shortcuts['End  ,  Shift →']         = 'Last slide';
+		this.shortcuts['Alt + ←/&#8593/→/↓']        = 'Navigate without fragments';
+		this.shortcuts['Shift + ←/&#8593/→/↓']      = 'Jump to first/last slide';
 		this.shortcuts['B  ,  .']                       = 'Pause';
 		this.shortcuts['F']                             = 'Fullscreen';
 		this.shortcuts['ESC, O']                        = 'Slide overview';
@@ -182,13 +182,11 @@ export default class Keyboard {
 		let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
 		let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
 
-		// Whitelist specific modified + keycode combinations
-		let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
-		let firstSlideShortcut = event.shiftKey && keyCode === 37;
-		let lastSlideShortcut = event.shiftKey && keyCode === 39;
+		// Whitelist certain modifiers for slide navigation shortcuts
+		let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
 
 		// Prevent all other events when a modifier is pressed
-		let unusedModifier = 	!prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&
+		let unusedModifier = 	!( isNavigationKey && event.shiftKey || event.altKey ) &&
 								( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
 
 		// Disregard the event if there's a focused element or a
@@ -277,52 +275,58 @@ export default class Keyboard {
 
 			// P, PAGE UP
 			if( keyCode === 80 || keyCode === 33 ) {
-				this.Reveal.prev();
+				this.Reveal.prev({skipFragments: event.altKey});
 			}
 			// N, PAGE DOWN
 			else if( keyCode === 78 || keyCode === 34 ) {
-				this.Reveal.next();
+				this.Reveal.next({skipFragments: event.altKey});
 			}
 			// H, LEFT
 			else if( keyCode === 72 || keyCode === 37 ) {
-				if( firstSlideShortcut ) {
+				if( event.shiftKey ) {
 					this.Reveal.slide( 0 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev();
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.left();
+					this.Reveal.left({skipFragments: event.altKey});
 				}
 			}
 			// L, RIGHT
 			else if( keyCode === 76 || keyCode === 39 ) {
-				if( lastSlideShortcut ) {
-					this.Reveal.slide( Number.MAX_VALUE );
+				if( event.shiftKey ) {
+					this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next();
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.right();
+					this.Reveal.right({skipFragments: event.altKey});
 				}
 			}
 			// K, UP
 			else if( keyCode === 75 || keyCode === 38 ) {
-				if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev();
+				if( event.shiftKey ) {
+					this.Reveal.slide( undefined, 0 );
+				}
+				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.up();
+					this.Reveal.up({skipFragments: event.altKey});
 				}
 			}
 			// J, DOWN
 			else if( keyCode === 74 || keyCode === 40 ) {
-				if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next();
+				if( event.shiftKey ) {
+					this.Reveal.slide( undefined, Number.MAX_VALUE );
+				}
+				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.down();
+					this.Reveal.down({skipFragments: event.altKey});
 				}
 			}
 			// HOME
@@ -331,7 +335,7 @@ export default class Keyboard {
 			}
 			// END
 			else if( keyCode === 35 ) {
-				this.Reveal.slide( Number.MAX_VALUE );
+				this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
 			}
 			// SPACE
 			else if( keyCode === 32 ) {
@@ -339,10 +343,10 @@ export default class Keyboard {
 					this.Reveal.overview.deactivate();
 				}
 				if( event.shiftKey ) {
-					this.Reveal.prev();
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.next();
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 			}
 			// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON

scripts/reveal.js/js/controllers/location.js

@@ -3,6 +3,10 @@
  */
 export default class Location {
 
+	// The minimum number of milliseconds that must pass between
+	// calls to history.replaceState
+	MAX_REPLACE_STATE_FREQUENCY = 1000
+
 	constructor( Reveal ) {
 
 		this.Reveal = Reveal;
@@ -10,6 +14,8 @@ export default class Location {
 		// Delays updates to the URL due to a Chrome thumbnailer bug
 		this.writeURLTimeout = 0;
 
+		this.replaceStateTimestamp = 0;
+
 		this.onWindowHashChange = this.onWindowHashChange.bind( this );
 
 	}
@@ -27,19 +33,18 @@ export default class Location {
 	}
 
 	/**
-	 * Reads the current URL (hash) and navigates accordingly.
+	 * Returns the slide indices for the given hash link.
+	 *
+	 * @param {string} [hash] the hash string that we want to
+	 * find the indices for
+	 *
+	 * @returns slide indices or null
 	 */
-	readURL() {
-
-		let config = this.Reveal.getConfig();
-		let indices = this.Reveal.getIndices();
-		let currentSlide = this.Reveal.getCurrentSlide();
-
-		let hash = window.location.hash;
+	getIndicesFromHash( hash=window.location.hash ) {
 
 		// Attempt to parse the hash as either an index or name
-		let bits = hash.slice( 2 ).split( '/' ),
-			name = hash.replace( /#\/?/gi, '' );
+		let name = hash.replace( /^#\/?/, '' );
+		let bits = name.split( '/' );
 
 		// If the first bit is not fully numeric and there is a name we
 		// can assume that this is a named link
@@ -61,23 +66,12 @@ export default class Location {
 			}
 			catch ( error ) { }
 
-			// Ensure that we're not already on a slide with the same name
-			let isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;
-
 			if( element ) {
-				// If the slide exists and is not the current slide...
-				if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) {
-					// ...find the position of the named slide and navigate to it
-					let slideIndices = this.Reveal.getIndices( element );
-					this.Reveal.slide( slideIndices.h, slideIndices.v, f );
-				}
-			}
-			// If the slide doesn't exist, navigate to the current slide
-			else {
-				this.Reveal.slide( indices.h || 0, indices.v || 0 );
+				return { ...this.Reveal.getIndices( element ), f };
 			}
 		}
 		else {
+			const config = this.Reveal.getConfig();
 			let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
 
 			// Read the index components of the hash
@@ -92,10 +86,32 @@ export default class Location {
 				}
 			}
 
-			if( h !== indices.h || v !== indices.v || f !== undefined ) {
-				this.Reveal.slide( h, v, f );
+			return { h, v, f };
+		}
+
+		// The hash couldn't be parsed or no matching named link was found
+		return null
+
+	}
+
+	/**
+	 * Reads the current URL (hash) and navigates accordingly.
+	 */
+	readURL() {
+
+		const currentIndices = this.Reveal.getIndices();
+		const newIndices = this.getIndicesFromHash();
+
+		if( newIndices ) {
+			if( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {
+					this.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );
 			}
 		}
+		// If no new indices are available, we're trying to navigate to
+		// a slide hash that does not exist
+		else {
+			this.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );
+		}
 
 	}
 
@@ -132,10 +148,10 @@ export default class Location {
 			else if( config.hash ) {
 				// If the hash is empty, don't add it to the URL
 				if( hash === '/' ) {
-					window.history.replaceState( null, null, window.location.pathname + window.location.search );
+					this.debouncedReplaceState( window.location.pathname + window.location.search );
 				}
 				else {
-					window.history.replaceState( null, null, '#' + hash );
+					this.debouncedReplaceState( '#' + hash );
 				}
 			}
 			// UPDATE: The below nuking of all hash changes breaks
@@ -153,6 +169,26 @@ export default class Location {
 
 	}
 
+	replaceState( url ) {
+
+		window.history.replaceState( null, null, url );
+		this.replaceStateTimestamp = Date.now();
+
+	}
+
+	debouncedReplaceState( url ) {
+
+		clearTimeout( this.replaceStateTimeout );
+
+		if( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {
+			this.replaceState( url );
+		}
+		else {
+			this.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );
+		}
+
+	}
+
 	/**
 	 * Return a hash URL that will resolve to the given slide location.
 	 *

scripts/reveal.js/js/controllers/notes.js

@@ -111,4 +111,10 @@ export default class Notes {
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
+
 }

scripts/reveal.js/js/controllers/plugins.js

@@ -238,4 +238,17 @@ export default class Plugins {
 
 	}
 
+	destroy() {
+
+		Object.values( this.registeredPlugins ).forEach( plugin => {
+			if( typeof plugin.destroy === 'function' ) {
+				plugin.destroy();
+			}
+		} );
+
+		this.registeredPlugins = {};
+		this.asyncDependencies = [];
+
+	}
+
 }

scripts/reveal.js/js/controllers/pointer.js

@@ -75,6 +75,17 @@ export default class Pointer {
 
 	}
 
+	destroy() {
+
+		this.showCursor();
+
+		document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );
+		document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
+		document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
+		document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
+
+	}
+
 	/**
 	 * Called whenever there is mouse input at the document level
 	 * to determine if the cursor is active or not.

scripts/reveal.js/js/controllers/print.js

@@ -16,20 +16,26 @@ export default class Print {
 	 * Configures the presentation for printing to a static
 	 * PDF.
 	 */
-	setupPDF() {
+	async setupPDF() {
 
-		let config = this.Reveal.getConfig();
+		const config = this.Reveal.getConfig();
+		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
 
-		let slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
+		// Compute slide numbers now, before we start duplicating slides
+		const doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+
+		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
 
 		// Dimensions of the PDF pages
-		let pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
+		const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
 			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
 
 		// Dimensions of slides within the pages
-		let slideWidth = slideSize.width,
+		const slideWidth = slideSize.width,
 			slideHeight = slideSize.height;
 
+		await new Promise( requestAnimationFrame );
+
 		// Let the browser know what page size we want to print
 		createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
 
@@ -40,26 +46,38 @@ export default class Print {
 		document.body.style.width = pageWidth + 'px';
 		document.body.style.height = pageHeight + 'px';
 
+		const viewportElement = document.querySelector( '.reveal-viewport' );
+		let presentationBackground;
+		if( viewportElement ) {
+			const viewportStyles = window.getComputedStyle( viewportElement );
+			if( viewportStyles && viewportStyles.background ) {
+				presentationBackground = viewportStyles.background;
+			}
+		}
+
 		// Make sure stretch elements fit on slide
+		await new Promise( requestAnimationFrame );
 		this.Reveal.layoutSlideContents( slideWidth, slideHeight );
 
-		// Compute slide numbers now, before we start duplicating slides
-		let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
-		queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
-			slide.setAttribute( 'data-slide-number', this.Reveal.slideNumber.getSlideNumber( slide ) );
-		}, this );
+		// Batch scrollHeight access to prevent layout thrashing
+		await new Promise( requestAnimationFrame );
+
+		const slideScrollHeights = slides.map( slide => slide.scrollHeight );
+
+		const pages = [];
+		const pageContainer = slides[0].parentNode;
 
 		// Slide and slide background layout
-		queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
+		slides.forEach( function( slide, index ) {
 
 			// Vertical stacks are not centred since their section
 			// children will be
 			if( slide.classList.contains( 'stack' ) === false ) {
 				// Center the slide inside of the page, giving the slide some margin
-				let left = ( pageWidth - slideWidth ) / 2,
-					top = ( pageHeight - slideHeight ) / 2;
+				let left = ( pageWidth - slideWidth ) / 2;
+				let top = ( pageHeight - slideHeight ) / 2;
 
-				let contentHeight = slide.scrollHeight;
+				const contentHeight = slideScrollHeights[ index ];
 				let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
 
 				// Adhere to configured pages per slide limit
@@ -72,10 +90,18 @@ export default class Print {
 
 				// Wrap the slide in a page element and hide its overflow
 				// so that no page ever flows onto another
-				let page = document.createElement( 'div' );
+				const page = document.createElement( 'div' );
+				pages.push( page );
+
 				page.className = 'pdf-page';
 				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
-				slide.parentNode.insertBefore( page, slide );
+
+				// Copy the presentation-wide background to each individual
+				// page when printing
+				if( presentationBackground ) {
+					page.style.background = presentationBackground;
+				}
+
 				page.appendChild( slide );
 
 				// Position the slide inside of the page
@@ -83,6 +109,10 @@ export default class Print {
 				slide.style.top = top + 'px';
 				slide.style.width = slideWidth + 'px';
 
+				// Re-run the slide layout so that r-fit-text is applied based on
+				// the printed slide size
+				this.Reveal.slideContent.layout( slide )
+
 				if( slide.slideBackgroundElement ) {
 					page.insertBefore( slide.slideBackgroundElement, slide );
 				}
@@ -91,19 +121,19 @@ export default class Print {
 				if( config.showNotes ) {
 
 					// Are there notes for this slide?
-					let notes = this.Reveal.getSlideNotes( slide );
+					const notes = this.Reveal.getSlideNotes( slide );
 					if( notes ) {
 
-						let notesSpacing = 8;
-						let notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
-						let notesElement = document.createElement( 'div' );
+						const notesSpacing = 8;
+						const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
+						const notesElement = document.createElement( 'div' );
 						notesElement.classList.add( 'speaker-notes' );
 						notesElement.classList.add( 'speaker-notes-pdf' );
 						notesElement.setAttribute( 'data-layout', notesLayout );
 						notesElement.innerHTML = notes;
 
 						if( notesLayout === 'separate-page' ) {
-							page.parentNode.insertBefore( notesElement, page.nextSibling );
+							pages.push( notesElement );
 						}
 						else {
 							notesElement.style.left = notesSpacing + 'px';
@@ -118,10 +148,11 @@ export default class Print {
 
 				// Inject slide numbers if `slideNumbers` are enabled
 				if( doingSlideNumbers ) {
-					let numberElement = document.createElement( 'div' );
+					const slideNumber = index + 1;
+					const numberElement = document.createElement( 'div' );
 					numberElement.classList.add( 'slide-number' );
 					numberElement.classList.add( 'slide-number-pdf' );
-					numberElement.innerHTML = slide.getAttribute( 'data-slide-number' );
+					numberElement.innerHTML = slideNumber;
 					page.appendChild( numberElement );
 				}
 
@@ -131,10 +162,9 @@ export default class Print {
 					// Each fragment 'group' is an array containing one or more
 					// fragments. Multiple fragments that appear at the same time
 					// are part of the same group.
-					let fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
+					const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
 
 					let previousFragmentStep;
-					let previousPage;
 
 					fragmentGroups.forEach( function( fragments ) {
 
@@ -151,11 +181,10 @@ export default class Print {
 						}, this );
 
 						// Create a separate page for the current fragment state
-						let clonedPage = page.cloneNode( true );
-						page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );
+						const clonedPage = page.cloneNode( true );
+						pages.push( clonedPage );
 
 						previousFragmentStep = fragments;
-						previousPage = clonedPage;
 
 					}, this );
 
@@ -178,6 +207,10 @@ export default class Print {
 
 		}, this );
 
+		await new Promise( requestAnimationFrame );
+
+		pages.forEach( page => pageContainer.appendChild( page ) );
+
 		// Notify subscribers that the PDF layout is good to go
 		this.Reveal.dispatchEvent({ type: 'pdf-ready' });
 
@@ -192,4 +225,4 @@ export default class Print {
 
 	}
 
-}
+}

scripts/reveal.js/js/controllers/progress.js

@@ -88,16 +88,23 @@ export default class Progress {
 
 		event.preventDefault();
 
-		let slidesTotal = this.Reveal.getHorizontalSlides().length;
+		let slides = this.Reveal.getSlides();
+		let slidesTotal = slides.length;
 		let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
 
 		if( this.Reveal.getConfig().rtl ) {
 			slideIndex = slidesTotal - slideIndex;
 		}
 
-		this.Reveal.slide( slideIndex );
+		let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
+		this.Reveal.slide( targetIndices.h, targetIndices.v );
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
 
 }

scripts/reveal.js/js/controllers/slidecontent.js

@@ -1,5 +1,4 @@
-import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
-import { extend, queryAll, closest } from '../utils/util.js'
+import { extend, queryAll, closest, getMimeTypeFromFile } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
 import fitty from 'fitty';
@@ -102,7 +101,16 @@ export default class SlideContent {
 
 				// Images
 				if( backgroundImage ) {
-					backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
+					// base64
+					if(  /^data:/.test( backgroundImage.trim() ) ) {
+						backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
+					}
+					// URL(s)
+					else {
+						backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
+							return `url(${encodeURI(background.trim())})`;
+						}).join( ',' );
+					}
 				}
 				// Videos
 				else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
@@ -128,7 +136,13 @@ export default class SlideContent {
 
 					// Support comma separated lists of video sources
 					backgroundVideo.split( ',' ).forEach( source => {
-						video.innerHTML += '<source src="'+ source +'">';
+						let type = getMimeTypeFromFile( source );
+						if( type ) {
+							video.innerHTML += `<source src="${source}" type="${type}">`;
+						}
+						else {
+							video.innerHTML += `<source src="${source}">`;
+						}
 					} );
 
 					backgroundContent.appendChild( video );
@@ -167,11 +181,20 @@ export default class SlideContent {
 
 		}
 
+		this.layout( slide );
+
+	}
+
+	/**
+	 * Applies JS-dependent layout helpers for the given slide,
+	 * if there are any.
+	 */
+	layout( slide ) {
+
 		// Autosize text with the r-fit-text class based on the
 		// size of its container. This needs to happen after the
 		// slide is visible in order to measure the text.
-		Array.from( slide.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => {
-			element.dataset.fitted = '';
+		Array.from( slide.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
 			fitty( element, {
 				minSize: 24,
 				maxSize: this.Reveal.getConfig().height * 0.8,
@@ -453,4 +476,4 @@ export default class SlideContent {
 
 	}
 
-}
+}

scripts/reveal.js/js/controllers/slidenumber.js

@@ -123,4 +123,10 @@ export default class SlideNumber {
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
+
 }

scripts/reveal.js/js/controllers/touch.js

@@ -1,4 +1,5 @@
 import { isAndroid } from '../utils/device.js'
+import { matches } from '../utils/util.js'
 
 const SWIPE_THRESHOLD = 40;
 
@@ -82,6 +83,9 @@ export default class Touch {
 	 */
 	isSwipePrevented( target ) {
 
+		// Prevent accidental swipes when scrubbing timelines
+		if( matches( target, 'video, audio' ) ) return true;
+
 		while( target && typeof target.hasAttribute === 'function' ) {
 			if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
 			target = target.parentNode;