hide address bar in mobile browsers, add apple web app meta

This commit is contained in:
Hakim El Hattab 2012-05-06 22:05:58 -04:00
parent ec1c111359
commit 1013ff7ba5
4 changed files with 71 additions and 42 deletions

View File

@ -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

View File

@ -9,6 +9,9 @@
<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">

View File

@ -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,
@ -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 );
}
}
/**
@ -148,6 +161,16 @@ var Reveal = (function(){
}
}
/**
* 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.
*

82
js/reveal.min.js vendored
View File

@ -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.x<N){w();}else{if(O.x>window.innerWidth-N){h();
}else{if(O.y<P){q();}else{if(O.y>window.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<N;P++){var Q=O[P];if(Q.textContent&&!Q.querySelector("img")&&(!Q.className||!Q.classList.contains(Q,"roll"))){Q.classList.add("roll");Q.innerHTML='<span data-title="'+Q.text+'">'+Q.innerHTML+"</span>";
}}}}function A(){d.wrapper.classList.add("overview");var N=Array.prototype.slice.call(document.querySelectorAll(i));for(var S=0,Q=N.length;S<Q;S++){var P=N[S],W="translateZ(-2500px) translate("+((S-j)*105)+"%, 0%)";
P.setAttribute("data-index-h",S);P.style.display="block";P.style.WebkitTransform=W;P.style.MozTransform=W;P.style.msTransform=W;P.style.OTransform=W;P.style.transform=W;
if(!P.classList.contains("stack")){P.addEventListener("click",y,true);}var V=Array.prototype.slice.call(P.querySelectorAll("section"));for(var R=0,O=V.length;
R<O;R++){var U=V[R],T="translate(0%, "+((R-c)*105)+"%)";U.setAttribute("data-index-h",S);U.setAttribute("data-index-v",R);U.style.display="block";U.style.WebkitTransform=T;
U.style.MozTransform=T;U.style.msTransform=T;U.style.OTransform=T;U.style.transform=T;U.addEventListener("click",y,true);}}}function J(){d.wrapper.classList.remove("overview");
var Q=Array.prototype.slice.call(document.querySelectorAll("#reveal .slides section"));for(var P=0,N=Q.length;P<N;P++){var O=Q[P];O.style.WebkitTransform="";
O.style.MozTransform="";O.style.msTransform="";O.style.OTransform="";O.style.transform="";O.removeEventListener("click",y);}b();}function I(){return d.wrapper.classList.contains("overview");
}function y(N){if(I()){N.preventDefault();J();j=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");b();}}function M(O,Q){var S=Array.prototype.slice.call(document.querySelectorAll(O)),T=S.length;
if(T){if(F.loop){Q%=T;if(Q<0){Q=T+Q;}}Q=Math.max(Math.min(Q,T-1),0);for(var R=0;R<T;R++){var N=S[R];if(I()===false){var U=Math.abs((Q-R)%(T-3))||0;N.style.display=U>3?"none":"block";
}S[R].classList.remove("past");S[R].classList.remove("present");S[R].classList.remove("future");if(R<Q){S[R].classList.add("past");}else{if(R>Q){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;P<N;P++){for(var O=0;O<Q.length;O++){if(Q[O]===L[P]){Q.splice(O,1);
continue stateLoop;}}document.documentElement.classList.add(L[P]);n(L[P]);}while(Q.length){document.documentElement.classList.remove(Q.pop());}if(F.progress){d.progressbar.style.width=(j/(document.querySelectorAll(i).length-1))*window.innerWidth+"px";
}if(I()){A();}o();clearTimeout(x);x=setTimeout(f,1500);n("slidechanged",{indexh:j,indexv:c});}function o(){var N=e();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(O){O.classList.remove("enabled");
});if(N.left){d.controlsLeft.classList.add("enabled");}if(N.right){d.controlsRight.classList.add("enabled");}if(N.up){d.controlsUp.classList.add("enabled");
}if(N.down){d.controlsDown.classList.add("enabled");}}function e(){var N=document.querySelectorAll(i);var O=document.querySelectorAll(a);return{left:j>0,right:j<N.length-1,up:c>0,down:c<O.length-1};
}function B(){var N=window.location.hash.slice(2).split("/");j=parseInt(N[0])||0;c=parseInt(N[1])||0;D(j,c);}function f(){if(F.history){var N="/";if(j>0||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);}};})();
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.x<P){x();}else{if(Q.x>window.innerWidth-P){i();
}else{if(Q.y<R){r();}else{if(Q.y>window.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<P;R++){var S=Q[R];if(S.textContent&&!S.querySelector("img")&&(!S.className||!S.classList.contains(S,"roll"))){S.classList.add("roll");S.innerHTML='<span data-title="'+S.text+'">'+S.innerHTML+"</span>";
}}}}function B(){d.wrapper.classList.add("overview");var P=Array.prototype.slice.call(document.querySelectorAll(j));for(var U=0,S=P.length;U<S;U++){var R=P[U],Y="translateZ(-2500px) translate("+((U-k)*105)+"%, 0%)";
R.setAttribute("data-index-h",U);R.style.display="block";R.style.WebkitTransform=Y;R.style.MozTransform=Y;R.style.msTransform=Y;R.style.OTransform=Y;R.style.transform=Y;
if(!R.classList.contains("stack")){R.addEventListener("click",z,true);}var X=Array.prototype.slice.call(R.querySelectorAll("section"));for(var T=0,Q=X.length;
T<Q;T++){var W=X[T],V="translate(0%, "+((T-c)*105)+"%)";W.setAttribute("data-index-h",U);W.setAttribute("data-index-v",T);W.style.display="block";W.style.WebkitTransform=V;
W.style.MozTransform=V;W.style.msTransform=V;W.style.OTransform=V;W.style.transform=V;W.addEventListener("click",z,true);}}}function L(){d.wrapper.classList.remove("overview");
var S=Array.prototype.slice.call(document.querySelectorAll("#reveal .slides section"));for(var R=0,P=S.length;R<P;R++){var Q=S[R];Q.style.WebkitTransform="";
Q.style.MozTransform="";Q.style.msTransform="";Q.style.OTransform="";Q.style.transform="";Q.removeEventListener("click",z);}b();}function J(){return d.wrapper.classList.contains("overview");
}function z(P){if(J()){P.preventDefault();L();k=this.getAttribute("data-index-h");c=this.getAttribute("data-index-v");b();}}function O(Q,S){var U=Array.prototype.slice.call(document.querySelectorAll(Q)),V=U.length;
if(V){if(G.loop){S%=V;if(S<0){S=V+S;}}S=Math.max(Math.min(S,V-1),0);for(var T=0;T<V;T++){var P=U[T];if(J()===false){var W=Math.abs((S-T)%(V-3))||0;P.style.display=W>3?"none":"block";
}U[T].classList.remove("past");U[T].classList.remove("present");U[T].classList.remove("future");if(T<S){U[T].classList.add("past");}else{if(T>S){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<P;R++){for(var Q=0;Q<S.length;Q++){if(S[Q]===N[R]){S.splice(Q,1);
continue stateLoop;}}document.documentElement.classList.add(N[R]);o(N[R]);}while(S.length){document.documentElement.classList.remove(S.pop());}if(G.progress){d.progressbar.style.width=(k/(document.querySelectorAll(j).length-1))*window.innerWidth+"px";
}if(J()){B();}p();clearTimeout(y);y=setTimeout(g,1500);o("slidechanged",{indexh:k,indexv:c});}function p(){var P=f();[d.controlsLeft,d.controlsRight,d.controlsUp,d.controlsDown].forEach(function(Q){Q.classList.remove("enabled");
});if(P.left){d.controlsLeft.classList.add("enabled");}if(P.right){d.controlsRight.classList.add("enabled");}if(P.up){d.controlsUp.classList.add("enabled");
}if(P.down){d.controlsDown.classList.add("enabled");}}function f(){var P=document.querySelectorAll(j);var Q=document.querySelectorAll(a);return{left:k>0,right:k<P.length-1,up:c>0,down:c<Q.length-1};
}function C(){var P=window.location.hash.slice(2).split("/");k=parseInt(P[0])||0;c=parseInt(P[1])||0;E(k,c);}function g(){if(G.history){var P="/";if(k>0||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);}};})();