From 3241cb78d8f3d9fba19e8438df50bd29d0d0bc02 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 12:51:12 -0400 Subject: [PATCH] progress bar can now be clicked to navigate (closes #181) --- css/reveal.css | 18 +++++-- js/reveal.js | 29 ++++++++-- js/reveal.min.js | 136 ++++++++++++++++++++++++----------------------- 3 files changed, 107 insertions(+), 76 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 9831255..cd6e8e5 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -253,12 +253,12 @@ body { .reveal .controls { display: none; position: fixed; - width: 100px; - height: 100px; + width: 90px; + height: 90px; z-index: 30; - right: 0; - bottom: 0; + right: 10px; + bottom: 10px; } .reveal .controls a { @@ -304,8 +304,16 @@ body { width: 100%; bottom: 0; left: 0; + z-index: 10; } - + .reveal .progress:after { + content: ''; + display: 'block'; + position: absolute; + height: 20px; + width: 100%; + top: -20px; + } .reveal .progress span { display: block; height: 100%; diff --git a/js/reveal.js b/js/reveal.js index b08580b..14e4fd7 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1,5 +1,5 @@ /*! - * reveal.js 2.1 r34 + * reveal.js 2.1 r35 * http://lab.hakim.se/reveal-js * MIT licensed * @@ -332,6 +332,10 @@ var Reveal = (function(){ document.addEventListener( 'keydown', onDocumentKeyDown, false ); } + if ( config.progress && dom.progress ) { + dom.progress.addEventListener( 'click', preventAndForward( onProgressClick ), false ); + } + if ( config.controls && dom.controls ) { dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); @@ -349,6 +353,10 @@ var Reveal = (function(){ document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false ); + + if ( config.progress && dom.progress ) { + dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false ); + } if ( config.controls && dom.controls ) { dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); @@ -392,7 +400,7 @@ var Reveal = (function(){ function preventAndForward( delegate ) { return function( event ) { event.preventDefault(); - delegate.call(); + delegate.call( null, event ); }; } @@ -1234,8 +1242,8 @@ var Reveal = (function(){ } /** - * Handles mouse wheel scrolling, throttled to avoid - * skipping multiple slides. + * Handles mouse wheel scrolling, throttled to avoid skipping + * multiple slides. */ function onDocumentMouseScroll( event ){ clearTimeout( mouseWheelTimeout ); @@ -1250,6 +1258,19 @@ var Reveal = (function(){ } }, 100 ); } + + /** + * Clicking on the progress bar results in a navigation to the + * closest approximate horizontal slide using this equation: + * + * ( clickX / presentationWidth ) * numberOfSlides + */ + function onProgressClick( event ) { + var slidesTotal = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length; + var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal ); + + slide( slideIndex ); + } /** * Handler for the window level 'hashchange' event. diff --git a/js/reveal.min.js b/js/reveal.min.js index 73053d3..b7ffeab 100644 --- a/js/reveal.min.js +++ b/js/reveal.min.js @@ -1,81 +1,83 @@ /*! - * reveal.js 2.1 r34 + * reveal.js 2.1 r35 * 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,aj=[],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(ak){if((!n&&!T)){document.body.setAttribute("class","no-transforms");return;}t(R,ak);d();V();}function P(){f.theme=document.querySelector("#theme"); -f.wrapper=document.querySelector(".reveal");if(!f.wrapper.querySelector(".progress")&&R.progress){var an=document.createElement("div");an.classList.add("progress"); -an.innerHTML="";f.wrapper.appendChild(an);}if(!f.wrapper.querySelector(".controls")&&R.controls){var am=document.createElement("aside");am.classList.add("controls"); -am.innerHTML='◄►▲▼'; -f.wrapper.appendChild(am);}if(!f.wrapper.querySelector(".state-background")){var al=document.createElement("div");al.classList.add("state-background"); -f.wrapper.appendChild(al);}if(!f.wrapper.querySelector(".pause-overlay")){var ak=document.createElement("div");ak.classList.add("pause-overlay");f.wrapper.appendChild(ak); +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"); 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 al=[],ap=[]; -for(var am=0,ak=R.dependencies.length;am'+an.innerHTML+"";}}}}function I(){if(R.overview){f.wrapper.classList.add("overview");var ak=document.querySelectorAll(l); -for(var ap=0,an=ak.length;ap'+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"; -}al[ap].classList.remove("past");al[ap].classList.remove("present");al[ap].classList.remove("future");if(apat){al[ap].classList.add("future"); -}}if(aq.querySelector("section")){al[ap].classList.add("stack");}}al[at].classList.add("present");var am=al[at].getAttribute("data-state");if(am){aj=aj.concat(am.split(" ")); -}var ao=al[at].getAttribute("data-autoslide");if(ao){Y=parseInt(ao);}else{Y=R.autoSlide;}}else{at=0;}return at;}function s(){if(R.controls&&f.controls){var ak=g(); -[f.controlsLeft,f.controlsRight,f.controlsUp,f.controlsDown].forEach(function(al){al.classList.remove("enabled");});if(ak.left){f.controlsLeft.classList.add("enabled"); -}if(ak.right){f.controlsRight.classList.add("enabled");}if(ak.up){f.controlsUp.classList.add("enabled");}if(ak.down){f.controlsDown.classList.add("enabled"); -}}}function g(){var ak=document.querySelectorAll(l),al=document.querySelectorAll(b);return{left:m>0,right:m0,down:e0||e>0){ak+=m; -}if(e>0){ak+="/"+e;}window.location.hash=ak;}}function M(ak){var ao=m,am=e;if(ak){var ap=!!ak.parentNode.nodeName.match(/section/gi);var an=ap?ak.parentNode:ak; -var al=Array.prototype.slice.call(document.querySelectorAll(l));ao=Math.max(al.indexOf(an),0);if(ap){am=Math.max(Array.prototype.slice.call(ak.parentNode.children).indexOf(ak),0); -}}return{h:ao,v:am};}function v(){if(document.querySelector(b+".present")){var al=document.querySelectorAll(b+".present .fragment:not(.visible)");if(al.length){al[0].classList.add("visible"); -r("fragmentshown",{fragment:al[0]});return true;}}else{var ak=document.querySelectorAll(l+".present .fragment:not(.visible)");if(ak.length){ak[0].classList.add("visible"); -r("fragmentshown",{fragment:ak[0]});return true;}}return false;}function Q(){if(document.querySelector(b+".present")){var al=document.querySelectorAll(b+".present .fragment.visible"); -if(al.length){al[al.length-1].classList.remove("visible");r("fragmenthidden",{fragment:al[al.length-1]});return true;}}else{var ak=document.querySelectorAll(l+".present .fragment.visible"); -if(ak.length){ak[ak.length-1].classList.remove("visible");r("fragmenthidden",{fragment:ak[ak.length-1]});return true;}}return false;}function O(){clearTimeout(k); +}function a(ar,aw){y=G;var ao=ak.concat();ak.length=0;var av=m,am=e;m=aj(l,ar===undefined?m:ar);e=aj(b,aw===undefined?e:aw);stateLoop:for(var ap=0,at=ak.length; +ap3?"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(L()||Q()===false){a(m-1,0);}}function j(){if(L()||v()===false){a(m+1,0);}}function u(){if(L()||Q()===false){a(m,e-1); -}}function F(){if(L()||v()===false){a(m,e+1);}}function Z(){if(Q()===false){if(g().up){u();}else{var ak=document.querySelector(".reveal .slides>section.past:nth-child("+m+")"); -if(ak){e=(ak.querySelectorAll("section").length+1)||0;m--;a();}}}}function x(){if(v()===false){g().down?F():j();}O();}function ah(al){if(document.querySelector(":focus")!==null||al.shiftKey||al.altKey||al.ctrlKey||al.metaKey){return; -}var ak=true;switch(al.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():ak=false;break;case 66:case 190:aa(); -break;case 70:ab();break;default:ak=false;}if(ak){al.preventDefault();}else{if(al.keyCode===27&&T){X();al.preventDefault();}}O();}function A(ak){ac.startX=ak.touches[0].clientX; -ac.startY=ak.touches[0].clientY;ac.startCount=ak.touches.length;if(ak.touches.length===2&&R.overview){ac.startSpan=S({x:ak.touches[1].clientX,y:ak.touches[1].clientY},{x:ac.startX,y:ac.startY}); -}}function af(ap){if(!ac.handled){var an=ap.touches[0].clientX;var am=ap.touches[0].clientY;if(ap.touches.length===2&&ac.startCount===2&&R.overview){var ao=S({x:ap.touches[1].clientX,y:ap.touches[1].clientY},{x:ac.startX,y:ac.startY}); -if(Math.abs(ac.startSpan-ao)>ac.threshold){ac.handled=true;if(aoac.threshold&&Math.abs(al)>Math.abs(ak)){ac.handled=true;B();}else{if(al<-ac.threshold&&Math.abs(al)>Math.abs(ak)){ac.handled=true;j();}else{if(ak>ac.threshold){ac.handled=true; -u();}else{if(ak<-ac.threshold){ac.handled=true;F();}}}}ap.preventDefault();}}}else{if(navigator.userAgent.match(/android/gi)){ap.preventDefault();}}}function W(ak){ac.handled=false; -}function o(ak){clearTimeout(z);z=setTimeout(function(){var al=ak.detail||-ak.wheelDelta;if(al>0){x();}else{Z();}},100);}function w(ak){J();}function C(ak){if(L()){ak.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,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 ak={};location.search.replace(/[A-Z0-9]+?=(\w*)/gi,function(al){ak[al.split("=").shift()]=al.split("=").pop(); -});return ak;},addEventListener:function(al,am,ak){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).addEventListener(al,am,ak); -}},removeEventListener:function(al,am,ak){if("addEventListener" in window){(f.wrapper||document.querySelector(".reveal")).removeEventListener(al,am,ak); +}}function F(){if(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(am){if(document.querySelector(":focus")!==null||am.shiftKey||am.altKey||am.ctrlKey||am.metaKey){return; +}var al=true;switch(am.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){am.preventDefault();}else{if(am.keyCode===27&&T){X();am.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,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); }}};})(); \ No newline at end of file