diff --git a/README.md b/README.md index ee978de8..40100050 100644 --- a/README.md +++ b/README.md @@ -611,11 +611,10 @@ If you would like to display the page number of the current slide you can do so Reveal.configure({ slideNumber: true }); // Slide number formatting can be configured using these variables: -// h: current slide's horizontal index -// v: current slide's vertical index -// c: current slide index (flattened) -// t: total number of slides (flattened) -Reveal.configure({ slideNumber: 'c / t' }); +// "h/v": horizontal and vertical slide numbers (default) +// "c": flattened slide number +// "c/t": flattened slide number / total slides +Reveal.configure({ slideNumber: 'c/t' }); ``` diff --git a/css/reveal.css b/css/reveal.css index 52a05a74..fc302474 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -279,6 +279,9 @@ html:-moz-full-screen-ancestor { z-index: 31; font-size: 12px; } +.reveal .slide-number-delimiter { + margin: 0 4px; } + /********************************************* * SLIDES *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 2b1546f3..f60ca780 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -336,6 +336,10 @@ html:-moz-full-screen-ancestor { font-size: 12px; } +.reveal .slide-number-delimiter { + margin: 0 4px; +} + /********************************************* * SLIDES *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index a768d688..883a591d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -2512,30 +2512,42 @@ /** * Updates the slide number div to reflect the current slide. * - * Slide number format can be defined as a string using the - * following variables: - * h: current slide's horizontal index - * v: current slide's vertical index - * c: current slide index (flattened) - * t: total number of slides (flattened) + * The following slide number formats are available: + * "h/v": horizontal and vertical slide numbers (default) + * "c": flattened slide number + * "c/t": flattened slide number / total slides */ function updateSlideNumber() { // Update slide number if enabled if( config.slideNumber && dom.slideNumber) { - // Default to only showing the current slide number - var format = 'c'; + var value = []; + var format = 'h/v'; - // Check if a custom slide number format is available + // Check if a custom number format is available if( typeof config.slideNumber === 'string' ) { format = config.slideNumber; } - dom.slideNumber.innerHTML = format.replace( /h/g, indexh ) - .replace( /v/g, indexv ) - .replace( /c/g, getSlidePastCount() + 1 ) - .replace( /t/g, getTotalSlides() ); + if( format === 'c' ) { + value.push( getSlidePastCount() + 1 ); + } + else if( format === 'c/t' ) { + value.push( getSlidePastCount() + 1 ); + value.push( '/' ); + value.push( getTotalSlides() ); + } + else { + value.push( indexh + 1 ); + + if( isVerticalSlide() ) { + value.push( '/' ); + value.push( indexv + 1 ); + } + } + + dom.slideNumber.innerHTML = value.join( '' ); } }