From 1013ff7ba5d191fe36e9bd4cca07e6fef2d065e6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 6 May 2012 22:05:58 -0400 Subject: [PATCH] hide address bar in mobile browsers, add apple web app meta --- README.md | 1 + index.html | 3 ++ js/reveal.js | 27 ++++++++++++++-- js/reveal.min.js | 82 +++++++++++++++++++++++++----------------------- 4 files changed, 71 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 83b58b6..3afffab 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ Reveal.addEventListener( 'slidechanged', function( event ) { - Added event binding methods (Reveal.addEventListener, Reveal.removeEventListener) - Added 'slidechanged' event - Added print styles. Thanks [skypanther](https://github.com/skypanther) +- The address bar now hides automatically on mobile browsers #### 1.2 diff --git a/index.html b/index.html index 6ffa93b..b38e094 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,9 @@ + + + diff --git a/js/reveal.js b/js/reveal.js index 5b985b5..d35170d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -10,6 +10,8 @@ var Reveal = (function(){ var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section', VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section', + IS_TOUCH_DEVICE = !!( 'ontouchstart' in window ), + // The horizontal and verical index of the currently active slide indexh = 0, indexv = 0, @@ -111,8 +113,8 @@ var Reveal = (function(){ } if( config.mouseWheel ) { - document.addEventListener('DOMMouseScroll', onDocumentMouseScroll, false); // FF - document.addEventListener('mousewheel', onDocumentMouseScroll, false); + document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF + document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); } if( config.rollingLinks ) { @@ -122,6 +124,17 @@ var Reveal = (function(){ // Read the initial hash readURL(); + + // Set up hiding of the browser address bar + if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) { + // Give the page some scrollable overflow + document.documentElement.style.overflow = 'scroll'; + document.body.style.height = '120%'; + + // Events that should trigger the address bar to hide + window.addEventListener( 'load', removeAddressBar, false ); + window.addEventListener( 'orientationchange', removeAddressBar, false ); + } } /** @@ -147,6 +160,16 @@ var Reveal = (function(){ delegate.call(); } } + + /** + * Causes the address bar to hide on mobile devices, + * more vertical space ftw. + */ + function removeAddressBar() { + setTimeout( function() { + window.scrollTo( 0, 1 ); + }, 0 ); + } /** * Handler for the document level 'keydown' event. diff --git a/js/reveal.min.js b/js/reveal.min.js index d26ad76..8b2d376 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -5,45 +5,47 @@ * * Copyright (C) 2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var i="#reveal .slides>section",a="#reveal .slides>section.present>section",j=0,c=0,F={controls:false,progress:false,history:false,loop:false,mouseWheel:true,rollingLinks:true,transition:"default",theme:"default"},L=[],d={},G=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,k=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,u=0,x=0; -function g(N){if(!k&&!G){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,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"); 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",K,false);document.addEventListener("touchstart",v,false);window.addEventListener("hashchange",s,false);d.controlsLeft.addEventListener("click",m(w),false); -d.controlsRight.addEventListener("click",m(h),false);d.controlsUp.addEventListener("click",m(q),false);d.controlsDown.addEventListener("click",m(z),false); -p(F,N);if(G===false){F.transition="linear";}if(F.controls){d.controls.style.display="block";}if(F.progress){d.progress.style.display="block";}if(F.transition!=="default"){d.wrapper.classList.add(F.transition); -}if(F.theme!=="default"){d.wrapper.classList.add(F.theme);}if(F.mouseWheel){document.addEventListener("DOMMouseScroll",l,false);document.addEventListener("mousewheel",l,false); -}if(F.rollingLinks){C();}B();}function p(O,N){for(var P in N){O[P]=N[P];}}function m(N){return function(O){O.preventDefault();N.call();};}function K(O){if(O.target.contentEditable!="inherit"||O.shiftKey||O.altKey||O.ctrlKey||O.metaKey){return; -}var N=false;switch(O.keyCode){case 80:case 33:H();N=true;break;case 78:case 32:case 34:t();N=true;break;case 72:case 37:w();N=true;break;case 76:case 39:h(); -N=true;break;case 75:case 38:q();N=true;break;case 74:case 40:z();N=true;break;}if(N){O.preventDefault();}else{if(O.keyCode===27&&G){if(I()){J();}else{A(); -}O.preventDefault();}}}function v(Q){if(Q.touches.length===1){if(Q.target.tagName.toLowerCase()==="a"||Q.target.tagName.toLowerCase()==="img"){return;}Q.preventDefault(); -var O={x:Q.touches[0].clientX,y:Q.touches[0].clientY};var N=window.innerWidth*0.3;var P=window.innerHeight*0.3;if(O.xwindow.innerWidth-N){h(); -}else{if(O.ywindow.innerHeight-P){z();}}}}b();}}function l(N){clearTimeout(u);u=setTimeout(function(){var O=N.detail||-N.wheelDelta; -if(O>0){t();}else{H();}},100);}function s(N){B();}function C(){if(G){var O=document.querySelectorAll("#reveal .slides section a:not(.image)");for(var P=0,N=O.length; -P'+Q.innerHTML+""; -}}}}function A(){d.wrapper.classList.add("overview");var N=Array.prototype.slice.call(document.querySelectorAll(i));for(var S=0,Q=N.length;S3?"none":"block"; -}S[R].classList.remove("past");S[R].classList.remove("present");S[R].classList.remove("future");if(RQ){S[R].classList.add("future"); -}}if(N.querySelector("section")){S[R].classList.add("stack");}}S[Q].classList.add("present");var P=S[Q].getAttribute("data-state");if(P){L=L.concat(P.split(" ")); -}}else{Q=0;}return Q;}function b(){var Q=L.concat();L.length=0;j=M(i,j);c=M(a,c);stateLoop:for(var P=0,N=L.length;P0,right:j0,down:c0||c>0){N+=j; -}if(c>0){N+="/"+c;}window.location.hash=N;}}function n(O,N){var P=document.createEvent("HTMLEvents",1,2);P.initEvent(O,true,true);p(P,N);d.wrapper.dispatchEvent(P); -}function r(){if(document.querySelector(a+".present")){var O=document.querySelectorAll(a+".present .fragment:not(.visible)");if(O.length){O[0].classList.add("visible"); -return true;}}else{var N=document.querySelectorAll(i+".present .fragment:not(.visible)");if(N.length){N[0].classList.add("visible");return true;}}return false; -}function E(){if(document.querySelector(a+".present")){var O=document.querySelectorAll(a+".present .fragment.visible");if(O.length){O[O.length-1].classList.remove("visible"); -return true;}}else{var N=document.querySelectorAll(i+".present .fragment.visible");if(N.length){N[N.length-1].classList.remove("visible");return true;}}return false; -}function D(O,N){j=O===undefined?j:O;c=N===undefined?c:N;b();}function w(){if(I()||E()===false){j--;c=0;b();}}function h(){if(I()||r()===false){j++;c=0; -b();}}function q(){if(I()||E()===false){c--;b();}}function z(){if(I()||r()===false){c++;b();}}function H(){if(E()===false){if(e().up){q();}else{var N=document.querySelector("#reveal .slides>section.past:nth-child("+j+")"); -if(N){c=(N.querySelectorAll("section").length+1)||0;j--;b();}}}}function t(){if(r()===false){e().down?z():h();}}return{initialize:g,navigateTo:D,navigateLeft:w,navigateRight:h,navigateUp:q,navigateDown:z,addEventListener:function(O,P,N){(d.wrapper||document.querySelector("#reveal")).addEventListener(O,P,N); -},removeEventListener:function(O,P,N){(d.wrapper||document.querySelector("#reveal")).removeEventListener(O,P,N);}};})(); \ No newline at end of file +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|ipad|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 32: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;}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"); +return true;}}else{var P=document.querySelectorAll(j+".present .fragment:not(.visible)");if(P.length){P[0].classList.add("visible");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"); +return true;}}else{var P=document.querySelectorAll(j+".present .fragment.visible");if(P.length){P[P.length-1].classList.remove("visible");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