slide numbers work in pdf exports, update slide number style

1 files changed, 46 insertions, 7 deletions

diff --git a/js/reveal.js b/js/reveal.js
index 883a591..f7811fe 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( '<span class="slide-number-delimiter">/</span>' );
-				value.push( getTotalSlides() );
+				value.push( getSlidePastCount() + 1, '/', getTotalSlides() );
 			}
 			else {
 				value.push( indexh + 1 );
 
 				if( isVerticalSlide() ) {
-					value.push( '<span class="slide-number-delimiter">/</span>' );
-					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  '<span class="slide-number-a">'+ a +'</span>' +
+					'<span class="slide-number-delimiter">'+ delimiter +'</span>' +
+					'<span class="slide-number-b">'+ b +'</span>';
+		}
+		else {
+			return '<span class="slide-number-a">'+ a +'</span>';
 		}
 
 	}