dont prevent page scrolling when swiping on embedded decks

This commit is contained in:
Hakim El Hattab 2020-05-08 20:12:52 +02:00
parent cca2a3cdf3
commit a0a1ae193f
9 changed files with 54 additions and 29 deletions

View File

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

4
dist/reveal.css vendored

File diff suppressed because one or more lines are too long

4
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

4
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

View File

@ -57,7 +57,7 @@
</div> </div>
</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/highlight.js"></script>
<script src="../dist/plugin/markdown.js"></script> <script src="../dist/plugin/markdown.js"></script>
<script src="../dist/plugin/math.js"></script> <script src="../dist/plugin/math.js"></script>

View File

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

View File

@ -417,19 +417,9 @@ export default function( revealElement, options ) {
shuffle(); 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 // Exit the paused mode if it was configured off
if( config.pause === false ) { if( config.pause === false ) {
@ -1666,7 +1656,7 @@ export default function( revealElement, options ) {
* *
* @return {{left: boolean, right: boolean, up: boolean, down: boolean}} * @return {{left: boolean, right: boolean, up: boolean, down: boolean}}
*/ */
function availableRoutes() { function availableRoutes({ includeFragments = false } = {}) {
let horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ), let horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR ); verticalSlides = dom.wrapper.querySelectorAll( VERTICAL_SLIDES_SELECTOR );
@ -1697,6 +1687,17 @@ export default function( revealElement, options ) {
routes.left = routes.left || routes.up; 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 // Reverse horizontal controls for rtl
if( config.rtl ) { if( config.rtl ) {
let left = routes.left; let left = routes.left;

View File

@ -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. * Utility for deserializing a value.
* *

View File

@ -272,6 +272,9 @@
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' ); 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 ) { QUnit.test( 'Reveal.next', function( assert ) {