progress bar can now be clicked to navigate (closes #181)

This commit is contained in:
Hakim El Hattab 2012-10-20 12:51:12 -04:00
parent ecb4347ec1
commit 3241cb78d8
3 changed files with 107 additions and 76 deletions

View File

@ -253,12 +253,12 @@ body {
.reveal .controls { .reveal .controls {
display: none; display: none;
position: fixed; position: fixed;
width: 100px; width: 90px;
height: 100px; height: 90px;
z-index: 30; z-index: 30;
right: 0; right: 10px;
bottom: 0; bottom: 10px;
} }
.reveal .controls a { .reveal .controls a {
@ -304,8 +304,16 @@ body {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10;
} }
.reveal .progress:after {
content: '';
display: 'block';
position: absolute;
height: 20px;
width: 100%;
top: -20px;
}
.reveal .progress span { .reveal .progress span {
display: block; display: block;
height: 100%; height: 100%;

View File

@ -1,5 +1,5 @@
/*! /*!
* reveal.js 2.1 r34 * reveal.js 2.1 r35
* http://lab.hakim.se/reveal-js * http://lab.hakim.se/reveal-js
* MIT licensed * MIT licensed
* *
@ -332,6 +332,10 @@ var Reveal = (function(){
document.addEventListener( 'keydown', onDocumentKeyDown, false ); document.addEventListener( 'keydown', onDocumentKeyDown, false );
} }
if ( config.progress && dom.progress ) {
dom.progress.addEventListener( 'click', preventAndForward( onProgressClick ), false );
}
if ( config.controls && dom.controls ) { if ( config.controls && dom.controls ) {
dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false ); dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
@ -349,6 +353,10 @@ var Reveal = (function(){
document.removeEventListener( 'touchmove', onDocumentTouchMove, false ); document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
document.removeEventListener( 'touchend', onDocumentTouchEnd, false ); document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
window.removeEventListener( 'hashchange', onWindowHashChange, false ); window.removeEventListener( 'hashchange', onWindowHashChange, false );
if ( config.progress && dom.progress ) {
dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false );
}
if ( config.controls && dom.controls ) { if ( config.controls && dom.controls ) {
dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false ); dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
@ -392,7 +400,7 @@ var Reveal = (function(){
function preventAndForward( delegate ) { function preventAndForward( delegate ) {
return function( event ) { return function( event ) {
event.preventDefault(); event.preventDefault();
delegate.call(); delegate.call( null, event );
}; };
} }
@ -1234,8 +1242,8 @@ var Reveal = (function(){
} }
/** /**
* Handles mouse wheel scrolling, throttled to avoid * Handles mouse wheel scrolling, throttled to avoid skipping
* skipping multiple slides. * multiple slides.
*/ */
function onDocumentMouseScroll( event ){ function onDocumentMouseScroll( event ){
clearTimeout( mouseWheelTimeout ); clearTimeout( mouseWheelTimeout );
@ -1250,6 +1258,19 @@ var Reveal = (function(){
} }
}, 100 ); }, 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. * Handler for the window level 'hashchange' event.

136
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long