Add swipe support for navigation between steps

Also:
 - Removes the code that allowed navigation by tapping left/right edge of screen.
   - Actually, this was already removed in this branch...
 - Removes the code that disabled impress.js on mobile devices
 - Adds new API call impress().swipe()

Refactored for the plugin api from this pull request by @and3rson:
https://github.com/impress/impress.js/pull/496

Manually "cherry picked" from
c44fd0f4c1
This commit is contained in:
and3rson
2017-10-21 13:26:36 +03:00
committed by Henrik Ingo
parent 10632c2ebc
commit b10f710499
5 changed files with 356 additions and 20 deletions

View File

@@ -0,0 +1,68 @@
/**
* Support for swipe and tap on touch devices
*
* This plugin implements navigation for plugin devices, via swiping left/right,
* or tapping on the left/right edges of the screen.
*
*
*
* Copyright 2015: Andrew Dunai (@and3rson)
* Modified to a plugin, 2016: Henrik Ingo (@henrikingo)
*
* MIT License
*/
/* global document, window */
( function( document, window ) {
"use strict";
// Touch handler to detect swiping left and right based on window size.
// If the difference in X change is bigger than 1/20 of the screen width,
// we simply call an appropriate API function to complete the transition.
var startX = 0;
var lastX = 0;
var lastDX = 0;
var threshold = window.innerWidth / 20;
document.addEventListener( "touchstart", function( event ) {
lastX = startX = event.touches[ 0 ].clientX;
} );
document.addEventListener( "touchmove", function( event ) {
var x = event.touches[ 0 ].clientX;
var diff = x - startX;
// To be used in touchend
lastDX = lastX - x;
lastX = x;
window.impress().swipe( diff / window.innerWidth );
} );
document.addEventListener( "touchend", function() {
var totalDiff = lastX - startX;
if ( Math.abs( totalDiff ) > window.innerWidth / 5 && ( totalDiff * lastDX ) <= 0 ) {
if ( totalDiff > window.innerWidth / 5 && lastDX <= 0 ) {
window.impress().prev();
} else if ( totalDiff < -window.innerWidth / 5 && lastDX >= 0 ) {
window.impress().next();
}
} else if ( Math.abs( lastDX ) > threshold ) {
if ( lastDX < -threshold ) {
window.impress().prev();
} else if ( lastDX > threshold ) {
window.impress().next();
}
} else {
// No movement - move (back) to the current slide
window.impress().goto( document.querySelector( "#impress .step.active" ) );
}
} );
document.addEventListener( "touchcancel", function() {
// Move (back) to the current slide
window.impress().goto( document.querySelector( "#impress .step.active" ) );
} );
} )( document, window );