From 0e779edb20e2c14f66a7bce4451321ef22fa8898 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 29 Oct 2015 11:59:26 +0100 Subject: [PATCH] slide numbers work in pdf exports, update slide number style --- css/print/pdf.css | 11 +++++++- css/reveal.css | 9 ++++-- css/reveal.scss | 7 +++-- css/theme/beige.css | 6 ---- css/theme/black.css | 6 ---- css/theme/blood.css | 6 ---- css/theme/league.css | 6 ---- css/theme/moon.css | 6 ---- css/theme/night.css | 6 ---- css/theme/serif.css | 6 ---- css/theme/simple.css | 6 ---- css/theme/sky.css | 6 ---- css/theme/solarized.css | 6 ---- css/theme/template/theme.scss | 7 ----- css/theme/white.css | 6 ---- js/reveal.js | 53 ++++++++++++++++++++++++++++++----- 16 files changed, 67 insertions(+), 86 deletions(-) diff --git a/css/print/pdf.css b/css/print/pdf.css index f78344ce..868142ea 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -34,7 +34,6 @@ html { .nestedarrow, .reveal .controls, .reveal .progress, -.reveal .slide-number, .reveal .playback, .reveal.overview, .fork-reveal, @@ -166,3 +165,13 @@ ul, ol, div, p { z-index: 100; } +/* Display slide numbers when 'slideNumber' is enabled */ +.reveal .slide-number { + display: none; +} +.reveal .slide-number-pdf { + display: block; + position: absolute; + font-size: 14px; +} + diff --git a/css/reveal.css b/css/reveal.css index fc302474..3dda05e8 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -273,11 +273,14 @@ html:-moz-full-screen-ancestor { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; + right: 8px; + bottom: 8px; opacity: 0.5; z-index: 31; - font-size: 12px; } + font-size: 12px; + color: #fff; + background-color: rgba(0, 0, 0, 0.6); + padding: 5px; } .reveal .slide-number-delimiter { margin: 0 4px; } diff --git a/css/reveal.scss b/css/reveal.scss index f60ca780..63b1a908 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -329,11 +329,14 @@ html:-moz-full-screen-ancestor { .reveal .slide-number { position: fixed; display: block; - right: 15px; - bottom: 15px; + right: 8px; + bottom: 8px; opacity: 0.5; z-index: 31; font-size: 12px; + color: #fff; + background-color: rgba( 0, 0, 0, 0.6 ); + padding: 5px; } .reveal .slide-number-delimiter { diff --git a/css/theme/beige.css b/css/theme/beige.css index e7722ce4..be187339 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #8b743d; } diff --git a/css/theme/black.css b/css/theme/black.css index 10ec7e1e..54d44c3c 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #42affa; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 84d7d9e7..e035ab6e 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -288,12 +288,6 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #a23; } - .reveal p { font-weight: 300; text-shadow: 1px 1px #222; } diff --git a/css/theme/league.css b/css/theme/league.css index 1f6a8a15..fa9f53ce 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -290,9 +290,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #13DAEC; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 1c81cf92..b1195764 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/night.css b/css/theme/night.css index 748a94f2..3d0e3c5c 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -282,9 +282,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #e7ad52; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 2817e0fa..736c0b5f 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #51483D; } diff --git a/css/theme/simple.css b/css/theme/simple.css index c65e8ce9..20d919d7 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #00008B; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 37ce5217..e762a501 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -291,9 +291,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #3b759e; } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index be2fa226..bf2f651c 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -288,9 +288,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #268bd2; } diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 91eeca71..9bb416ac 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -342,11 +342,4 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: $linkColor; -} - diff --git a/css/theme/white.css b/css/theme/white.css index ffa687ef..a05cd854 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -284,9 +284,3 @@ body { -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } - -/********************************************* - * SLIDE NUMBER - *********************************************/ -.reveal .slide-number { - color: #2a76dd; } diff --git a/js/reveal.js b/js/reveal.js index 883a591d..f7811fe6 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -542,6 +542,19 @@ document.body.style.width = pageWidth + 'px'; document.body.style.height = pageHeight + 'px'; + // Add each slide's index as attributes on itself, we need these + // indices to generate slide numbers below + toArray( dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).forEach( function( hslide, h ) { + hslide.setAttribute( 'data-index-h', h ); + + if( hslide.classList.contains( 'stack' ) ) { + toArray( hslide.querySelectorAll( 'section' ) ).forEach( function( vslide, v ) { + vslide.setAttribute( 'data-index-h', h ); + vslide.setAttribute( 'data-index-v', v ); + } ); + } + } ); + // Slide and slide background layout toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { @@ -575,7 +588,7 @@ background.style.left = -left + 'px'; } - // If we're configured to `showNotes`, inject them into each slide + // Inject notes if `showNotes` is enabled if( config.showNotes ) { var notes = getSlideNotes( slide ); if( notes ) { @@ -587,6 +600,18 @@ slide.appendChild( notesElement ); } } + + // Inject slide numbers if `slideNumbers` are enabled + if( config.slideNumber ) { + var slideNumberH = parseInt( slide.getAttribute( 'data-index-h' ), 10 ) + 1, + slideNumberV = parseInt( slide.getAttribute( 'data-index-v' ), 10 ) + 1; + + var numberElement = document.createElement( 'div' ); + numberElement.classList.add( 'slide-number' ); + numberElement.classList.add( 'slide-number-pdf' ); + numberElement.innerHTML = formatSlideNumber( slideNumberH, '/', slideNumberV ); + background.appendChild( numberElement ); + } } } ); @@ -2534,20 +2559,34 @@ value.push( getSlidePastCount() + 1 ); } else if( format === 'c/t' ) { - value.push( getSlidePastCount() + 1 ); - value.push( '/' ); - value.push( getTotalSlides() ); + value.push( getSlidePastCount() + 1, '/', getTotalSlides() ); } else { value.push( indexh + 1 ); if( isVerticalSlide() ) { - value.push( '/' ); - value.push( indexv + 1 ); + value.push( '/', indexv + 1 ); } } - dom.slideNumber.innerHTML = value.join( '' ); + dom.slideNumber.innerHTML = formatSlideNumber( value[0], value[1], value[2] ); + } + + } + + /** + * Applies HTML formatting to a slide number before it's + * written to the DOM. + */ + function formatSlideNumber( a, delimiter, b ) { + + if( typeof b === 'number' && !isNaN( b ) ) { + return ''+ a +'' + + ''+ delimiter +'' + + ''+ b +''; + } + else { + return ''+ a +''; } }