separate reader mode into individual controller, add scroll triggers for fragments

css/reveal.scss

@@ -1867,12 +1867,8 @@ $notesWidthPercent: 25%;
 /*********************************************
  * READER MODE
  *********************************************/
-html.reveal-reader {
-	width: 100%;
-	height: 100%;
-	overflow: visible;
-
-	.reveal-viewport, body {
+.reveal-viewport.reveal-reader {
+	& {
 		margin: 0 auto !important;
 		overflow: auto;
 	}
@@ -1892,7 +1888,6 @@ html.reveal-reader {
 	}
 	.reveal .slides {
 		position: static;
-		zoom: 1 !important;
 		pointer-events: initial;
 		transform-origin: 50% 0;
 

index.html

@@ -17,7 +17,15 @@
 		<div class="reveal">
 			<div class="slides">
 				<section>Slide 1</section>
-				<section>Slide 2</section>
+				<section data-background="indigo">
+					<h2>Slide 2</h2>
+					<ul>
+						<li class="fragment">Fragment one</li>
+						<li class="fragment">Fragment two</li>
+						<li class="fragment">Fragment three</li>
+					</ul>
+				</section>
+				<section>Slide 3</section>
 			</div>
 		</div>
 

js/controllers/notes.js

@@ -38,10 +38,12 @@ export default class Notes {
 	 */
 	update() {
 
-		if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.reader.isActive() ) {
-
+		if( this.Reveal.getConfig().showNotes &&
+			this.element && this.Reveal.getCurrentSlide() &&
+			!this.Reveal.isReaderMode() &&
+			!this.Reveal.isPrintMode()
+		) {
 			this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
-
 		}
 
 	}
@@ -54,7 +56,11 @@ export default class Notes {
 	 */
 	updateVisibility() {
 
-		if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.reader.isActive() ) {
+		if( this.Reveal.getConfig().showNotes &&
+			this.hasNotes() &&
+			!this.Reveal.isReaderMode() &&
+			!this.Reveal.isPrintMode()
+		) {
 			this.Reveal.getRevealElement().classList.add( 'show-notes' );
 		}
 		else {

js/controllers/print.js

@@ -0,0 +1,242 @@
+import { SLIDES_SELECTOR } from '../utils/constants.js'
+import { queryAll, createStyleSheet } from '../utils/util.js'
+
+/**
+ * Setups up our presentation for printing/exporting to PDF.
+ */
+export default class Print {
+
+	constructor( Reveal ) {
+
+		this.Reveal = Reveal;
+
+	}
+
+	/**
+	 * Configures the presentation for printing to a static
+	 * PDF.
+	 */
+	async activate() {
+
+		const config = this.Reveal.getConfig();
+		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
+
+		// Compute slide numbers now, before we start duplicating slides
+		const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+
+		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
+
+		// Dimensions of the PDF pages
+		const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
+			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
+
+		// Dimensions of slides within the pages
+		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;}' );
+
+		// Limit the size of certain elements to the dimensions of the slide
+		createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
+
+		document.documentElement.classList.add( 'reveal-print', 'print-pdf' );
+		document.body.style.width = pageWidth + 'px';
+		document.body.style.height = pageHeight + 'px';
+
+		const viewportElement = this.Reveal.getViewportElement();
+		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 );
+
+		// 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;
+		let slideNumber = 1;
+
+		// Slide and slide background layout
+		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;
+				let top = ( pageHeight - slideHeight ) / 2;
+
+				const contentHeight = slideScrollHeights[ index ];
+				let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
+
+				// Adhere to configured pages per slide limit
+				numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
+
+				// Center slides vertically
+				if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
+					top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
+				}
+
+				// Wrap the slide in a page element and hide its overflow
+				// so that no page ever flows onto another
+				const page = document.createElement( 'div' );
+				pages.push( page );
+
+				page.className = 'pdf-page';
+				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
+
+				// 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
+				slide.style.left = left + 'px';
+				slide.style.top = top + 'px';
+				slide.style.width = slideWidth + 'px';
+
+				this.Reveal.slideContent.layout( slide );
+
+				if( slide.slideBackgroundElement ) {
+					page.insertBefore( slide.slideBackgroundElement, slide );
+				}
+
+				// Inject notes if `showNotes` is enabled
+				if( config.showNotes ) {
+
+					// Are there notes for this slide?
+					const notes = this.Reveal.getSlideNotes( slide );
+					if( notes ) {
+
+						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' ) {
+							pages.push( notesElement );
+						}
+						else {
+							notesElement.style.left = notesSpacing + 'px';
+							notesElement.style.bottom = notesSpacing + 'px';
+							notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
+							page.appendChild( notesElement );
+						}
+
+					}
+
+				}
+
+				// Inject page numbers if `slideNumbers` are enabled
+				if( injectPageNumbers ) {
+					const numberElement = document.createElement( 'div' );
+					numberElement.classList.add( 'slide-number' );
+					numberElement.classList.add( 'slide-number-pdf' );
+					numberElement.innerHTML = slideNumber++;
+					page.appendChild( numberElement );
+				}
+
+				// Copy page and show fragments one after another
+				if( config.pdfSeparateFragments ) {
+
+					// 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.
+					const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
+
+					let previousFragmentStep;
+
+					fragmentGroups.forEach( function( fragments, index ) {
+
+						// Remove 'current-fragment' from the previous group
+						if( previousFragmentStep ) {
+							previousFragmentStep.forEach( function( fragment ) {
+								fragment.classList.remove( 'current-fragment' );
+							} );
+						}
+
+						// Show the fragments for the current index
+						fragments.forEach( function( fragment ) {
+							fragment.classList.add( 'visible', 'current-fragment' );
+						}, this );
+
+						// Create a separate page for the current fragment state
+						const clonedPage = page.cloneNode( true );
+
+						// Inject unique page numbers for fragments
+						if( injectPageNumbers ) {
+							const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
+							const fragmentNumber = index + 1;
+							numberElement.innerHTML += '.' + fragmentNumber;
+						}
+
+						pages.push( clonedPage );
+
+						previousFragmentStep = fragments;
+
+					}, this );
+
+					// Reset the first/original page so that all fragments are hidden
+					fragmentGroups.forEach( function( fragments ) {
+						fragments.forEach( function( fragment ) {
+							fragment.classList.remove( 'visible', 'current-fragment' );
+						} );
+					} );
+
+				}
+				// Show all fragments
+				else {
+					queryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {
+						fragment.classList.add( 'visible' );
+					} );
+				}
+
+			}
+
+		}, this );
+
+		await new Promise( requestAnimationFrame );
+
+		pages.forEach( page => pageContainer.appendChild( page ) );
+
+		// Re-run JS-based content layout after the slide is added to page DOM
+		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
+
+		// Notify subscribers that the PDF layout is good to go
+		this.Reveal.dispatchEvent({ type: 'pdf-ready' });
+
+	}
+
+	/**
+	 * Checks if the print mode is/should be activated.
+	 */
+	isActive() {
+
+		if( typeof this._isPrintMode === 'undefined' ) {
+			this._isPrintMode = this.Reveal.getConfig().mode === 'pdf' ||
+								( /print-pdf/gi ).test( window.location.search );
+		}
+
+		return this._isPrintMode;
+
+	}
+
+}

