slide numbers work in pdf exports, update slide number style

16 files changed, 67 insertions, 86 deletions

diff --git a/css/print/pdf.css b/css/print/pdf.css
index f78344c..868142e 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 fc30247..3dda05e 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 f60ca78..63b1a90 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 e7722ce..be18733 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 10ec7e1..54d44c3 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 84d7d9e..e035ab6 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 1f6a8a1..fa9f53c 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 1c81cf9..b119576 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 748a94f..3d0e3c5 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 2817e0f..736c0b5 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 c65e8ce..20d919d 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 37ce521..e762a50 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 be2fa22..bf2f651 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 91eeca7..9bb416a 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 ffa687e..a05cd85 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 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>';
 		}
 
 	}