xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dont prevent page scrolling when swiping on embedded decks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/reveal.scss
View File

@ -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%;

4
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/multiple-presentations.html
View File

@ -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>

20
js/controllers/touch.js
View File

@ -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
View File

@ -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;

12
js/utils/util.js
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.
*

3
test/test.html
View File

@ -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 ) {