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.xwindow.innerWidth-P){i(); -}else{if(Q.ywindow.innerHeight-R){A();}}}}b();}}function m(P){clearTimeout(v);v=setTimeout(function(){var Q=P.detail||-P.wheelDelta; -if(Q>0){u();}else{I();}},100);}function t(P){C();}function D(){if(H){var Q=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var R=0,P=Q.length; -R'+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;U3?"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;R0,right:k0,down:c0||c>0){P+=k; -}if(c>0){P+="/"+c;}window.location.hash=P;}}function o(Q,P){var R=document.createEvent("HTMLEvents",1,2);R.initEvent(Q,true,true);q(R,P);d.wrapper.dispatchEvent(R); -}function s(){if(document.querySelector(a+".present")){var Q=document.querySelectorAll(a+".present .fragment:not(.visible)");if(Q.length){Q[0].classList.add("visible"); -o("fragmentshown",{fragment:Q[0]});return true;}}else{var P=document.querySelectorAll(j+".present .fragment:not(.visible)");if(P.length){P[0].classList.add("visible"); -o("fragmentshown",{fragment:P[0]});return true;}}return false;}function F(){if(document.querySelector(a+".present")){var Q=document.querySelectorAll(a+".present .fragment.visible"); -if(Q.length){Q[Q.length-1].classList.remove("visible");o("fragmenthidden",{fragment:Q[0]});return true;}}else{var P=document.querySelectorAll(j+".present .fragment.visible"); -if(P.length){P[P.length-1].classList.remove("visible");o("fragmenthidden",{fragment:P[0]});return true;}}return false;}function E(Q,P){k=Q===undefined?k:Q; -c=P===undefined?c:P;b();}function x(){if(J()||F()===false){k--;c=0;b();}}function i(){if(J()||s()===false){k++;c=0;b();}}function r(){if(J()||F()===false){c--; -b();}}function A(){if(J()||s()===false){c++;b();}}function I(){if(F()===false){if(f().up){r();}else{var P=document.querySelector("#reveal .slides>section.past:nth-child("+k+")"); -if(P){c=(P.querySelectorAll("section").length+1)||0;k--;b();}}}}function u(){if(s()===false){f().down?A():i();}}return{initialize:h,navigateTo:E,navigateLeft:x,navigateRight:i,navigateUp:r,navigateDown:A,addEventListener:function(Q,R,P){(d.wrapper||document.querySelector("#reveal")).addEventListener(Q,R,P); -},removeEventListener:function(Q,R,P){(d.wrapper||document.querySelector("#reveal")).removeEventListener(Q,R,P);}};})(); \ No newline at end of file +A();q(H,W);if(J===false){H.transition="linear";}if(H.controls){d.controls.style.display="block";}if(H.progress){d.progress.style.display="block";}if(H.transition!=="default"){d.wrapper.classList.add(H.transition); +}if(H.theme!=="default"){d.wrapper.classList.add(H.theme);}if(H.mouseWheel){document.addEventListener("DOMMouseScroll",m,false);document.addEventListener("mousewheel",m,false); +}if(H.rollingLinks){E();}D();if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll";document.body.style.height="120%"; +window.addEventListener("load",Q,false);window.addEventListener("orientationchange",Q,false);}}function A(){document.addEventListener("keydown",T,false); +document.addEventListener("touchstart",w,false);document.addEventListener("touchmove",S,false);document.addEventListener("touchend",L,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(B),false);}function K(){document.removeEventListener("keydown",T,false);document.removeEventListener("touchstart",w,false); +document.removeEventListener("touchmove",S,false);document.removeEventListener("touchend",L,false);window.removeEventListener("hashchange",t,false);d.controlsLeft.removeEventListener("click",n(x),false); +d.controlsRight.removeEventListener("click",n(i),false);d.controlsUp.removeEventListener("click",n(r),false);d.controlsDown.removeEventListener("click",n(B),false); +}function q(X,W){for(var Y in W){X[Y]=W[Y];}}function I(Y,W){var Z=Y.x-W.x,X=Y.y-W.y;return Math.sqrt(Z*Z+X*X);}function n(W){return function(X){X.preventDefault(); +W.call();};}function Q(){setTimeout(function(){window.scrollTo(0,1);},0);}function T(X){if(X.target.contentEditable!="inherit"||X.shiftKey||X.altKey||X.ctrlKey||X.metaKey){return; +}var W=false;switch(X.keyCode){case 80:case 33:N();W=true;break;case 78:case 34:u();W=true;break;case 72:case 37:x();W=true;break;case 76:case 39:i();W=true; +break;case 75:case 38:r();W=true;break;case 74:case 40:B();W=true;break;case 36:F(0);W=true;break;case 35:F(Number.MAX_VALUE);W=true;break;case 32:O()?R():u(); +W=true;break;case 13:if(O()){R();W=true;}break;}if(W){X.preventDefault();}else{if(X.keyCode===27&&J){if(O()){R();}else{C();}X.preventDefault();}}}function w(W){P.startX=W.touches[0].clientX; +P.startY=W.touches[0].clientY;P.startCount=W.touches.length;if(W.touches.length===2){P.startSpan=I({x:W.touches[1].clientX,y:W.touches[1].clientY},{x:P.startX,y:P.startY}); +}}function S(ab){if(!P.handled){var Z=ab.touches[0].clientX;var Y=ab.touches[0].clientY;if(ab.touches.length===2&&P.startCount===2){var aa=I({x:ab.touches[1].clientX,y:ab.touches[1].clientY},{x:P.startX,y:P.startY}); +if(Math.abs(P.startSpan-aa)>P.threshold){P.handled=true;if(aaP.threshold&&Math.abs(X)>Math.abs(W)){P.handled=true;x();}else{if(X<-P.threshold&&Math.abs(X)>Math.abs(W)){P.handled=true;i();}else{if(W>P.threshold){P.handled=true; +r();}else{if(W<-P.threshold){P.handled=true;B();}}}}}}ab.preventDefault();}}function L(W){P.handled=false;}function m(W){clearTimeout(v);v=setTimeout(function(){var X=W.detail||-W.wheelDelta; +if(X>0){u();}else{N();}},100);}function t(W){D();}function E(){if(J){var X=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var Y=0,W=X.length; +Y'+Z.innerHTML+""; +}}}}function C(){d.wrapper.classList.add("overview");var W=Array.prototype.slice.call(document.querySelectorAll(j));for(var ab=0,Z=W.length;ab3?"none":"block";}ab[aa].classList.remove("past"); +ab[aa].classList.remove("present");ab[aa].classList.remove("future");if(aaZ){ab[aa].classList.add("future"); +}}if(W.querySelector("section")){ab[aa].classList.add("stack");}}ab[Z].classList.add("present");var Y=ab[Z].getAttribute("data-state");if(Y){U=U.concat(Y.split(" ")); +}}else{Z=0;}return Z;}function b(){var Z=U.concat();U.length=0;k=V(j,k);c=V(a,c);stateLoop:for(var Y=0,W=U.length;Y0,right:k0,down:c0||c>0){W+=k; +}if(c>0){W+="/"+c;}window.location.hash=W;}}function o(X,W){var Y=document.createEvent("HTMLEvents",1,2);Y.initEvent(X,true,true);q(Y,W);d.wrapper.dispatchEvent(Y); +}function s(){if(document.querySelector(a+".present")){var X=document.querySelectorAll(a+".present .fragment:not(.visible)");if(X.length){X[0].classList.add("visible"); +o("fragmentshown",{fragment:X[0]});return true;}}else{var W=document.querySelectorAll(j+".present .fragment:not(.visible)");if(W.length){W[0].classList.add("visible"); +o("fragmentshown",{fragment:W[0]});return true;}}return false;}function G(){if(document.querySelector(a+".present")){var X=document.querySelectorAll(a+".present .fragment.visible"); +if(X.length){X[X.length-1].classList.remove("visible");o("fragmenthidden",{fragment:X[0]});return true;}}else{var W=document.querySelectorAll(j+".present .fragment.visible"); +if(W.length){W[W.length-1].classList.remove("visible");o("fragmenthidden",{fragment:W[0]});return true;}}return false;}function F(X,W){k=X===undefined?k:X; +c=W===undefined?c:W;b();}function x(){if(O()||G()===false){k--;c=0;b();}}function i(){if(O()||s()===false){k++;c=0;b();}}function r(){if(O()||G()===false){c--; +b();}}function B(){if(O()||s()===false){c++;b();}}function N(){if(G()===false){if(f().up){r();}else{var W=document.querySelector("#reveal .slides>section.past:nth-child("+k+")"); +if(W){c=(W.querySelectorAll("section").length+1)||0;k--;b();}}}}function u(){if(s()===false){f().down?B():i();}}function M(){if(O()){R();}else{C();}}return{initialize:h,navigateTo:F,navigateLeft:x,navigateRight:i,navigateUp:r,navigateDown:B,toggleOverview:M,addEventListener:function(X,Y,W){(d.wrapper||document.querySelector("#reveal")).addEventListener(X,Y,W); +},removeEventListener:function(X,Y,W){(d.wrapper||document.querySelector("#reveal")).removeEventListener(X,Y,W);}};})(); \ No newline at end of file