From 2e024b5b3e8d786562a29e11b22c0697744682e5 Mon Sep 17 00:00:00 2001 From: akiersky Date: Wed, 30 May 2012 09:38:26 -0300 Subject: 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(-) (limited to 'js/reveal.js') 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. -- cgit v1.2.3 From 049880dba3062bd8ecb91ad0bd4fd0543d03a2dd Mon Sep 17 00:00:00 2001 From: akiersky Date: Wed, 30 May 2012 11:11:34 -0300 Subject: fixed bug in swipe gesture interacting with links. --- js/reveal.js | 45 ++++++++++++++++++++------------------------- 1 file changed, 20 insertions(+), 25 deletions(-) (limited to 'js/reveal.js') diff --git a/js/reveal.js b/js/reveal.js index 7da9935..0debffd 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -26,7 +26,7 @@ var Reveal = (function(){ rollingLinks: true, transition: 'default', theme: 'default', - swipeDistance: 30 + swipeDist: 30 }, // Slides may hold a data-state attribute which we pick up and apply @@ -241,22 +241,15 @@ var Reveal = (function(){ var touchStart = {} var gesture = false; function onDocumentTouchStart( event ) { - // We're only interested in one point taps - if (event.touches.length === 1) { - // Never prevent taps on anchors and images - if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) { - return; - } - - event.preventDefault(); - touchStart = { - x: event.touches[0].clientX, - y: event.touches[0].clientY - }; - - slide(); - } + touchStart = { + x: event.touches[0].clientX, + y: event.touches[0].clientY + }; + if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) { + } else { + event.preventDefault(); + } } function onDocumentTouchMove( event ) { @@ -268,27 +261,28 @@ var Reveal = (function(){ x: event.touches[0].clientX, y: event.touches[0].clientY }; - if((touch.x - touchStart.x) > config.swipeDistance){ + if((touch.x - touchStart.x) > config.swipeDist){ gesture = true; navigateLeft(); - } else if((touch.x - touchStart.x) < -config.swipeDistance){ + } else if((touch.x - touchStart.x) < -config.swipeDist){ gesture = true; navigateRight(); - } else if((touch.y - touchStart.y) > config.swipeDistance){ + } else if((touch.y - touchStart.y) > config.swipeDist){ gesture = true; navigateUp(); - } else if((touch.y - touchStart.y) < -config.swipeDistance){ + } else if((touch.y - touchStart.y) < -config.swipeDist){ gesture = true; navigateDown(); } } } function onDocumentTouchEnd( event ) { - - event.preventDefault(); - - if(!gesture){//only check for control tap if no gesture is performed - + if(!gesture){ + // Never prevent taps on anchors and images + if( event.target.tagName.toLowerCase() === 'a' || event.target.tagName.toLowerCase() === 'img' ) { + return; + } + // Define the extent of the areas that may be tapped // to navigate var wt = window.innerWidth * 0.3; @@ -308,6 +302,7 @@ var Reveal = (function(){ } } gesture = false; + event.preventDefault(); } /** -- cgit v1.2.3 From 6053fe5a97ac6dedee63157801bb0d3590460e3f Mon Sep 17 00:00:00 2001 From: Aaron Kiersky Date: Fri, 1 Jun 2012 13:31:01 -0400 Subject: added some public access methods Added overview toggle to allow for button-based overview toggling Added add/removeEvents methods to allow for adding& removing event listeners that may interfere with other libs. --- js/reveal.js | 61 +++++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 46 insertions(+), 15 deletions(-) (limited to 'js/reveal.js') diff --git a/js/reveal.js b/js/reveal.js index 0debffd..a4881e0 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -26,7 +26,7 @@ var Reveal = (function(){ rollingLinks: true, transition: 'default', theme: 'default', - swipeDist: 30 + swipeDist: 40 }, // Slides may hold a data-state attribute which we pick up and apply @@ -55,6 +55,8 @@ var Reveal = (function(){ // Delays updates to the URL due to a Chrome thumbnailer bug writeURLTimeout = 0; + + /** * Starts up the slideshow by applying configuration @@ -80,16 +82,7 @@ var Reveal = (function(){ dom.controlsUp = document.querySelector( '#reveal .controls .up' ); dom.controlsDown = document.querySelector( '#reveal .controls .down' ); - // 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 ); - dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false ); - dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false ); + addEvents(); // Copy options over to our config object extend( config, options ); @@ -138,8 +131,34 @@ var Reveal = (function(){ window.addEventListener( 'load', removeAddressBar, false ); window.addEventListener( 'orientationchange', removeAddressBar, false ); } + + } + function addEvents() { + // 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 ); + dom.controlsUp.addEventListener( 'click', preventAndForward( navigateUp ), false ); + dom.controlsDown.addEventListener( 'click', preventAndForward( navigateDown ), false ); + } + function removeEvents(){ + // Bind all view events + document.removeEventListener( 'keydown', onDocumentKeyDown, false ); + document.removeEventListener( 'touchstart', onDocumentTouchStart, false ); + document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); + document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); + window.removeEventListener( 'hashchange', onWindowHashChange, false ); + + dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); + dom.controlsRight.removeEventListener( 'click', preventAndForward( navigateRight ), false ); + dom.controlsUp.removeEventListener( 'click', preventAndForward( navigateUp ), false ); + dom.controlsDown.removeEventListener( 'click', preventAndForward( navigateDown ), false ); } - /** * Extend object a with the properties of object b. * If there's a conflict, object b takes precedence. @@ -227,7 +246,6 @@ var Reveal = (function(){ } } - /** * Handler for the document level 'touchstart' event. * @@ -358,6 +376,7 @@ var Reveal = (function(){ * can't be improved. */ function activateOverview() { + dom.wrapper.classList.add( 'overview' ); var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); @@ -373,12 +392,12 @@ var Reveal = (function(){ hslide.style.msTransform = htransform; hslide.style.OTransform = htransform; hslide.style.transform = htransform; - + if( !hslide.classList.contains( 'stack' ) ) { // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); } - + var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) ); for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { @@ -397,6 +416,7 @@ var Reveal = (function(){ // Navigate to this slide on click vslide.addEventListener( 'click', onOverviewSlideClicked, true ); } + } } @@ -806,6 +826,14 @@ var Reveal = (function(){ availableRoutes().down ? navigateDown() : navigateRight(); } } + function overviewToggle (){ + if( overviewIsActive() ) { + deactivateOverview(); + } + else { + activateOverview(); + } + } // Expose some methods publicly return { @@ -815,6 +843,9 @@ var Reveal = (function(){ navigateRight: navigateRight, navigateUp: navigateUp, navigateDown: navigateDown, + overviewToggle: overviewToggle, + addEvents: addEvents, + removeEvents: removeEvents, // Forward event binding to the reveal DOM element addEventListener: function( type, listener, useCapture ) { -- cgit v1.2.3