From 891a66b5c41c564e6fd0c180274c1ea9a24774e9 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 15:28:34 -0500 Subject: [PATCH] correction to vertical centering and overview mode, clean up of vertical slide storage --- css/reveal.css | 8 +-- js/reveal.js | 88 ++++++++++++++++-------- js/reveal.min.js | 174 +++++++++++++++++++++++------------------------ 3 files changed, 151 insertions(+), 119 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index fd4e185..c08fb1b 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -509,7 +509,6 @@ body { width: 80%; left: 50%; top: 50%; - padding: 20px 0px; overflow: visible; z-index: 1; @@ -537,6 +536,7 @@ body { display: none; position: absolute; width: 100%; + padding: 20px 0px; z-index: 10; line-height: 1.2em; @@ -579,10 +579,10 @@ body { .reveal.center, .reveal.center .slides { min-height: auto; - padding: 0; } + /********************************************* * DEFAULT TRANSITION *********************************************/ @@ -1056,7 +1056,6 @@ body { } .reveal.overview .slides section { - padding: 20px 0; height: 600px; overflow: hidden; opacity: 1!important; @@ -1078,13 +1077,12 @@ body { .reveal.overview .slides section:hover { background: rgba(0,0,0,0.3); } - .reveal.overview .slides section.present { background: rgba(0,0,0,0.3); } .reveal.overview .slides>section.stack { - background: none; padding: 0; + background: none; overflow: visible; } diff --git a/js/reveal.js b/js/reveal.js index 6f9388d..2f81235 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.2 r42 + * reveal.js 2.2 r43 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -519,6 +519,35 @@ var Reveal = (function(){ } + /** + * Stores the vertical index of a stack so that the same + * vertical slide can be selected when navigating to and + * from the stack. + * + * @param {HTMLElement} stack The vertical stack element + * @param {int} v Index to memorize + */ + function setPreviousVerticalIndex( stack, v ) { + if( stack ) { + stack.setAttribute( 'data-previous-indexv', v || 0 ); + } + } + + /** + * Retrieves the vertical index which was stored using + * #setPreviousVerticalIndex() or 0 if no previous index + * exists. + * + * @param {HTMLElement} stack The vertical stack element + */ + function getPreviousVerticalIndex( stack ) { + if( stack && stack.classList.contains( 'stack' ) ) { + return parseInt( stack.getAttribute( 'data-previous-indexv' ) || 0 ); + } + + return 0; + } + /** * Displays the overview of slides (quick nav) by * scaling down and arranging all slide elements. @@ -547,32 +576,40 @@ var Reveal = (function(){ hslide.style.OTransform = htransform; hslide.style.transform = htransform; - if( !hslide.classList.contains( 'stack' ) ) { - // Navigate to this slide on click - hslide.addEventListener( 'click', onOverviewSlideClicked, true ); - } + if( hslide.classList.contains( 'stack' ) ) { - var verticalSlides = hslide.querySelectorAll( 'section' ); + var verticalSlides = hslide.querySelectorAll( 'section' ); - for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { - var vslide = verticalSlides[j], - vtransform = 'translate(0%, ' + ( ( j - ( i === indexh ? indexv : 0 ) ) * 105 ) + '%)'; + for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { + var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide ); - vslide.setAttribute( 'data-index-h', i ); - vslide.setAttribute( 'data-index-v', j ); - vslide.style.display = 'block'; - vslide.style.WebkitTransform = vtransform; - vslide.style.MozTransform = vtransform; - vslide.style.msTransform = vtransform; - vslide.style.OTransform = vtransform; - vslide.style.transform = vtransform; + var vslide = verticalSlides[j], + vtransform = 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)'; - // Navigate to this slide on click - vslide.addEventListener( 'click', onOverviewSlideClicked, true ); + vslide.setAttribute( 'data-index-h', i ); + vslide.setAttribute( 'data-index-v', j ); + vslide.style.display = 'block'; + vslide.style.WebkitTransform = vtransform; + vslide.style.MozTransform = vtransform; + vslide.style.msTransform = vtransform; + vslide.style.OTransform = vtransform; + vslide.style.transform = vtransform; + + // Navigate to this slide on click + vslide.addEventListener( 'click', onOverviewSlideClicked, true ); + } + } + else { + // Navigate to this slide on click + hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + + } } + layout(); + } } @@ -604,7 +641,7 @@ var Reveal = (function(){ element.removeEventListener( 'click', onOverviewSlideClicked ); } - slide(); + slide( indexh, indexv ); } } @@ -706,14 +743,14 @@ var Reveal = (function(){ // If no vertical index is specified and the upcoming slide is a // stack, resume at its previous vertical index - if( v === undefined && horizontalSlides[ h ] && horizontalSlides[ h ].classList.contains( 'stack' ) ) { - v = parseInt( horizontalSlides[ h ].getAttribute( 'data-previous-indexv' ) || 0 ); + if( v === undefined ) { + v = getPreviousVerticalIndex( horizontalSlides[ h ] ); } // If we were on a vertical stack, remember what vertical index // it was on so we can resume at the same position when returning if( previousSlide && previousSlide.parentNode.classList.contains( 'stack' ) ) { - previousSlide.parentNode.setAttribute( 'data-previous-indexv', indexv ); + setPreviousVerticalIndex( previousSlide.parentNode, indexv ); } // Remember the state before this slide @@ -1442,10 +1479,7 @@ var Reveal = (function(){ deactivateOverview(); - indexh = this.getAttribute( 'data-index-h' ); - indexv = this.getAttribute( 'data-index-v' ); - - slide(); + slide( parseInt( this.getAttribute( 'data-index-h' ) ), parseInt( this.getAttribute( 'data-index-v' ) ) ); } } diff --git a/js/reveal.min.js b/js/reveal.min.js index 5c9c797..4b8b8d6 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,96 +1,96 @@ /*! - * reveal.js 2.2 r42 + * reveal.js 2.2 r43 * http://lab.hakim.se/reveal-js * MIT licensed * * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se */ -var Reveal=(function(){var ap=".reveal .slides section",m=".reveal .slides>section",b=".reveal .slides>section.present>section",V={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:[]},ac=V.autoSlide,n=0,e=0,A,J,aq=[],f={},X="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,p="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,B=0,l=0,F=0,ah={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; -function j(ar){if((!p&&!X)){document.body.setAttribute("class","no-transforms");return;}v(V,ar);d();Z();}function S(){f.theme=document.querySelector("#theme"); -f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&V.progress){var av=document.createElement("div");av.classList.add("progress"); -av.innerHTML="";f.wrapper.appendChild(av);}if(!f.wrapper.querySelector(".controls")&&V.controls){var au=document.createElement("aside");au.classList.add("controls"); -au.innerHTML='
';f.wrapper.appendChild(au); -}if(!f.wrapper.querySelector(".state-background")){var at=document.createElement("div");at.classList.add("state-background");f.wrapper.appendChild(at); -}if(!f.wrapper.querySelector(".pause-overlay")){var ar=document.createElement("div");ar.classList.add("pause-overlay");f.wrapper.appendChild(ar);}f.progress=document.querySelector(".reveal .progress"); -f.progressbar=document.querySelector(".reveal .progress span");if(V.controls){f.controls=document.querySelector(".reveal .controls");f.controlsLeft=I(document.querySelectorAll(".navigate-left")); +var Reveal=(function(){var ar=".reveal .slides section",m=".reveal .slides>section",b=".reveal .slides>section.present>section",W={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:[]},ae=W.autoSlide,n=0,e=0,A,J,at=[],f={},Z="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,p="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,B=0,l=0,F=0,aj={startX:0,startY:0,startSpan:0,startCount:0,handled:false,threshold:80}; +function j(au){if((!p&&!Z)){document.body.setAttribute("class","no-transforms");return;}v(W,au);d();ab();}function S(){f.theme=document.querySelector("#theme"); +f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&W.progress){var ax=document.createElement("div");ax.classList.add("progress"); +ax.innerHTML="";f.wrapper.appendChild(ax);}if(!f.wrapper.querySelector(".controls")&&W.controls){var aw=document.createElement("aside");aw.classList.add("controls"); +aw.innerHTML='
';f.wrapper.appendChild(aw); +}if(!f.wrapper.querySelector(".state-background")){var av=document.createElement("div");av.classList.add("state-background");f.wrapper.appendChild(av); +}if(!f.wrapper.querySelector(".pause-overlay")){var au=document.createElement("div");au.classList.add("pause-overlay");f.wrapper.appendChild(au);}f.progress=document.querySelector(".reveal .progress"); +f.progressbar=document.querySelector(".reveal .progress span");if(W.controls){f.controls=document.querySelector(".reveal .controls");f.controlsLeft=I(document.querySelectorAll(".navigate-left")); f.controlsRight=I(document.querySelectorAll(".navigate-right"));f.controlsUp=I(document.querySelectorAll(".navigate-up"));f.controlsDown=I(document.querySelectorAll(".navigate-down")); f.controlsPrev=I(document.querySelectorAll(".navigate-prev"));f.controlsNext=I(document.querySelectorAll(".navigate-next"));}}function d(){if(navigator.userAgent.match(/(iphone|ipod|android)/i)){document.documentElement.style.overflow="scroll"; -document.body.style.height="120%";window.addEventListener("load",ai,false);window.addEventListener("orientationchange",ai,false);}}function Z(){var at=[],ax=[]; -for(var au=0,ar=V.dependencies.length;au'+av.innerHTML+"";}}}}function T(){if(V.center){var av=I(document.querySelectorAll(ap));var aw=-f.wrapper.offsetHeight/2; -for(var au=0,at=av.length;au3?"none":"block"; -}at[ax].classList.remove("past");at[ax].classList.remove("present");at[ax].classList.remove("future");if(axaA){at[ax].classList.add("future"); -}}if(ay.querySelector("section")){at[ax].classList.add("stack");}}at[aA].classList.add("present");var au=at[aA].getAttribute("data-state");if(au){aq=aq.concat(au.split(" ")); -}var aw=at[aA].getAttribute("data-autoslide");if(aw){ac=parseInt(aw);}else{ac=V.autoSlide;}}else{aA=0;}return aA;}function o(){if(V.progress&&f.progress){var au=I(document.querySelectorAll(m)); -var at=document.querySelectorAll(ap+":not(.stack)").length;var ar=0;mainLoop:for(var aw=0;aw0,right:n0,down:e0||e>0){ar+=n;}if(e>0){ar+="/"+e;}}window.location.hash=ar;}}function P(ar){var aw=n,au=e;if(ar){var ax=!!ar.parentNode.nodeName.match(/section/gi); -var av=ax?ar.parentNode:ar;var at=I(document.querySelectorAll(m));aw=Math.max(at.indexOf(av),0);if(ax){au=Math.max(I(ar.parentNode.children).indexOf(ar),0); -}}return{h:aw,v:au};}function x(){if(document.querySelector(b+".present")){var at=document.querySelectorAll(b+".present .fragment:not(.visible)");if(at.length){at[0].classList.add("visible"); -t("fragmentshown",{fragment:at[0]});return true;}}else{var ar=document.querySelectorAll(m+".present .fragment:not(.visible)");if(ar.length){ar[0].classList.add("visible"); -t("fragmentshown",{fragment:ar[0]});return true;}}return false;}function U(){if(document.querySelector(b+".present")){var at=document.querySelectorAll(b+".present .fragment.visible"); -if(at.length){at[at.length-1].classList.remove("visible");t("fragmenthidden",{fragment:at[at.length-1]});return true;}}else{var ar=document.querySelectorAll(m+".present .fragment.visible"); -if(ar.length){ar[ar.length-1].classList.remove("visible");t("fragmenthidden",{fragment:ar[ar.length-1]});return true;}}return false;}function R(){clearTimeout(l); -if(ac){l=setTimeout(z,ac);}}function D(){if(h().left&&O()||U()===false){a(n-1);}}function k(){if(h().right&&O()||x()===false){a(n+1);}}function w(){if(h().up&&O()||U()===false){a(n,e-1); -}}function H(){if(h().down&&O()||x()===false){a(n,e+1);}}function ad(){if(U()===false){if(h().up){w();}else{var ar=document.querySelector(m+".past:nth-child("+n+")"); -if(ar){e=(ar.querySelectorAll("section").length+1)||undefined;n--;a();}}}}function z(){if(x()===false){h().down?H():k();}R();}function am(au){var at=document.activeElement; -var av=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(av||au.shiftKey||au.altKey||au.ctrlKey||au.metaKey){return; -}var ar=true;switch(au.keyCode){case 80:case 33:ad();break;case 78:case 34:z();break;case 72:case 37:D();break;case 76:case 39:k();break;case 75:case 38:w(); -break;case 74:case 40:H();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:O()?aj():z();break;case 13:O()?aj():ar=false;break;case 66:case 190:ae(); -break;case 70:ag();break;default:ar=false;}if(ar){au.preventDefault();}else{if(au.keyCode===27&&X){ab();au.preventDefault();}}R();}function C(ar){ah.startX=ar.touches[0].clientX; -ah.startY=ar.touches[0].clientY;ah.startCount=ar.touches.length;if(ar.touches.length===2&&V.overview){ah.startSpan=W({x:ar.touches[1].clientX,y:ar.touches[1].clientY},{x:ah.startX,y:ah.startY}); -}}function ak(ax){if(!ah.handled){var av=ax.touches[0].clientX;var au=ax.touches[0].clientY;if(ax.touches.length===2&&ah.startCount===2&&V.overview){var aw=W({x:ax.touches[1].clientX,y:ax.touches[1].clientY},{x:ah.startX,y:ah.startY}); -if(Math.abs(ah.startSpan-aw)>ah.threshold){ah.handled=true;if(awah.threshold&&Math.abs(at)>Math.abs(ar)){ah.handled=true;D();}else{if(at<-ah.threshold&&Math.abs(at)>Math.abs(ar)){ah.handled=true;k();}else{if(ar>ah.threshold){ah.handled=true; -w();}else{if(ar<-ah.threshold){ah.handled=true;H();}}}}ax.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){ax.preventDefault();}}}function aa(ar){ah.handled=false; -}function q(ar){clearTimeout(B);B=setTimeout(function(){var at=ar.detail||-ar.wheelDelta;if(at>0){z();}else{ad();}},100);}function an(at){var ar=I(document.querySelectorAll(m)).length; -var au=Math.floor((at.clientX/f.wrapper.offsetWidth)*ar);a(au);}function y(ar){M();}function g(ar){T();}function E(ar){if(O()){ar.preventDefault();aj(); -n=this.getAttribute("data-index-h");e=this.getAttribute("data-index-v");a();}}return{initialize:j,slide:a,left:D,right:k,up:w,down:H,prev:ad,next:z,prevFragment:U,nextFragment:x,navigateTo:a,navigateLeft:D,navigateRight:k,navigateUp:w,navigateDown:H,navigatePrev:ad,navigateNext:z,toggleOverview:ab,addEventListeners:G,removeEventListeners:Y,getIndices:P,getPreviousSlide:function(){return A; -},getCurrentSlide:function(){return J;},getQueryHash:function(){var ar={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(at){ar[at.split("=").shift()]=at.split("=").pop(); -});return ar;},addEventListener:function(at,au,ar){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(at,au,ar); -}},removeEventListener:function(at,au,ar){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(at,au,ar); +document.body.style.height="120%";window.addEventListener("load",ak,false);window.addEventListener("orientationchange",ak,false);}}function ab(){var av=[],az=[]; +for(var aw=0,au=W.dependencies.length;aw'+ax.innerHTML+"";}}}}function T(){if(W.center){var ax=I(document.querySelectorAll(ar));var ay=-f.wrapper.offsetHeight/2; +for(var aw=0,av=ax.length;aw3?"none":"block"; +}av[az].classList.remove("past");av[az].classList.remove("present");av[az].classList.remove("future");if(azaC){av[az].classList.add("future"); +}}if(aA.querySelector("section")){av[az].classList.add("stack");}}av[aC].classList.add("present");var aw=av[aC].getAttribute("data-state");if(aw){at=at.concat(aw.split(" ")); +}var ay=av[aC].getAttribute("data-autoslide");if(ay){ae=parseInt(ay);}else{ae=W.autoSlide;}}else{aC=0;}return aC;}function o(){if(W.progress&&f.progress){var aw=I(document.querySelectorAll(m)); +var av=document.querySelectorAll(ar+":not(.stack)").length;var au=0;mainLoop:for(var ay=0;ay0,right:n0,down:e0||e>0){au+=n;}if(e>0){au+="/"+e;}}window.location.hash=au;}}function P(au){var ay=n,aw=e;if(au){var az=!!au.parentNode.nodeName.match(/section/gi); +var ax=az?au.parentNode:au;var av=I(document.querySelectorAll(m));ay=Math.max(av.indexOf(ax),0);if(az){aw=Math.max(I(au.parentNode.children).indexOf(au),0); +}}return{h:ay,v:aw};}function x(){if(document.querySelector(b+".present")){var av=document.querySelectorAll(b+".present .fragment:not(.visible)");if(av.length){av[0].classList.add("visible"); +t("fragmentshown",{fragment:av[0]});return true;}}else{var au=document.querySelectorAll(m+".present .fragment:not(.visible)");if(au.length){au[0].classList.add("visible"); +t("fragmentshown",{fragment:au[0]});return true;}}return false;}function U(){if(document.querySelector(b+".present")){var av=document.querySelectorAll(b+".present .fragment.visible"); +if(av.length){av[av.length-1].classList.remove("visible");t("fragmenthidden",{fragment:av[av.length-1]});return true;}}else{var au=document.querySelectorAll(m+".present .fragment.visible"); +if(au.length){au[au.length-1].classList.remove("visible");t("fragmenthidden",{fragment:au[au.length-1]});return true;}}return false;}function R(){clearTimeout(l); +if(ae){l=setTimeout(z,ae);}}function D(){if(h().left&&O()||U()===false){a(n-1);}}function k(){if(h().right&&O()||x()===false){a(n+1);}}function w(){if(h().up&&O()||U()===false){a(n,e-1); +}}function H(){if(h().down&&O()||x()===false){a(n,e+1);}}function af(){if(U()===false){if(h().up){w();}else{var au=document.querySelector(m+".past:nth-child("+n+")"); +if(au){e=(au.querySelectorAll("section").length+1)||undefined;n--;a();}}}}function z(){if(x()===false){h().down?H():k();}R();}function ao(aw){var av=document.activeElement; +var ax=!!(document.activeElement&&(document.activeElement.type||document.activeElement.href||document.activeElement.contentEditable!=="inherit"));if(ax||aw.shiftKey||aw.altKey||aw.ctrlKey||aw.metaKey){return; +}var au=true;switch(aw.keyCode){case 80:case 33:af();break;case 78:case 34:z();break;case 72:case 37:D();break;case 76:case 39:k();break;case 75:case 38:w(); +break;case 74:case 40:H();break;case 36:a(0);break;case 35:a(Number.MAX_VALUE);break;case 32:O()?al():z();break;case 13:O()?al():au=false;break;case 66:case 190:ag(); +break;case 70:ai();break;default:au=false;}if(au){aw.preventDefault();}else{if(aw.keyCode===27&&Z){ad();aw.preventDefault();}}R();}function C(au){aj.startX=au.touches[0].clientX; +aj.startY=au.touches[0].clientY;aj.startCount=au.touches.length;if(au.touches.length===2&&W.overview){aj.startSpan=X({x:au.touches[1].clientX,y:au.touches[1].clientY},{x:aj.startX,y:aj.startY}); +}}function am(az){if(!aj.handled){var ax=az.touches[0].clientX;var aw=az.touches[0].clientY;if(az.touches.length===2&&aj.startCount===2&&W.overview){var ay=X({x:az.touches[1].clientX,y:az.touches[1].clientY},{x:aj.startX,y:aj.startY}); +if(Math.abs(aj.startSpan-ay)>aj.threshold){aj.handled=true;if(ayaj.threshold&&Math.abs(av)>Math.abs(au)){aj.handled=true;D();}else{if(av<-aj.threshold&&Math.abs(av)>Math.abs(au)){aj.handled=true;k();}else{if(au>aj.threshold){aj.handled=true; +w();}else{if(au<-aj.threshold){aj.handled=true;H();}}}}az.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){az.preventDefault();}}}function ac(au){aj.handled=false; +}function q(au){clearTimeout(B);B=setTimeout(function(){var av=au.detail||-au.wheelDelta;if(av>0){z();}else{af();}},100);}function ap(av){var au=I(document.querySelectorAll(m)).length; +var aw=Math.floor((av.clientX/f.wrapper.offsetWidth)*au);a(aw);}function y(au){M();}function g(au){T();}function E(au){if(O()){au.preventDefault();al(); +a(parseInt(this.getAttribute("data-index-h")),parseInt(this.getAttribute("data-index-v")));}}return{initialize:j,slide:a,left:D,right:k,up:w,down:H,prev:af,next:z,prevFragment:U,nextFragment:x,navigateTo:a,navigateLeft:D,navigateRight:k,navigateUp:w,navigateDown:H,navigatePrev:af,navigateNext:z,toggleOverview:ad,addEventListeners:G,removeEventListeners:aa,getIndices:P,getPreviousSlide:function(){return A; +},getCurrentSlide:function(){return J;},getQueryHash:function(){var au={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(av){au[av.split("=").shift()]=av.split("=").pop(); +});return au;},addEventListener:function(av,aw,au){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(av,aw,au); +}},removeEventListener:function(av,aw,au){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(av,aw,au); }}};})(); \ No newline at end of file -- 2.26.2