From 3241cb78d8f3d9fba19e8438df50bd29d0d0bc02 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 20 Oct 2012 12:51:12 -0400 Subject: progress bar can now be clicked to navigate (closes #181) --- js/reveal.js | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) (limited to 'js/reveal.js') 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. -- cgit v1.2.3