From 2e024b5b3e8d786562a29e11b22c0697744682e5 Mon Sep 17 00:00:00 2001 From: akiersky Date: Wed, 30 May 2012 09:38:26 -0300 Subject: [PATCH] added left, right, up, down gestures to change slides. moved window edge slide triggers to a touchend event to prevent interference of gestures --- js/reveal.js | 55 +++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 46 insertions(+), 9 deletions(-) diff --git a/js/reveal.js b/js/reveal.js index 729f2f9..7da9935 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -25,7 +25,8 @@ var Reveal = (function(){ mouseWheel: true, rollingLinks: true, transition: 'default', - theme: 'default' + theme: 'default', + swipeDistance: 30 }, // Slides may hold a data-state attribute which we pick up and apply @@ -82,6 +83,8 @@ var Reveal = (function(){ // Bind all view events document.addEventListener( 'keydown', onDocumentKeyDown, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); + document.addEventListener( 'touchmove', onDocumentTouchMove, false ); + document.addEventListener( 'touchend', onDocumentTouchEnd, false ); window.addEventListener( 'hashchange', onWindowHashChange, false ); dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); @@ -235,6 +238,8 @@ var Reveal = (function(){ * * @param {Object} event */ + var touchStart = {} + var gesture = false; function onDocumentTouchStart( event ) { // We're only interested in one point taps if (event.touches.length === 1) { @@ -245,34 +250,66 @@ var Reveal = (function(){ event.preventDefault(); - var point = { + touchStart = { x: event.touches[0].clientX, y: event.touches[0].clientY }; + slide(); + } + } + + function onDocumentTouchMove( event ) { + + event.preventDefault(); + + if(!gesture) { + var touch = { + x: event.touches[0].clientX, + y: event.touches[0].clientY + }; + if((touch.x - touchStart.x) > config.swipeDistance){ + gesture = true; + navigateLeft(); + } else if((touch.x - touchStart.x) < -config.swipeDistance){ + gesture = true; + navigateRight(); + } else if((touch.y - touchStart.y) > config.swipeDistance){ + gesture = true; + navigateUp(); + } else if((touch.y - touchStart.y) < -config.swipeDistance){ + gesture = true; + navigateDown(); + } + } + } + function onDocumentTouchEnd( event ) { + + event.preventDefault(); + + if(!gesture){//only check for control tap if no gesture is performed + // Define the extent of the areas that may be tapped // to navigate var wt = window.innerWidth * 0.3; var ht = window.innerHeight * 0.3; - if( point.x < wt ) { + if( touchStart.x < wt ) { navigateLeft(); } - else if( point.x > window.innerWidth - wt ) { + else if( touchStart.x > window.innerWidth - wt ) { navigateRight(); } - else if( point.y < ht ) { + else if( touchStart.y < ht ) { navigateUp(); } - else if( point.y > window.innerHeight - ht ) { + else if( touchStart.y > window.innerHeight - ht ) { navigateDown(); } - - slide(); } + gesture = false; } - /** * Handles mouse wheel scrolling, throttled to avoid * skipping multiple slides.