dispatch slidechange events in reader mode

hakimel · Sep 25, 2023 · c856fa9 · c856fa9
1 parent 4c9cc89
commit c856fa9
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/js/controllers/reader.js b/js/controllers/reader.js
@@ -69,7 +69,10 @@ export default class Reader {
 
 				contentContainer.appendChild( slide );
 
+				slide.classList.remove( 'past', 'future' );
+
 				if( slide.slideBackgroundElement ) {
+					slide.slideBackgroundElement.remove( 'past', 'future' );
 					contentContainer.insertBefore( slide.slideBackgroundElement, slide );
 				}
 
@@ -191,7 +194,6 @@ export default class Reader {
 				);
 			}
 
-
 			// Add scroll padding based on how many scroll triggers we have
 			page.scrollPadding = scrollTriggerHeight * page.scrollTriggers.length;
 
@@ -259,9 +261,10 @@ export default class Reader {
 
 		const scrollTop = viewportElement.scrollTop;
 
-		this.pages.forEach( ( 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 ) {
@@ -276,11 +279,13 @@ export default class Reader {
 			}
 
 			// Play slide content when the slide becomes visible
-			if( isPartiallyVisible ) {
+			if( isMostlyVisible ) {
 				if( !page.active ) {
 					page.active = true;
 					page.pageElement.classList.add( 'present' );
 					page.slideElement.classList.add( 'present' );
+
+					this.Reveal.setCurrentReaderPage( pageIndex, page.pageElement );
 					this.Reveal.slideContent.startEmbeddedContent( page.slideElement );
 
 					if( page.backgroundElement ) {

diff --git a/js/reveal.js b/js/reveal.js
@@ -707,6 +707,26 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Dispatches a slidechanged event.
+	 *
+	 * @param {string} origin Used to identify multiplex clients
+	 */
+	function dispatchSlideChanged( origin ) {
+
+		dispatchEvent({
+			type: 'slidechanged',
+			data: {
+				indexh,
+				indexv,
+				previousSlide,
+				currentSlide,
+				origin
+			}
+		});
+
+	}
+
 	/**
 	 * Dispatched a postMessage of the given type from our window.
 	 */
@@ -1440,16 +1460,7 @@ export default function( revealElement, options ) {
 		}
 
 		if( slideChanged ) {
-			dispatchEvent({
-				type: 'slidechanged',
-				data: {
-					indexh,
-					indexv,
-					previousSlide,
-					currentSlide,
-					origin
-				}
-			});
+			dispatchSlideChanged( origin );
 		}
 
 		// Handle embedded content
@@ -1494,6 +1505,18 @@ export default function( revealElement, options ) {
 
 	}
 
+	function setCurrentReaderPage( pageIndex, pageElement ) {
+
+		indexh = pageIndex;
+		indexv = 0;
+
+		previousSlide = currentSlide;
+		currentSlide = pageElement.querySelector( 'section' );
+
+		dispatchSlideChanged();
+
+	}
+
 	/**
 	 * Syncs the presentation with the current DOM. Useful
 	 * when new slides or control elements are added or when
@@ -2827,6 +2850,7 @@ export default function( revealElement, options ) {
 		registerKeyboardShortcut: keyboard.registerKeyboardShortcut.bind( keyboard ),
 
 		getComputedSlideSize,
+		setCurrentReaderPage,
 
 		// Returns the current scale of the presentation content
 		getScale: () => scale,