diff --git a/js/reveal.js b/js/reveal.js index d6c5b5bf..33b58cf5 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -53,7 +53,18 @@ var Reveal = (function(){ mouseWheelTimeout = 0, // Delays updates to the URL due to a Chrome thumbnailer bug - writeURLTimeout = 0; + writeURLTimeout = 0, + + // Holds information about the currently ongoing touch input + touch = { + startX: 0, + startY: 0, + startSpan: 0, + startCount: 0, + handled: false, + threshold: 40 + }; + /** * Starts up the slideshow by applying configuration @@ -79,14 +90,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 ); - 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 ); + addEventListeners(); // Copy options over to our config object extend( config, options ); @@ -135,6 +139,33 @@ var Reveal = (function(){ window.addEventListener( 'load', removeAddressBar, false ); window.addEventListener( 'orientationchange', removeAddressBar, false ); } + + } + + function addEventListeners() { + 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 removeEventListeners() { + 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 ); } /** @@ -147,6 +178,13 @@ var Reveal = (function(){ } } + function distanceBetween( a, b ) { + var dx = a.x - b.x, + dy = a.y - b.y; + + return Math.sqrt( dx*dx + dy*dy ); + } + /** * Prevents an events defaults behavior calls the * specified delegate. @@ -224,54 +262,98 @@ var Reveal = (function(){ } } - + /** - * Handler for the document level 'touchstart' event. - * - * This enables very basic tap interaction for touch - * devices. Added mainly for performance testing of 3D - * transforms on iOS but was so happily surprised with - * how smoothly it runs so I left it in here. Apple +1 - * - * @param {Object} event + * Handler for the document level 'touchstart' event, + * enables support for swipe and pinch gestures. */ 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; + touch.startX = event.touches[0].clientX; + touch.startY = event.touches[0].clientY; + touch.startCount = event.touches.length; + + // If there's two touches we need to memorize the distance + // between those two points to detect pinching + if( event.touches.length === 2 ) { + touch.startSpan = distanceBetween( { + x: event.touches[1].clientX, + y: event.touches[1].clientY + }, { + x: touch.startX, + y: touch.startY + } ); + } + } + + /** + * Handler for the document level 'touchmove' event. + */ + function onDocumentTouchMove( event ) { + // Each touch should only trigger one action + if( !touch.handled ) { + var currentX = event.touches[0].clientX; + var currentY = event.touches[0].clientY; + + // If the touch started off with two points and still has + // two active touches; test for the pinch gesture + if( event.touches.length === 2 && touch.startCount === 2 ) { + + // The current distance in pixels between the two touch points + var currentSpan = distanceBetween( { + x: event.touches[1].clientX, + y: event.touches[1].clientY + }, { + x: touch.startX, + y: touch.startY + } ); + + // If the span is larger than the desire amount we've got + // ourselves a pinch + if( Math.abs( touch.startSpan - currentSpan ) > touch.threshold ) { + touch.handled = true; + + if( currentSpan < touch.startSpan ) { + activateOverview(); + } + else { + deactivateOverview(); + } + } + } - + // There was only one touch point, look for a swipe + else if( event.touches.length === 1 ) { + var deltaX = currentX - touch.startX, + deltaY = currentY - touch.startY; + + if( deltaX > touch.threshold && Math.abs( deltaX ) > Math.abs( deltaY ) ) { + touch.handled = true; + navigateLeft(); + } + else if( deltaX < -touch.threshold && Math.abs( deltaX ) > Math.abs( deltaY ) ) { + touch.handled = true; + navigateRight(); + } + else if( deltaY > touch.threshold ) { + touch.handled = true; + navigateUp(); + } + else if( deltaY < -touch.threshold ) { + touch.handled = true; + navigateDown(); + } + } + event.preventDefault(); - - var point = { - x: event.touches[0].clientX, - y: event.touches[0].clientY - }; - - // 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 ) { - navigateLeft(); - } - else if( point.x > window.innerWidth - wt ) { - navigateRight(); - } - else if( point.y < ht ) { - navigateUp(); - } - else if( point.y > window.innerHeight - ht ) { - navigateDown(); - } - - slide(); } } + /** + * Handler for the document level 'touchend' event. + */ + function onDocumentTouchEnd( event ) { + touch.handled = false; + } /** * Handles mouse wheel scrolling, throttled to avoid @@ -326,6 +408,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 ) ); @@ -341,12 +424,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++ ) { @@ -365,6 +448,7 @@ var Reveal = (function(){ // Navigate to this slide on click vslide.addEventListener( 'click', onOverviewSlideClicked, true ); } + } } @@ -786,6 +870,18 @@ var Reveal = (function(){ availableRoutes().down ? navigateDown() : navigateRight(); } } + + /** + * Toggles the slide overview mode on and off. + */ + function toggleOverview() { + if( overviewIsActive() ) { + deactivateOverview(); + } + else { + activateOverview(); + } + } // Expose some methods publicly return { @@ -795,6 +891,7 @@ var Reveal = (function(){ navigateRight: navigateRight, navigateUp: navigateUp, navigateDown: navigateDown, + toggleOverview: toggleOverview, // Forward event binding to the reveal DOM element addEventListener: function( type, listener, useCapture ) { diff --git a/js/reveal.min.js b/js/reveal.min.js index 08b8a972..41f93470 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -5,48 +5,56 @@ * * Copyright (C) 2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var j="#reveal .slides>section",a="#reveal .slides>section.present>section",e=!!("ontouchstart" in window),k=0,c=0,G={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},N=[],d={},H=document.body.style.perspectiveProperty!==undefined||document.body.style.WebkitPerspective!==undefined||document.body.style.MozPerspective!==undefined||document.body.style.msPerspective!==undefined||document.body.style.OPerspective!==undefined,l=document.body.style.transformProperty!==undefined||document.body.style.WebkitTransform!==undefined||document.body.style.MozTransform!==undefined||document.body.style.msTransform!==undefined||document.body.style.OTransform!==undefined,v=0,y=0; -function h(P){if(!l&&!H){document.body.setAttribute("class","no-transforms");return;}d.wrapper=document.querySelector("#reveal");d.progress=document.querySelector("#reveal .progress"); +var Reveal=(function(){var j="#reveal .slides>section",a="#reveal .slides>section.present>section",e=!!("ontouchstart" in window),k=0,c=0,H={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},U=[],d={},J=document.body.style.perspectiveProperty!==undefined||document.body.style.WebkitPerspective!==undefined||document.body.style.MozPerspective!==undefined||document.body.style.msPerspective!==undefined||document.body.style.OPerspective!==undefined,l=document.body.style.transformProperty!==undefined||document.body.style.WebkitTransform!==undefined||document.body.style.MozTransform!==undefined||document.body.style.msTransform!==undefined||document.body.style.OTransform!==undefined,v=0,y=0,P={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:40}; +function h(W){if(!l&&!J){document.body.setAttribute("class","no-transforms");return;}d.wrapper=document.querySelector("#reveal");d.progress=document.querySelector("#reveal .progress"); d.progressbar=document.querySelector("#reveal .progress span");d.controls=document.querySelector("#reveal .controls");d.controlsLeft=document.querySelector("#reveal .controls .left"); d.controlsRight=document.querySelector("#reveal .controls .right");d.controlsUp=document.querySelector("#reveal .controls .up");d.controlsDown=document.querySelector("#reveal .controls .down"); -document.addEventListener("keydown",M,false);document.addEventListener("touchstart",w,false);window.addEventListener("hashchange",t,false);d.controlsLeft.addEventListener("click",n(x),false); -d.controlsRight.addEventListener("click",n(i),false);d.controlsUp.addEventListener("click",n(r),false);d.controlsDown.addEventListener("click",n(A),false); -q(G,P);if(H===false){G.transition="linear";}if(G.controls){d.controls.style.display="block";}if(G.progress){d.progress.style.display="block";}if(G.transition!=="default"){d.wrapper.classList.add(G.transition); -}if(G.theme!=="default"){d.wrapper.classList.add(G.theme);}if(G.mouseWheel){document.addEventListener("DOMMouseScroll",m,false);document.addEventListener("mousewheel",m,false); -}if(G.rollingLinks){D();}C();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";document.body.style.height="120%"; -window.addEventListener("load",K,false);window.addEventListener("orientationchange",K,false);}}function q(Q,P){for(var R in P){Q[R]=P[R];}}function n(P){return function(Q){Q.preventDefault(); -P.call();};}function K(){setTimeout(function(){window.scrollTo(0,1);},0);}function M(Q){if(Q.target.contentEditable!="inherit"||Q.shiftKey||Q.altKey||Q.ctrlKey||Q.metaKey){return; -}var P=false;switch(Q.keyCode){case 80:case 33:I();P=true;break;case 78:case 34:u();P=true;break;case 72:case 37:x();P=true;break;case 76:case 39:i();P=true; -break;case 75:case 38:r();P=true;break;case 74:case 40:A();P=true;break;case 36:E(0);P=true;break;case 35:E(Number.MAX_VALUE);P=true;break;case 32:J()?L():u(); -P=true;break;case 13:if(J()){L();P=true;}break;}if(P){Q.preventDefault();}else{if(Q.keyCode===27&&H){if(J()){L();}else{B();}Q.preventDefault();}}}function w(S){if(S.touches.length===1){if(S.target.tagName.toLowerCase()==="a"||S.target.tagName.toLowerCase()==="img"){return; -}S.preventDefault();var Q={x:S.touches[0].clientX,y:S.touches[0].clientY};var P=window.innerWidth*0.3;var R=window.innerHeight*0.3;if(Q.x
window.innerWidth-P){i();
-}else{if(Q.y '+S.innerHTML+"";
-}}}}function B(){d.wrapper.classList.add("overview");var P=Array.prototype.slice.call(document.querySelectorAll(j));for(var U=0,S=P.length;U 0,right:k3?"none":"block";
-}U[T].classList.remove("past");U[T].classList.remove("present");U[T].classList.remove("future");if(TS){U[T].classList.add("future");
-}}if(P.querySelector("section")){U[T].classList.add("stack");}}U[S].classList.add("present");var R=U[S].getAttribute("data-state");if(R){N=N.concat(R.split(" "));
-}}else{S=0;}return S;}function b(){var S=N.concat();N.length=0;k=O(j,k);c=O(a,c);stateLoop:for(var R=0,P=N.length;R