fix fragment events not firing in scroll view + add tests #3580

hakimel · Feb 26, 2024 · 8efd7af · 8efd7af
1 parent 66fa435
commit 8efd7af
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 32 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/fragments.js b/js/controllers/fragments.js
@@ -257,6 +257,26 @@ export default class Fragments {
 
 		}
 
+		if( changedFragments.hidden.length ) {
+			this.Reveal.dispatchEvent({
+				type: 'fragmenthidden',
+				data: {
+					fragment: changedFragments.hidden[0],
+					fragments: changedFragments.hidden
+				}
+			});
+		}
+
+		if( changedFragments.shown.length ) {
+			this.Reveal.dispatchEvent({
+				type: 'fragmentshown',
+				data: {
+					fragment: changedFragments.shown[0],
+					fragments: changedFragments.shown
+				}
+			});
+		}
+
 		return changedFragments;
 
 	}
@@ -311,26 +331,6 @@ export default class Fragments {
 
 				let changedFragments = this.update( index, fragments );
 
-				if( changedFragments.hidden.length ) {
-					this.Reveal.dispatchEvent({
-						type: 'fragmenthidden',
-						data: {
-							fragment: changedFragments.hidden[0],
-							fragments: changedFragments.hidden
-						}
-					});
-				}
-
-				if( changedFragments.shown.length ) {
-					this.Reveal.dispatchEvent({
-						type: 'fragmentshown',
-						data: {
-							fragment: changedFragments.shown[0],
-							fragments: changedFragments.shown
-						}
-					});
-				}
-
 				this.Reveal.controls.update();
 				this.Reveal.progress.update();
 

diff --git a/test/test-scroll.html b/test/test-scroll.html
@@ -97,14 +97,61 @@ <h1>slide 4</h1>
 
 					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;
+							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;
+					});
+				});
+
+				QUnit.test( 'Fires fragmentshown 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( 'fragmentshown', callback );
+							assert.ok( true, 'fragmentshown event fired' );
+							assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' );
+							resolve();
+						}
+
+						Reveal.on( 'fragmentshown', callback );
+
+						Reveal.getViewportElement().scrollTop = 0;
+						Reveal.next();
+						Reveal.next();
+						Reveal.getViewportElement().scrollTop += getViewportHeight();
+					});
+				});
+
+				QUnit.test( 'Fires fragmenthidden 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( 'fragmenthidden', callback );
+							assert.ok( true, 'fragmenthidden event fired' );
+							assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' );
+							resolve();
+						}
+
+						Reveal.on( 'fragmenthidden', callback );
+
+						Reveal.getViewportElement().scrollTop = 0;
+						Reveal.next();
+						Reveal.next();
+						Reveal.next();
+						Reveal.getViewportElement().scrollTop -= getViewportHeight();
 					});
 				});