fix vertical swipe navigation not blocking page scrolling in embedded…

… decks
hakimel · Mar 19, 2024 · 924bdb6 · 924bdb6
1 parent d4e5c39
commit 924bdb6
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 6 deletions.
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -631,11 +631,16 @@ $controlsArrowAngleActive: 36deg;
 	touch-action: pinch-zoom;
 }
 
-// Swiping on an embedded deck should not block page scrolling
+// Swiping on an embedded deck should not block page scrolling...
 .reveal.embedded {
 	touch-action: pan-y;
 }
 
+// ... unless we're on a vertical slide
+.reveal.embedded.is-vertical-slide {
+	touch-action: none;
+}
+
 .reveal .slides {
 	position: absolute;
 	width: 100%;

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/touch.js b/js/controllers/touch.js
@@ -103,6 +103,8 @@ export default class Touch {
 	 */
 	onTouchStart( event ) {
 
+		this.touchCaptured = false;
+
 		if( this.isSwipePrevented( event.target ) ) return true;
 
 		this.touchStartX = event.touches[0].clientX;

diff --git a/js/reveal.js b/js/reveal.js
@@ -1446,6 +1446,9 @@ export default function( revealElement, options ) {
 		let currentHorizontalSlide = horizontalSlides[ indexh ],
 			currentVerticalSlides = currentHorizontalSlide.querySelectorAll( 'section' );
 
+		// Indicate when we're on a vertical slide
+		revealElement.classList.toggle( 'is-vertical-slide', currentVerticalSlides.length > 1 );
+
 		// Store references to the previous and current slides
 		currentSlide = currentVerticalSlides[ indexv ] || currentHorizontalSlide;