From 794ad868093849bf4dbcd6d45ccc5f3b8b6fb76c Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 10:02:19 -0500 Subject: [PATCH] corrections to vertical centering (#70), added to docs, upgrade to 2.2 --- README.md | 3 + css/reveal.css | 20 +++---- index.html | 1 + js/reveal.js | 11 +++- js/reveal.min.js | 151 ++++++++++++++++++++++++----------------------- 5 files changed, 99 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index dd7d820..fd58c71 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,9 @@ Reveal.initialize({ // Enable the slide overview mode overview: true, + // Vertical centering of slides + center: false, + // Loop the presentation loop: false, diff --git a/css/reveal.css b/css/reveal.css index c654505..5f6a023 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -490,10 +490,10 @@ body { *********************************************/ .reveal { + position: relative; width: 100%; height: 100%; - min-height: 600px; - position: relative; + min-height: 640px; /* min height + 40 to account for padding */ } .reveal .slides { @@ -504,9 +504,9 @@ body { left: 50%; top: 50%; padding: 20px 0px; + overflow: visible; z-index: 1; - text-align: center; -webkit-transition: -webkit-perspective .4s ease; @@ -520,10 +520,10 @@ body { -ms-perspective: 600px; perspective: 600px; - -webkit-perspective-origin: 0% 0%; - -moz-perspective-origin: 0% 0%; - -ms-perspective-origin: 0% 0%; - perspective-origin: 0% 0%; + -webkit-perspective-origin: 0% -25%; + -moz-perspective-origin: 0% -25%; + -ms-perspective-origin: 0% -25%; + perspective-origin: 0% -25%; } .reveal .slides>section, @@ -566,14 +566,14 @@ body { } .reveal .slides>section { - margin-left: -50%; - margin-top: -50%; + left: -50%; + top: -50%; } .reveal.center, .reveal.center .slides { - padding: 0; min-height: auto; + padding: 0; } diff --git a/index.html b/index.html index de0637c..82570f3 100644 --- a/index.html +++ b/index.html @@ -350,6 +350,7 @@ function linkify( selector ) { controls: true, progress: true, history: true, + center: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none diff --git a/js/reveal.js b/js/reveal.js index a1683ec..564c863 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r37 + * reveal.js 2.2 r38 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -29,6 +29,7 @@ var Reveal = (function(){ // Enable the slide overview mode overview: true, + // Vertical centering of slides center: false, // Loop the presentation @@ -465,6 +466,7 @@ var Reveal = (function(){ * presentation. */ function layout() { + if( config.center ) { // Select all slides, vertical and horizontal @@ -476,15 +478,18 @@ var Reveal = (function(){ for( var i = 0, len = slides.length; i < len; i++ ) { var slide = slides[ i ]; + // Vertical stacks are not centered since their section + // children will be if( slide.classList.contains( 'stack' ) ) { - slide.style.marginTop = 0; + slide.style.top = 0; } else { - slide.style.marginTop = Math.max( - ( slide.offsetHeight / 2 ) - 20, minTop ) + 'px'; + slide.style.top = Math.max( - ( slide.offsetHeight / 2 ) - 20, minTop ) + 'px'; } } } + } /** diff --git a/js/reveal.min.js b/js/reveal.min.js index e31d807..3167665 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,83 +1,86 @@ /*! - * reveal.js 2.1 r37 + * reveal.js 2.2 r38 * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var l=".reveal .slides>section",b=".reveal .slides>section.present>section",R={controls:true,progress:true,history:false,keyboard:true,overview:true,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},Y=R.autoSlide,m=0,e=0,y,G,ak=[],f={},T="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,n="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,z=0,k=0,D=0,ac={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; -function i(al){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,al);d();V();}function P(){f.theme=document.querySelector("#theme"); -f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var ao=document.createElement("div");ao.classList.add("progress"); -ao.innerHTML="";f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".controls")&&R.controls){var an=document.createElement("aside");an.classList.add("controls"); -an.innerHTML='
';f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".state-background")){var am=document.createElement("div"); -am.classList.add("state-background");f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".pause-overlay")){var al=document.createElement("div");al.classList.add("pause-overlay"); -f.wrapper.appendChild(al);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(R.controls){f.controls=document.querySelector(".reveal .controls"); +var Reveal=(function(){var m=".reveal .slides>section",b=".reveal .slides>section.present>section",T={controls:true,progress:true,history:false,keyboard:true,overview:true,center:false,loop:false,autoSlide:0,mouseWheel:true,rollingLinks:true,theme:null,transition:"default",dependencies:[]},aa=T.autoSlide,n=0,e=0,z,H,am=[],f={},V="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style,o="WebkitTransform" in document.body.style||"MozTransform" in document.body.style||"msTransform" in document.body.style||"OTransform" in document.body.style||"transform" in document.body.style,A=0,l=0,E=0,ae={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; +function j(an){if((!o&&!V)){document.body.setAttribute("class","no-transforms");return;}u(T,an);d();X();}function Q(){f.theme=document.querySelector("#theme"); +f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&T.progress){var aq=document.createElement("div");aq.classList.add("progress"); +aq.innerHTML="";f.wrapper.appendChild(aq);}if(!f.wrapper.querySelector(".controls")&&T.controls){var ap=document.createElement("aside");ap.classList.add("controls"); +ap.innerHTML='
';f.wrapper.appendChild(ap);}if(!f.wrapper.querySelector(".state-background")){var ao=document.createElement("div"); +ao.classList.add("state-background");f.wrapper.appendChild(ao);}if(!f.wrapper.querySelector(".pause-overlay")){var an=document.createElement("div");an.classList.add("pause-overlay"); +f.wrapper.appendChild(an);}f.progress=document.querySelector(".reveal .progress");f.progressbar=document.querySelector(".reveal .progress span");if(T.controls){f.controls=document.querySelector(".reveal .controls"); f.controlsLeft=document.querySelector(".reveal .controls .left");f.controlsRight=document.querySelector(".reveal .controls .right");f.controlsUp=document.querySelector(".reveal .controls .up"); f.controlsDown=document.querySelector(".reveal .controls .down");}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; -document.body.style.height="120%";window.addEventListener("load",ad,false);window.addEventListener("orientationchange",ad,false);}}function V(){var am=[],aq=[]; -for(var an=0,al=R.dependencies.length;an'+ao.innerHTML+"";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var al=document.querySelectorAll(l); -for(var aq=0,ao=al.length;aq3?"none":"block"; -}am[aq].classList.remove("past");am[aq].classList.remove("present");am[aq].classList.remove("future");if(aqau){am[aq].classList.add("future"); -}}if(ar.querySelector("section")){am[aq].classList.add("stack");}}am[au].classList.add("present");var an=am[au].getAttribute("data-state");if(an){ak=ak.concat(an.split(" ")); -}var ap=am[au].getAttribute("data-autoslide");if(ap){Y=parseInt(ap);}else{Y=R.autoSlide;}}else{au=0;}return au;}function s(){if(R.controls&&f.controls){var al=g(); -[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(am){am.classList.remove("enabled");});if(al.left){f.controlsLeft.classList.add("enabled"); -}if(al.right){f.controlsRight.classList.add("enabled");}if(al.up){f.controlsUp.classList.add("enabled");}if(al.down){f.controlsDown.classList.add("enabled"); -}}}function g(){var al=document.querySelectorAll(l),am=document.querySelectorAll(b);return{left:m>0,right:m0,down:e0||e>0){al+=m; -}if(e>0){al+="/"+e;}window.location.hash=al;}}function M(al){var ap=m,an=e;if(al){var aq=!!al.parentNode.nodeName.match(/section/gi);var ao=aq?al.parentNode:al; -var am=Array.prototype.slice.call(document.querySelectorAll(l));ap=Math.max(am.indexOf(ao),0);if(aq){an=Math.max(Array.prototype.slice.call(al.parentNode.children).indexOf(al),0); -}}return{h:ap,v:an};}function v(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment:not(.visible)");if(am.length){am[0].classList.add("visible"); -r("fragmentshown",{fragment:am[0]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible"); -r("fragmentshown",{fragment:al[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var am=document.querySelectorAll(b+".present .fragment.visible"); -if(am.length){am[am.length-1].classList.remove("visible");r("fragmenthidden",{fragment:am[am.length-1]});return true;}}else{var al=document.querySelectorAll(l+".present .fragment.visible"); -if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}return false;}function O(){clearTimeout(k); -if(Y){k=setTimeout(x,Y);}}function B(){if(g().left&&(L()||Q()===false)){a(m-1,0);}}function j(){if(g().right&&(L()||v()===false)){a(m+1,0);}}function u(){if(g().up&&(L()||Q()===false)){a(m,e-1); -}}function F(){if(g().down&&(L()||v()===false)){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var al=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); -if(al){e=(al.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(an){var am=document.activeElement; -var ao=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(ao||an.shiftKey||an.altKey||an.ctrlKey||an.metaKey){return; -}var al=true;switch(an.keyCode){case 80:case 33:Z();break;case 78:case 34:x();break;case 72:case 37:B();break;case 76:case 39:j();break;case 75:case 38:u(); -break;case 74:case 40:F();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:L()?ae():x();break;case 13:L()?ae():al=false;break;case 66:case 190:aa(); -break;case 70:ab();break;default:al=false;}if(al){an.preventDefault();}else{if(an.keyCode===27&&T){X();an.preventDefault();}}O();}function A(al){ac.startX=al.touches[0].clientX; -ac.startY=al.touches[0].clientY;ac.startCount=al.touches.length;if(al.touches.length===2&&R.overview){ac.startSpan=S({x:al.touches[1].clientX,y:al.touches[1].clientY},{x:ac.startX,y:ac.startY}); -}}function af(aq){if(!ac.handled){var ao=aq.touches[0].clientX;var an=aq.touches[0].clientY;if(aq.touches.length===2&&ac.startCount===2&&R.overview){var ap=S({x:aq.touches[1].clientX,y:aq.touches[1].clientY},{x:ac.startX,y:ac.startY}); -if(Math.abs(ac.startSpan-ap)>ac.threshold){ac.handled=true;if(apac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;B();}else{if(am<-ac.threshold&&Math.abs(am)>Math.abs(al)){ac.handled=true;j();}else{if(al>ac.threshold){ac.handled=true; -u();}else{if(al<-ac.threshold){ac.handled=true;F();}}}}aq.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){aq.preventDefault();}}}function W(al){ac.handled=false; -}function o(al){clearTimeout(z);z=setTimeout(function(){var am=al.detail||-al.wheelDelta;if(am>0){x();}else{Z();}},100);}function ai(am){var al=Array.prototype.slice.call(document.querySelectorAll(l)).length; -var an=Math.floor((am.clientX/f.wrapper.offsetWidth)*al);a(an);}function w(al){J();}function C(al){if(L()){al.preventDefault();ae();m=this.getAttribute("data-index-h"); -e=this.getAttribute("data-index-v");a();}}return{initialize:i,slide:a,left:B,right:j,up:u,down:F,prev:Z,next:x,prevFragment:Q,nextFragment:v,navigateTo:a,navigateLeft:B,navigateRight:j,navigateUp:u,navigateDown:F,navigatePrev:Z,navigateNext:x,toggleOverview:X,addEventListeners:E,removeEventListeners:U,getIndices:M,getPreviousSlide:function(){return y; -},getCurrentSlide:function(){return G;},getQueryHash:function(){var al={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(am){al[am.split("=").shift()]=am.split("=").pop(); -});return al;},addEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(am,an,al); -}},removeEventListener:function(am,an,al){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(am,an,al); +document.body.style.height="120%";window.addEventListener("load",af,false);window.addEventListener("orientationchange",af,false);}}function X(){var ao=[],at=[]; +for(var ap=0,an=T.dependencies.length;ap'+aq.innerHTML+"";}}}}function R(){if(T.center){var aq=Array.prototype.slice.call(document.querySelectorAll(".reveal .slides section")); +var ar=-f.wrapper.offsetHeight/2;for(var ap=0,ao=aq.length;ap3?"none":"block"; +}ao[at].classList.remove("past");ao[at].classList.remove("present");ao[at].classList.remove("future");if(ataw){ao[at].classList.add("future"); +}}if(au.querySelector("section")){ao[at].classList.add("stack");}}ao[aw].classList.add("present");var ap=ao[aw].getAttribute("data-state");if(ap){am=am.concat(ap.split(" ")); +}var ar=ao[aw].getAttribute("data-autoslide");if(ar){aa=parseInt(ar);}else{aa=T.autoSlide;}}else{aw=0;}return aw;}function t(){if(T.controls&&f.controls){var an=h(); +[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(ao){ao.classList.remove("enabled");});if(an.left){f.controlsLeft.classList.add("enabled"); +}if(an.right){f.controlsRight.classList.add("enabled");}if(an.up){f.controlsUp.classList.add("enabled");}if(an.down){f.controlsDown.classList.add("enabled"); +}}}function h(){var an=document.querySelectorAll(m),ao=document.querySelectorAll(b);return{left:n>0,right:n0,down:e0||e>0){an+=n; +}if(e>0){an+="/"+e;}window.location.hash=an;}}function N(an){var ar=n,ap=e;if(an){var at=!!an.parentNode.nodeName.match(/section/gi);var aq=at?an.parentNode:an; +var ao=Array.prototype.slice.call(document.querySelectorAll(m));ar=Math.max(ao.indexOf(aq),0);if(at){ap=Math.max(Array.prototype.slice.call(an.parentNode.children).indexOf(an),0); +}}return{h:ar,v:ap};}function w(){if(document.querySelector(b+".present")){var ao=document.querySelectorAll(b+".present .fragment:not(.visible)");if(ao.length){ao[0].classList.add("visible"); +s("fragmentshown",{fragment:ao[0]});return true;}}else{var an=document.querySelectorAll(m+".present .fragment:not(.visible)");if(an.length){an[0].classList.add("visible"); +s("fragmentshown",{fragment:an[0]});return true;}}return false;}function S(){if(document.querySelector(b+".present")){var ao=document.querySelectorAll(b+".present .fragment.visible"); +if(ao.length){ao[ao.length-1].classList.remove("visible");s("fragmenthidden",{fragment:ao[ao.length-1]});return true;}}else{var an=document.querySelectorAll(m+".present .fragment.visible"); +if(an.length){an[an.length-1].classList.remove("visible");s("fragmenthidden",{fragment:an[an.length-1]});return true;}}return false;}function P(){clearTimeout(l); +if(aa){l=setTimeout(y,aa);}}function C(){if(h().left&&(M()||S()===false)){a(n-1,0);}}function k(){if(h().right&&(M()||w()===false)){a(n+1,0);}}function v(){if(h().up&&(M()||S()===false)){a(n,e-1); +}}function G(){if(h().down&&(M()||w()===false)){a(n,e+1);}}function ab(){if(S()===false){if(h().up){v();}else{var an=document.querySelector(".reveal .slides>section.past:nth-child("+n+")"); +if(an){e=(an.querySelectorAll("section").length+1)||0;n--;a();}}}}function y(){if(w()===false){h().down?G():k();}P();}function aj(ap){var ao=document.activeElement; +var aq=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(aq||ap.shiftKey||ap.altKey||ap.ctrlKey||ap.metaKey){return; +}var an=true;switch(ap.keyCode){case 80:case 33:ab();break;case 78:case 34:y();break;case 72:case 37:C();break;case 76:case 39:k();break;case 75:case 38:v(); +break;case 74:case 40:G();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:M()?ag():y();break;case 13:M()?ag():an=false;break;case 66:case 190:ac(); +break;case 70:ad();break;default:an=false;}if(an){ap.preventDefault();}else{if(ap.keyCode===27&&V){Z();ap.preventDefault();}}P();}function B(an){ae.startX=an.touches[0].clientX; +ae.startY=an.touches[0].clientY;ae.startCount=an.touches.length;if(an.touches.length===2&&T.overview){ae.startSpan=U({x:an.touches[1].clientX,y:an.touches[1].clientY},{x:ae.startX,y:ae.startY}); +}}function ah(at){if(!ae.handled){var aq=at.touches[0].clientX;var ap=at.touches[0].clientY;if(at.touches.length===2&&ae.startCount===2&&T.overview){var ar=U({x:at.touches[1].clientX,y:at.touches[1].clientY},{x:ae.startX,y:ae.startY}); +if(Math.abs(ae.startSpan-ar)>ae.threshold){ae.handled=true;if(arae.threshold&&Math.abs(ao)>Math.abs(an)){ae.handled=true;C();}else{if(ao<-ae.threshold&&Math.abs(ao)>Math.abs(an)){ae.handled=true;k();}else{if(an>ae.threshold){ae.handled=true; +v();}else{if(an<-ae.threshold){ae.handled=true;G();}}}}at.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){at.preventDefault();}}}function Y(an){ae.handled=false; +}function p(an){clearTimeout(A);A=setTimeout(function(){var ao=an.detail||-an.wheelDelta;if(ao>0){y();}else{ab();}},100);}function ak(ao){var an=Array.prototype.slice.call(document.querySelectorAll(m)).length; +var ap=Math.floor((ao.clientX/f.wrapper.offsetWidth)*an);a(ap);}function x(an){K();}function g(an){R();}function D(an){if(M()){an.preventDefault();ag(); +n=this.getAttribute("data-index-h");e=this.getAttribute("data-index-v");a();}}return{initialize:j,slide:a,left:C,right:k,up:v,down:G,prev:ab,next:y,prevFragment:S,nextFragment:w,navigateTo:a,navigateLeft:C,navigateRight:k,navigateUp:v,navigateDown:G,navigatePrev:ab,navigateNext:y,toggleOverview:Z,addEventListeners:F,removeEventListeners:W,getIndices:N,getPreviousSlide:function(){return z; +},getCurrentSlide:function(){return H;},getQueryHash:function(){var an={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(ao){an[ao.split("=").shift()]=ao.split("=").pop(); +});return an;},addEventListener:function(ao,ap,an){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(ao,ap,an); +}},removeEventListener:function(ao,ap,an){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(ao,ap,an); }}};})(); \ No newline at end of file