fix issues with active slide logic in reader mode, foundational work …

…for auto-animate support
hakimel · Oct 5, 2023 · 3db2340 · 3db2340
1 parent c856fa9
commit 3db2340
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 20 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/controllers/keyboard.js b/js/controllers/keyboard.js
@@ -370,10 +370,6 @@ export default class Keyboard {
 					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
@@ -16,6 +16,10 @@ 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() {
 
 		if( this.active ) return;
@@ -99,6 +103,10 @@ export default class Reader {
 
 	}
 
+	/**
+	 * Deactivates the reader mode and restores the standard slide-based
+	 * presentation.
+	 */
 	deactivate() {
 
 		if( !this.active ) return;
@@ -261,10 +269,16 @@ export default class Reader {
 
 		const scrollTop = viewportElement.scrollTop;
 
+		// Find the page closest to the center of the viewport, this
+		// is the page we want to focus and activate
+		const activePage = this.pages.reduce( ( closestPage, page ) => {
+			const distance = Math.abs( ( page.top + page.pageHeight / 2 ) - scrollTop - viewportHeight / 2 );
+			return distance < closestPage.distance ? { page, distance } : closestPage;
+		}, { page: this.pages[0], distance: Infinity } ).page;
+
 		this.pages.forEach( ( page, pageIndex ) => {
 			const isWithinPreloadRange = scrollTop + viewportHeight >= page.top - viewportHeight && scrollTop < page.top + page.bottom + viewportHeight;
 			const isPartiallyVisible = scrollTop + viewportHeight >= page.top && scrollTop < page.top + page.bottom;
-			const isMostlyVisible = scrollTop + viewportHeight >= page.top + viewportHeight / 2 && scrollTop < page.top + page.bottom - viewportHeight / 2;
 
 			// Preload content when it appears within range
 			if( isWithinPreloadRange ) {
@@ -278,8 +292,9 @@ export default class Reader {
 				this.Reveal.slideContent.unload( page.slideElement );
 			}
 
-			// Play slide content when the slide becomes visible
-			if( isMostlyVisible ) {
+			// Activate the current page — there can only be one active page at
+			// a time.
+			if( page === activePage ) {
 				if( !page.active ) {
 					page.active = true;
 					page.pageElement.classList.add( 'present' );
@@ -293,6 +308,7 @@ export default class Reader {
 					}
 				}
 			}
+			// Deactivate previously active pages
 			else if( page.active ) {
 				page.active = false;
 				page.pageElement.classList.remove( 'present' );

diff --git a/js/reveal.js b/js/reveal.js
@@ -1385,23 +1385,19 @@ export default function( revealElement, options ) {
 
 		// Detect if we're moving between two auto-animated slides
 		if( slideChanged && previousSlide && currentSlide && !overview.isActive() ) {
+			transition = 'running';
+
+			autoAnimateTransition = shoulAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexvBefore );
 
 			// If this is an auto-animated transition, we disable the
 			// regular slide transition
 			//
 			// Note 20-03-2020:
 			// This needs to happen before we update slide visibility,
 			// otherwise transitions will still run in Safari.
-			if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' )
-					&& previousSlide.getAttribute( 'data-auto-animate-id' ) === currentSlide.getAttribute( 'data-auto-animate-id' )
-					&& !( ( indexh > indexhBefore || indexv > indexvBefore ) ? currentSlide : previousSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
-
-				autoAnimateTransition = true;
-				dom.slides.classList.add( 'disable-slide-transitions' );
+			if( autoAnimateTransition ) {
+				dom.slides.classList.add( 'disable-slide-transitions' )
 			}
-
-			transition = 'running';
-
 		}
 
 		// Update the visibility of slides now that the indices have changed
@@ -1505,14 +1501,49 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Checks whether or not an auto-animation should take place between
+	 * the two given slides.
+	 *
+	 * @param {HTMLElement} fromSlide
+	 * @param {HTMLElement} toSlide
+	 * @param {number} indexhBefore
+	 * @param {number} indexvBefore
+	 *
+	 * @returns {boolean}
+	 */
+	function shoulAutoAnimateBetween( fromSlide, toSlide, indexhBefore, indexvBefore ) {
+
+		return 	fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) &&
+				fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) &&
+				!( ( indexh > indexhBefore || indexv > indexvBefore ) ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' );
+
+	}
+
+	/**
+	 * Called anytime current page in reader mode changes. The current
+	 * page is the page that occupies the most space in the viewport.
+	 *
+	 * @param {number} pageIndex
+	 * @param {HTMLElement} pageElement
+	 */
 	function setCurrentReaderPage( pageIndex, pageElement ) {
 
+		let indexhBefore = indexh || 0;
+
 		indexh = pageIndex;
 		indexv = 0;
 
 		previousSlide = currentSlide;
 		currentSlide = pageElement.querySelector( 'section' );
 
+		if( currentSlide && previousSlide ) {
+			if( config.autoAnimate && shoulAutoAnimateBetween( previousSlide, currentSlide, indexhBefore, indexv ) ) {
+				// Run the auto-animation between our slides
+				// autoAnimate.run( previousSlide, currentSlide );
+			}
+		}
+
 		dispatchSlideChanged();
 
 	}