js/controllers/reader.js

@@ -2,7 +2,8 @@ import { SLIDES_SELECTOR } from '../utils/constants.js'
 import { queryAll, createStyleSheet } from '../utils/util.js'
 
 /**
- * Setups up our presentation for printing/exporting to PDF.
+ * The reader mode lets you read a reveal.js presentation
+ * as a linear scrollable page.
  */
 export default class Reader {
 
@@ -12,47 +13,23 @@ export default class Reader {
 
 	}
 
-	/**
-	 * Configures the presentation for printing to a static.
-	 */
-	async setup() {
-
-		const printing = this.isPrintMode();
+	async activate() {
 
-		const config = this.Reveal.getConfig();
-		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
+		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR );
 
-		// Compute slide numbers now, before we start duplicating slides
-		const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+		const viewportElement = this.Reveal.getViewportElement();
 
 		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
 
-		// Dimensions of the PDF pages
-		const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
-			  pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
-
 		// Dimensions of slides within the pages
 		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;}' );
-
-		// Limit the size of certain elements to the dimensions of the slide
-		createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
+		viewportElement.classList.add( 'reveal-reader' );
+		viewportElement.addEventListener( 'scroll', this.onScroll.bind( this ) );
 
-		if( printing ) {
-			document.documentElement.classList.add( 'reveal-print', 'print-pdf' );
-			document.body.style.width = pageWidth + 'px';
-			document.body.style.height = pageHeight + 'px';
-		}
-		else {
-			document.documentElement.classList.add( 'reveal-reader' );
-		}
-
-		const viewportElement = document.querySelector( '.reveal-viewport' );
 		let presentationBackground;
 		if( viewportElement ) {
 			const viewportStyles = window.getComputedStyle( viewportElement );
@@ -65,43 +42,25 @@ export default class Reader {
 		await new Promise( requestAnimationFrame );
 		this.Reveal.layoutSlideContents( slideWidth, slideHeight );
 
-		// 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;
-		let slideNumber = 1;
 
 		// Slide and slide background layout
-		slides.forEach( function( slide, index ) {
+		slides.forEach( function( slide ) {
 
 			// 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;
-				let top = ( pageHeight - slideHeight ) / 2;
-
-				const contentHeight = slideScrollHeights[ index ];
-				let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
-
-				// Adhere to configured pages per slide limit
-				numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
-
-				// Center slides vertically
-				if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
-					top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
-				}
-
 				// Wrap the slide in a page element and hide its overflow
 				// so that no page ever flows onto another
 				const page = document.createElement( 'div' );
 				pages.push( page );
 
-				page.className = printing ? 'pdf-page' : 'reader-page';
-				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
+				page.className = 'reader-page';
+				page.style.width = slideWidth + 'px';
+				page.style.height = slideHeight + 'px';
+
+				slide.style.width = slideWidth + 'px';
 
 				// Copy the presentation-wide background to each individual
 				// page when printing
@@ -111,164 +70,143 @@ export default class Reader {
 
 				page.appendChild( slide );
 
-				// Position the slide inside of the page
-				if( printing ) {
-					slide.style.left = left + 'px';
-					slide.style.top = top + 'px';
-				}
-
-				slide.style.width = slideWidth + 'px';
-
-				this.Reveal.slideContent.layout( slide );
-
 				if( slide.slideBackgroundElement ) {
 					page.insertBefore( slide.slideBackgroundElement, slide );
 				}
 
-				// Inject notes if `showNotes` is enabled
-				if( config.showNotes ) {
-
-					// Are there notes for this slide?
-					const notes = this.Reveal.getSlideNotes( slide );
-					if( notes ) {
+			}
 
-						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;
+		}, this );
 
-						if( notesLayout === 'separate-page' ) {
-							pages.push( notesElement );
-						}
-						else {
-							notesElement.style.left = notesSpacing + 'px';
-							notesElement.style.bottom = notesSpacing + 'px';
-							notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
-							page.appendChild( notesElement );
-						}
+		// Remove leftover stacks
+		queryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() );
 
-					}
+		await new Promise( requestAnimationFrame );
 
-				}
+		pages.forEach( page => pageContainer.appendChild( page ) );
 
-				// Inject page numbers if `slideNumbers` are enabled
-				if( injectPageNumbers ) {
-					const numberElement = document.createElement( 'div' );
-					numberElement.classList.add( 'slide-number' );
-					numberElement.classList.add( 'slide-number-pdf' );
-					numberElement.innerHTML = slideNumber++;
-					page.appendChild( numberElement );
-				}
+		// Re-run JS-based content layout after the slide is added to page DOM
+		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
 
-				// Copy page and show fragments one after another
-				if( config.pdfSeparateFragments ) {
+		this.Reveal.layout();
 
-					// 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.
-					const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
+	}
 
-					let previousFragmentStep;
+	/**
+	 * Checks if the reader mode is/should be activated.
+	 */
+	isActive() {
 
-					fragmentGroups.forEach( function( fragments, index ) {
+		if( typeof this._isReaderMode === 'undefined' ) {
+			this._isReaderMode = this.Reveal.getConfig().mode === 'reader';
+		}
 
-						// Remove 'current-fragment' from the previous group
-						if( previousFragmentStep ) {
-							previousFragmentStep.forEach( function( fragment ) {
-								fragment.classList.remove( 'current-fragment' );
-							} );
-						}
+		return this._isReaderMode;
 
-						// Show the fragments for the current index
-						fragments.forEach( function( fragment ) {
-							fragment.classList.add( 'visible', 'current-fragment' );
-						}, this );
+	}
 
-						// Create a separate page for the current fragment state
-						const clonedPage = page.cloneNode( true );
+	generatePageMap() {
 
-						// Inject unique page numbers for fragments
-						if( injectPageNumbers ) {
-							const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
-							const fragmentNumber = index + 1;
-							numberElement.innerHTML += '.' + fragmentNumber;
-						}
+		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
+		const scale = this.Reveal.getScale();
 
-						pages.push( clonedPage );
+		// The height that needs to be scrolled between scroll triggers
+		const scrollTriggerHeight = slideSize.height * scale / 2;
 
-						previousFragmentStep = fragments;
+		this.pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.reader-page' ) );
 
-					}, this );
+		this.pageMap = this.pageElements.map( pageElement => {
+			const page = {
+				pageElement: pageElement,
+				slideElement: pageElement.querySelector( 'section' ),
+				top: pageElement.offsetTop * scale,
+				pageHeight: pageElement.offsetHeight * scale,
+				scrollTriggers: []
+			};
 
-					// Reset the first/original page so that all fragments are hidden
-					fragmentGroups.forEach( function( fragments ) {
-						fragments.forEach( function( fragment ) {
-							fragment.classList.remove( 'visible', 'current-fragment' );
-						} );
-					} );
+			page.fragments = this.Reveal.fragments.sort( pageElement.querySelectorAll( '.fragment:not(.disabled)' ) );
 
-				}
-				// Show all fragments
-				else {
-					queryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {
-						fragment.classList.add( 'visible' );
-					} );
-				}
+			// 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.
+			page.fragmentGroups = this.Reveal.fragments.sort( pageElement.querySelectorAll( '.fragment' ), true );
 
-			}
+			// The amount of empty scrollable space that has been append
+			page.scrollHeight = scrollTriggerHeight * Math.max( page.fragmentGroups.length - 1, 0 );
 
-		}, this );
+			// The total height including scrollable space
+			page.totalHeight = page.pageHeight + page.scrollHeight;
 
-		// Remove leftover stacks
-		queryAll( pageContainer, '.reveal .stack' ).forEach( stack => stack.remove() );
+			page.bottom = page.top + page.totalHeight;
 
-		await new Promise( requestAnimationFrame );
+			// Pad the page height to reserve scrollable height
+			page.pageElement.style.marginBottom = page.scrollHeight + 'px';
 
-		pages.forEach( page => pageContainer.appendChild( page ) );
+			// Create scroll triggers that show/hide fragments
+			if( page.fragmentGroups.length ) {
+				const segmentSize = 1 / ( page.fragmentGroups.length + 1 );
+				page.scrollTriggers.push(
+					// Trigger for the initial state with no fragments visible
+					{ range: [ 0, segmentSize ], fragmentIndex: -1 },
 
-		// Re-run JS-based content layout after the slide is added to page DOM
-		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
+					// Triggers for each fragment group
+					...page.fragmentGroups.map( ( fragments, i ) => ({
+						range: [ segmentSize * ( i + 1 ), segmentSize * ( i + 2 ) ],
+						fragmentIndex: i
+					}))
+				);
+			}
 
-		if( printing ) {
-			// Notify subscribers that the PDF layout is good to go
-			this.Reveal.dispatchEvent({ type: 'pdf-ready' });
-		}
+			return page;
+		} );
 
 	}
 
