dont prevent page scrolling when swiping on embedded decks

css/reveal.scss

@@ -621,6 +621,11 @@ $controlsArrowAngleActive: 36deg;
 	touch-action: pinch-zoom;
 }
 
+// Swiping on an embedded deck should not block page scrolling
+.reveal.embedded {
+	touch-action: pan-y;
+}
+
 .reveal .slides {
 	position: absolute;
 	width: 100%;

examples/multiple-presentations.html

@@ -57,7 +57,7 @@
 			</div>
 		</div>
 
-		<script src="../dist/reveal.es5.js"></script>
+		<script src="../dist/reveal.js"></script>
 		<script src="../dist/plugin/highlight.js"></script>
 		<script src="../dist/plugin/markdown.js"></script>
 		<script src="../dist/plugin/math.js"></script>

js/controllers/touch.js

@@ -1,3 +1,5 @@
+import { isAndroid } from '../utils/device.js'
+
 const SWIPE_THRESHOLD = 40;
 
 /**
@@ -30,7 +32,7 @@ export default class Touch {
 	 */
 	bind() {
 
-		var revealElement = this.Reveal.getRevealElement();
+		let revealElement = this.Reveal.getRevealElement();
 
 		if( 'onpointerdown' in window ) {
 			// Use W3C pointer events
@@ -58,7 +60,7 @@ export default class Touch {
 	 */
 	unbind() {
 
-		var revealElement = this.Reveal.getRevealElement();
+		let revealElement = this.Reveal.getRevealElement();
 
 		revealElement.removeEventListener( 'pointerdown', this.onPointerDown, false );
 		revealElement.removeEventListener( 'pointermove', this.onPointerMove, false );
@@ -126,6 +128,8 @@ export default class Touch {
 			// There was only one touch point, look for a swipe
 			if( event.touches.length === 1 && this.touchStartCount !== 2 ) {
 
+				let availableRoutes = this.Reveal.availableRoutes({ includeFragments: true });
+
 				let deltaX = currentX - this.touchStartX,
 					deltaY = currentY - this.touchStartY;
 
@@ -136,7 +140,7 @@ export default class Touch {
 							this.Reveal.next();
 						}
 						else {
-							this.Reveal.prev()();
+							this.Reveal.prev();
 						}
 					}
 					else {
@@ -147,7 +151,7 @@ export default class Touch {
 					this.touchCaptured = true;
 					if( config.navigationMode === 'linear' ) {
 						if( config.rtl ) {
-							this.Reveal.prev()();
+							this.Reveal.prev();
 						}
 						else {
 							this.Reveal.next();
@@ -157,16 +161,16 @@ export default class Touch {
 						this.Reveal.right();
 					}
 				}
-				else if( deltaY > SWIPE_THRESHOLD ) {
+				else if( deltaY > SWIPE_THRESHOLD && availableRoutes.up ) {
 					this.touchCaptured = true;
 					if( config.navigationMode === 'linear' ) {
-						this.Reveal.prev()();
+						this.Reveal.prev();
 					}
 					else {
 						this.Reveal.up();
 					}
 				}
-				else if( deltaY < -SWIPE_THRESHOLD ) {
+				else if( deltaY < -SWIPE_THRESHOLD && availableRoutes.down ) {
 					this.touchCaptured = true;
 					if( config.navigationMode === 'linear' ) {
 						this.Reveal.next();
@@ -179,7 +183,7 @@ export default class Touch {
 				// If we're embedded, only block touch events if they have
 				// triggered an action
 				if( config.embedded ) {
-					if( this.touchCaptured || this.Reveal.isVerticalSlide( currentSlide ) ) {
+					if( this.touchCaptured || this.Reveal.isVerticalSlide() ) {
 						event.preventDefault();
 					}
 				}

js/reveal.js

@@ -417,19 +417,9 @@ export default function( revealElement, options ) {
 			shuffle();
 		}
 
-		if( config.rtl ) {
+		Util.toggleClass( dom.wrapper, 'embedded', config.embedded );
-			dom.wrapper.classList.add( 'rtl' );
+		Util.toggleClass( dom.wrapper, 'rtl', config.rtl );
-		}
+		Util.toggleClass( dom.wrapper, 'center', config.center );
-		else {
-			dom.wrapper.classList.remove( 'rtl' );
-		}
-
-		if( config.center ) {
-			dom.wrapper.classList.add( 'center' );
-		}
-		else {
-			dom.wrapper.classList.remove( 'center' );
-		}
 
 		// Exit the paused mode if it was configured off
 		if( config.pause === false ) {
@@ -1666,7 +1656,7 @@ export default function( revealElement, options ) {
 	 *
 	 * @return {{left: boolean, right: boolean, up: boolean, down: boolean}}
 	 */
-	function availableRoutes() {
+	function availableRoutes({ includeFragments = false } = {}) {
 
 		let horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
 			verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
@@ -1697,6 +1687,17 @@ export default function( revealElement, options ) {
 			routes.left = routes.left || routes.up;
 		}
 
+		// If includeFragments is set, a route will be considered
+		// availalbe if either a slid OR fragment is available in
+		// the given direction
+		if( includeFragments === true ) {
+			let fragmentRoutes = fragments.availableRoutes();
+			routes.left = routes.left || fragmentRoutes.prev;
+			routes.up = routes.up || fragmentRoutes.prev;
+			routes.down = routes.down || fragmentRoutes.next;
+			routes.right = routes.right || fragmentRoutes.next;
+		}
+
 		// Reverse horizontal controls for rtl
 		if( config.rtl ) {
 			let left = routes.left;

js/utils/util.js

@@ -24,6 +24,18 @@ export const queryAll = ( el, selector ) => {
 
 }
 
+/**
+ * classList.toggle() with cross browser support
+ */
+export const toggleClass = ( el, className, value ) => {
+	if( value ) {
+		el.classList.add( className );
+	}
+	else {
+		el.classList.remove( className );
+	}
+}
+
 /**
  * Utility for deserializing a value.
  *

test/test.html

@@ -272,6 +272,9 @@
 
 					Reveal.slide( 1, 0 );
 					assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
+
+					Reveal.slide( 0, 0 );
+					assert.deepEqual( Reveal.availableRoutes({ includeFragments: true }), { left: false, up: false, down: false, right: true }, 'correct with fragments included' );
 				});
 
 				QUnit.test( 'Reveal.next', function( assert ) {