dont prevent page scrolling when swiping on embedded decks
This commit is contained in:
parent
cca2a3cdf3
commit
a0a1ae193f
|
@ -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%;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
29
js/reveal.js
29
js/reveal.js
|
@ -417,19 +417,9 @@ export default function( revealElement, options ) {
|
|||
shuffle();
|
||||
}
|
||||
|
||||
if( config.rtl ) {
|
||||
dom.wrapper.classList.add( 'rtl' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'rtl' );
|
||||
}
|
||||
|
||||
if( config.center ) {
|
||||
dom.wrapper.classList.add( 'center' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'center' );
|
||||
}
|
||||
Util.toggleClass( dom.wrapper, 'embedded', config.embedded );
|
||||
Util.toggleClass( dom.wrapper, 'rtl', config.rtl );
|
||||
Util.toggleClass( dom.wrapper, 'center', config.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;
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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 ) {
|
||||
|
|
Loading…
Reference in New Issue