Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

swiping up and down triggers arrow down and up #728

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

swiping up and down triggers arrow down and up #728

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 52 additions & 14 deletions src/plugins/touch/touch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,81 @@
( 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.
// Touch handler to detect swiping left and right, up and down based on
// window size.
// If the difference in X or Y change is bigger than 1/20 of the screen
// width or height, we simply call an appropriate API function to complete
// the transition.
var startX = 0;
var startY = 0;
var lastX = 0;
var lastY = 0;
var lastDX = 0;
var threshold = window.innerWidth / 20;
var lastDY = 0;
var thresholdX = window.innerWidth / 20;
var thresholdY = window.innerHeight / 20;

var triggerKeyboardEvent = function( el, eventName, detail ) {
var event = new KeyboardEvent( eventName, detail );
el.dispatchEvent( event );
};

document.addEventListener( "touchstart", function( event ) {
lastX = startX = event.touches[ 0 ].clientX;
lastY = startY = event.touches[ 0 ].clientY;
} );

document.addEventListener( "touchmove", function( event ) {
var x = event.touches[ 0 ].clientX;
var diff = x - startX;
var y = event.touches[ 0 ].clientY;
var diffX = x - startX;
var diffY = y - startY;

// To be used in touchend
lastDX = lastX - x;
lastDY = lastY - y;
lastX = x;
lastY = y;

window.impress().swipe( diff / window.innerWidth );
window.impress().swipe( diffX / 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 ) {
document.addEventListener( "touchend", function( event ) {
var root = event.target;
var totalDiffX = lastX - startX;
var totalDiffY = lastY - startY;
if ( Math.abs( totalDiffX ) > window.innerWidth / 5 && ( totalDiffX * lastDX ) <= 0 ) {
if ( totalDiffX > window.innerWidth / 5 && lastDX <= 0 ) {
window.impress().prev();
} else if ( totalDiff < -window.innerWidth / 5 && lastDX >= 0 ) {
} else if ( totalDiffX < -window.innerWidth / 5 && lastDX >= 0 ) {
window.impress().next();
}
} else if ( Math.abs( lastDX ) > threshold ) {
if ( lastDX < -threshold ) {
} else if ( Math.abs( lastDX ) > thresholdX ) {
if ( lastDX < -thresholdX ) {
window.impress().prev();
} else if ( lastDX > threshold ) {
} else if ( lastDX > thresholdX ) {
window.impress().next();
}
} else if ( Math.abs( totalDiffY ) > window.innerHeight / 5 && ( totalDiffY * lastDY ) <= 0 ) {
var detailUp = {'bubbles':true, 'cancelable':true, 'key':'ArrowUp', 'keyCode':38}; // ArrowUp
var detailDown = {'bubbles':true, 'cancelable':true, 'key':'ArrowDown', 'keyCode':40}; // ArrowDown

if ( totalDiffY > window.innerHeight / 5 && lastDY <= 0 ) {
triggerKeyboardEvent(root, 'keydown', detailUp);
triggerKeyboardEvent(root, 'keyup', detailUp);
} else if ( totalDiffY < -window.innerHeight / 5 && lastDY >= 0 ) {
triggerKeyboardEvent(root, 'keydown', detailDown);
triggerKeyboardEvent(root, 'keyup', detailDown);
}
} else if ( Math.abs( lastDY ) > thresholdY ) {
if ( lastDY < -thresholdY ) {
triggerKeyboardEvent(root, 'keydown', detailUp);
triggerKeyboardEvent(root, 'keyup', detailUp);
} else if ( lastDY > thresholdY ) {
triggerKeyboardEvent(root, 'keydown', detailDown);
triggerKeyboardEvent(root, 'keyup', detailDown);
}

} else {

// No movement - move (back) to the current slide
Expand Down