-	/**
-	 * Checks if reveal.js was initialized in printing mode.
-	 */
-	isPrintMode() {
+	update() {
 
-		if( typeof this._isPrintMode === 'undefined' ) {
-			this._isPrintMode = this.Reveal.getConfig().mode === 'pdf' ||
-													( /print-pdf/gi ).test( window.location.search );
-		}
-
-		return this._isPrintMode;
+		this.generatePageMap();
+		this.onScroll();
 
 	}
 
-	/**
-	 * Checks if reveal.js was initialized in reader mode.
-	 */
-	isReaderMode() {
+	onScroll() {
 
-		if( typeof this._isReaderMode === 'undefined' ) {
-			this._isReaderMode = this.Reveal.getConfig().mode === 'reader';
-		}
+		const viewportElement = this.Reveal.getViewportElement();
 
-		return this._isReaderMode;
+		const scrollTop = viewportElement.scrollTop;
+		const scale = this.Reveal.getScale();
 
-	}
+		this.pageMap.forEach( ( page, i ) => {
+			const isPartiallyVisible = scrollTop >= page.top && scrollTop < page.top + page.bottom;
 
-	isActive() {
+			if( isPartiallyVisible ) {
+				// Load the slide content when it becomes visible
+				if( !page.visible ) {
+					page.visible = true;
+					this.Reveal.slideContent.load( page.slideElement );
+					this.Reveal.slideContent.startEmbeddedContent( page.slideElement );
+				}
+
+				if( page.totalHeight > page.pageHeight ) {
+					const scrollProgress = Math.min( ( scrollTop - page.top ) / page.scrollHeight, 1 );
+
+					// Fix the slide to the top of the viewport while we're in its
+					// scrollable region
+					page.pageElement.style.transform = `translateY( ${ scrollProgress * page.scrollHeight / scale }px )`;
 
-		return this.isPrintMode() || this.isReaderMode();
+					page.scrollTriggers.forEach( trigger => {
+						if( scrollProgress >= trigger.range[0] && scrollProgress < trigger.range[1] ) {
+							this.Reveal.fragments.update( trigger.fragmentIndex, page.fragments );
+						}
+					} );
+				}
+			}
+			else if( page.visible ) {
+				page.visible = false;
+				this.Reveal.slideContent.unload( page.slideElement );
+				this.Reveal.slideContent.stopEmbeddedContent( page.slideElement );
+			}
+		} );
 
 	}
 

js/controllers/slidecontent.js

@@ -26,7 +26,7 @@ export default class SlideContent {
 	shouldPreload( element ) {
 
 		// Prefer an explicit global preload setting
-		let preload = this.Reveal.getConfig().preloadIframes;
+		let preload = this.Reveal.getConfig().preloadIframes || this.Reveal.isReaderMode();
 
 		// If no global setting is available, fall back on the element's
 		// own preload setting

js/reveal.js

@@ -12,6 +12,7 @@ import Progress from './controllers/progress.js'
 import Pointer from './controllers/pointer.js'
 import Plugins from './controllers/plugins.js'
 import Reader from './controllers/reader.js'
+import Print from './controllers/print.js'
 import Touch from './controllers/touch.js'
 import Focus from './controllers/focus.js'
 import Notes from './controllers/notes.js'
@@ -114,6 +115,7 @@ export default function( revealElement, options ) {
 		pointer = new Pointer( Reveal ),
 		plugins = new Plugins( Reveal ),
 		reader = new Reader( Reveal ),
+		print = new Print( Reveal ),
 		focus = new Focus( Reveal ),
 		touch = new Touch( Reveal ),
 		notes = new Notes( Reveal );
@@ -225,9 +227,12 @@ export default function( revealElement, options ) {
 			});
 		}, 1 );
 
+		const isPrintMode = print.isActive();
+		const isReaderMode = reader.isActive();
+
 		// Special setup and config is required when initializing a deck
 		// to be read or printed linearly
-		if( reader.isPrintMode() || reader.isReaderMode() ) {
+		if( isPrintMode || isReaderMode ) {
 
 			removeEventListeners();
 
@@ -236,14 +241,23 @@ export default function( revealElement, options ) {
 			// Avoid content flickering during layout
 			revealElement.style.visibility = 'hidden';
 
+			const activate = () => {
+				if( isPrintMode ) {
+					print.activate();
+				}
+				else {
+					reader.activate();
+				}
+			};
+
 			// The document needs to have loaded for the PDF layout
 			// measurements to be accurate
 			if( document.readyState === 'complete' ) {
-				reader.setup().then( () => layout() );
+				activate();
 			}
 			else {
 				window.addEventListener( 'load', () => {
-					reader.setup().then( () => layout() );
+					activate();
 				} );
 			}
 		}
@@ -868,7 +882,7 @@ export default function( revealElement, options ) {
 	 */
 	function layout() {
 
-		if( dom.wrapper && !reader.isPrintMode() ) {
+		if( dom.wrapper && !print.isActive() ) {
 
 			if( !config.disableLayout ) {
 
@@ -969,6 +983,7 @@ export default function( revealElement, options ) {
 
 			progress.update();
 			backgrounds.updateParallax();
+			reader.update();
 
 			if( overview.isActive() ) {
 				overview.update();
@@ -1022,6 +1037,7 @@ export default function( revealElement, options ) {
 	 * @param {number} [presentationHeight=dom.wrapper.offsetHeight]
 	 */
 	function getComputedSlideSize( presentationWidth, presentationHeight ) {
+
 		let width = config.width;
 		let height = config.height;
 
@@ -1613,7 +1629,7 @@ export default function( revealElement, options ) {
 		let slides = Util.queryAll( dom.wrapper, selector ),
 			slidesLength = slides.length;
 
-		let printMode = reader.isActive();
+		let printMode = reader.isActive() || print.isActive();
 		let loopedForwards = false;
 		let loopedBackwards = false;
 
@@ -1773,7 +1789,7 @@ export default function( revealElement, options ) {
 			}
 
 			// All slides need to be visible when exporting to PDF
-			if( reader.isPrintMode() || reader.isReaderMode() ) {
+			if( print.isActive() ) {
 				viewDistance = Number.MAX_VALUE;
 			}
 
@@ -2712,8 +2728,9 @@ export default function( revealElement, options ) {
 		isSpeakerNotes: notes.isSpeakerNotesWindow.bind( notes ),
 		isOverview: overview.isActive.bind( overview ),
 		isFocused: focus.isFocused.bind( focus ),
-		isReaderMode: reader.isReaderMode.bind( reader ),
-		isPrintingPDF: reader.isPrintMode.bind( reader ),
+
+		isReaderMode: reader.isActive.bind( reader ),
+		isPrintMode: print.isActive.bind( print ),
 
 		// Checks if reveal.js has been loaded and is ready for use
 		isReady: () => ready,

plugin/highlight/plugin.js

@@ -194,8 +194,6 @@ const Plugin = {
 		var startTop = block.scrollTop;
 		var targetTop = highlightBounds.top + ( Math.min( highlightBounds.bottom - highlightBounds.top, viewportHeight ) - viewportHeight ) / 2;
 
-		console.log(startTop, targetTop)
-
 		// Account for offsets in position applied to the
 		// <table> that holds our lines of code
 		var lineTable = block.querySelector( '.hljs-ln' );