reader mode can be turned off without reload, add Reveal.toggleReader()

hakimel · Sep 19, 2023 · 5de7da7 · 5de7da7
1 parent 4da6f6b
commit 5de7da7
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 27 deletions.
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -1867,6 +1867,10 @@ $notesWidthPercent: 25%;
 /*********************************************
  * READER MODE
  *********************************************/
+.reveal-viewport.loading-scroll-mode {
+	visibility: hidden;
+}
+
 .reveal-viewport.reveal-reader {
 	& {
 		margin: 0 auto !important;
@@ -1910,14 +1914,13 @@ $notesWidthPercent: 25%;
 		position: relative;
 		overflow: hidden;
 		z-index: 1;
-
-		page-break-after: always;
 	}
 
 	.reveal .slides .reader-page section {
 		visibility: visible !important;
 		display: block !important;
 		position: relative !important;
+		top: auto !important;
 
 		margin: 0 !important;
 		padding: 0 !important;

diff --git a/dist/reveal.css b/dist/reveal.css
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/controllers/keyboard.js b/js/controllers/keyboard.js
@@ -360,16 +360,20 @@ export default class Keyboard {
 			}
 			// A
 			else if( keyCode === 65 ) {
-				if ( config.autoSlideStoppable ) {
+				if( config.autoSlideStoppable ) {
 					this.Reveal.toggleAutoSlide( autoSlideWasPaused );
 				}
 			}
 			// G
 			else if( keyCode === 71 ) {
-				if ( config.jumpToSlide ) {
+				if( config.jumpToSlide ) {
 					this.Reveal.toggleJumpToSlide();
 				}
 			}
+			// R
+			else if( keyCode === 82 ) {
+				this.Reveal.toggleReader();
+			}
 			else {
 				triggered = false;
 			}

diff --git a/js/controllers/reader.js b/js/controllers/reader.js
@@ -11,26 +11,28 @@ export default class Reader {
 
 		this.Reveal = Reveal;
 
-		this.activated = false;
+		this.active = false;
 		this.activatedCallbacks = [];
 
 	}
 
 	async activate() {
 
-		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR );
+		if( this.active ) return;
 
-		const viewportElement = this.Reveal.getViewportElement();
+		this.active = true;
 
-		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
+		this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;
+
+		const viewportElement = this.Reveal.getViewportElement();
+		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR );
 
 		// Dimensions of slides within the pages
+		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
 		const slideWidth = slideSize.width,
 			  slideHeight = slideSize.height;
 
-		await new Promise( requestAnimationFrame );
-
-		viewportElement.classList.add( 'reveal-reader' );
+		viewportElement.classList.add( 'loading-scroll-mode', 'reveal-reader' );
 		viewportElement.addEventListener( 'scroll', this.onScroll.bind( this ) );
 
 		let presentationBackground;
@@ -93,22 +95,45 @@ export default class Reader {
 
 		this.Reveal.layout();
 
-		this.activated = true;
+		viewportElement.classList.remove( 'loading-scroll-mode' );
+
 		this.activatedCallbacks.forEach( callback => callback() );
 		this.activatedCallbacks = [];
 
 	}
 
+	deactivate() {
+
+		if( !this.active ) return;
+
+		this.active = false;
+
+		this.Reveal.getViewportElement().classList.remove( 'reveal-reader' );
+		this.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation;
+		this.Reveal.sync();
+
+		// TODO Navigate to the slide that is currently scrolled into view
+		this.Reveal.slide( 0 );
+
+	}
+
+	toggle() {
+
+		if( this.active === true ) {
+			this.deactivate();
+		}
+		else {
+			this.activate();
+		}
+
+	}
+
 	/**
-	 * Checks if the reader mode is/should be activated.
+	 * Checks if the reader mode is currently active.
 	 */
 	isActive() {
 
-		if( typeof this._isReaderMode === 'undefined' ) {
-			this._isReaderMode = this.Reveal.getConfig().mode === 'reader';
-		}
-
-		return this._isReaderMode;
+		return this.active;
 
 	}
 
@@ -187,7 +212,7 @@ export default class Reader {
 
 	scrollToSlide( slideElement ) {
 
-		if( !this.activated ) {
+		if( !this.active ) {
 			this.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) );
 		}
 		else {

diff --git a/js/reveal.js b/js/reveal.js
@@ -228,7 +228,7 @@ export default function( revealElement, options ) {
 		}, 1 );
 
 		const isPrintMode = print.isActive();
-		const isReaderMode = reader.isActive();
+		const isReaderMode = config.mode === 'reader';
 
 		// Special setup and config is required when initializing a deck
 		// to be read or printed linearly
@@ -238,12 +238,11 @@ export default function( revealElement, options ) {
 				removeEventListeners();
 			}
 			else {
-				keyboard.unbind();
 				touch.unbind();
 			}
 
 			// Avoid content flickering during layout
-			revealElement.style.visibility = 'hidden';
+			dom.viewport.classList.add( 'loading-scroll-mode' );
 
 			const activate = () => {
 				if( isPrintMode ) {
@@ -2722,6 +2721,9 @@ export default function( revealElement, options ) {
 		// Toggles the overview mode on/off
 		toggleOverview: overview.toggle.bind( overview ),
 
+		// Toggles the reader mode on/off
+		toggleReader: reader.toggle.bind( reader ),
+
 		// Toggles the "black screen" mode on/off
 		togglePause,