reader mode tests

hakimel · Oct 6, 2023 · d84aa34 · d84aa34
1 parent ab52d33
commit d84aa34
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 25 deletions.
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/js/config.js b/js/config.js
@@ -311,7 +311,7 @@ export default {
 	// Time before the cursor is hidden (in ms)
 	hideCursorTime: 5000,
 
-	// Should we automatmically sort and set indices for fragments
+	// Should we automatically sort and set indices for fragments
 	// at each sync? (See Reveal.sync)
 	sortFragmentsOnSync: true,
 

diff --git a/js/controllers/reader.js b/js/controllers/reader.js
@@ -22,7 +22,7 @@ export default class Reader {
 	 * Activates the reader mode. This rearranges the presentation DOM
 	 * by—among other things—wrapping each slide in a page element.
 	 */
-	async activate() {
+	activate() {
 
 		if( this.active ) return;
 
@@ -89,8 +89,6 @@ export default class Reader {
 		// Remove leftover stacks
 		queryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() );
 
-		await new Promise( requestAnimationFrame );
-
 		pageElements.forEach( page => pageContainer.appendChild( page ) );
 
 		// Re-run JS-based content layout after the slide is added to page DOM
@@ -128,13 +126,13 @@ export default class Reader {
 
 	}
 
-	toggle() {
+	toggle( override ) {
 
-		if( this.active === true ) {
-			this.deactivate();
+		if( typeof override === 'boolean' ) {
+			override ? this.activate() : this.deactivate();
 		}
 		else {
-			this.activate();
+			this.isActive() ? this.deactivate() : this.activate();
 		}
 
 	}

diff --git a/js/reveal.js b/js/reveal.js
@@ -249,24 +249,18 @@ export default function( revealElement, options ) {
 			// Avoid content flickering during layout
 			dom.viewport.classList.add( 'loading-scroll-mode' );
 
-			const activate = () => {
-				if( activatePrintView ) {
+			if( activatePrintView ) {
+				// The document needs to have loaded for the PDF layout
+				// measurements to be accurate
+				if( document.readyState === 'complete' ) {
 					print.activate();
 				}
 				else {
-					reader.activate();
+					window.addEventListener( 'load', () => print.activate() );
 				}
-			};
-
-			// The document needs to have loaded for the PDF layout
-			// measurements to be accurate
-			if( document.readyState === 'complete' ) {
-				activate();
 			}
 			else {
-				window.addEventListener( 'load', () => {
-					activate();
-				} );
+				reader.activate();
 			}
 		}
 
@@ -2784,7 +2778,7 @@ export default function( revealElement, options ) {
 		toggleOverview: overview.toggle.bind( overview ),
 
 		// Toggles the reader mode on/off
-		toggleReader: reader.toggle.bind( reader ),
+		toggleReaderMode: reader.toggle.bind( reader ),
 
 		// Toggles the "black screen" mode on/off
 		togglePause,

diff --git a/test/test-reader-mode.html b/test/test-reader-mode.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Reader Mode</title>
+
+		<link rel="stylesheet" href="../dist/reveal.css">
+		<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
+		<script src="../node_modules/qunit/qunit/qunit.js"></script>
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="opacity: 0; pointer-events: none;">
+
+			<div class="slides">
+
+				<section>
+					<h1>slide 1</h1>
+				</section>
+
+				<section>
+					<h1>slide 2</h1>
+				</section>
+
+				<section>
+					<h1>slide 3</h1>
+					<p class="fragment">fragment 1</p>
+					<p class="fragment">fragment 2</p>
+					<p class="fragment">fragment 3</p>
+				</section>
+
+				<section>
+					<h1>slide 4</h1>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../dist/reveal.js"></script>
+		<script>
+
+			QUnit.config.testTimeout = 30000;
+			QUnit.config.reorder = false;
+
+			function getScrollHeight() {
+				return Reveal.getViewportElement().scrollHeight;
+			}
+
+			function getViewportHeight() {
+				return Reveal.getViewportElement().offsetHeight;
+			}
+
+			Reveal.initialize({ view: 'reader' }).then( async () => {
+
+				QUnit.module( 'Reader Mode' );
+
+				QUnit.test( 'Activates', assert => {
+					assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
+				});
+
+				QUnit.test( 'Can be toggled via API', assert => {
+					Reveal.toggleReaderMode( false );
+					assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' );
+					Reveal.toggleReaderMode( true );
+					assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
+				});
+
+				QUnit.test( 'Changes present slide when scrolling', assert => {
+					assert.timeout( 200 );
+					assert.expect( 2 );
+
+					const slides = document.querySelectorAll( '.reveal .slides section' );
+
+					assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' );
+					Reveal.getViewportElement().scrollTop = getViewportHeight() * 1;
+
+					return new Promise( resolve => {
+						setTimeout(() => {
+							assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' );
+							resolve();
+						}, 100);
+					} );
+				});
+
+				QUnit.test( 'Fires slideschanged 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( '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;
+					});
+				});
+
+			} );
+		</script>
+
+	</body>
+</html>