slide numbers work in pdf exports, update slide number style

edit
Hakim El Hattab 2015-10-29 11:59:26 +01:00
parent 0198d74391
commit 0e779edb20
16 changed files with 67 additions and 86 deletions

View File

@ -34,7 +34,6 @@ html {
.nestedarrow, .nestedarrow,
.reveal .controls, .reveal .controls,
.reveal .progress, .reveal .progress,
.reveal .slide-number,
.reveal .playback, .reveal .playback,
.reveal.overview, .reveal.overview,
.fork-reveal, .fork-reveal,
@ -166,3 +165,13 @@ ul, ol, div, p {
z-index: 100; 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;
}

View File

@ -273,11 +273,14 @@ html:-moz-full-screen-ancestor {
.reveal .slide-number { .reveal .slide-number {
position: fixed; position: fixed;
display: block; display: block;
right: 15px; right: 8px;
bottom: 15px; bottom: 8px;
opacity: 0.5; opacity: 0.5;
z-index: 31; 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 { .reveal .slide-number-delimiter {
margin: 0 4px; } margin: 0 4px; }

View File

@ -329,11 +329,14 @@ html:-moz-full-screen-ancestor {
.reveal .slide-number { .reveal .slide-number {
position: fixed; position: fixed;
display: block; display: block;
right: 15px; right: 8px;
bottom: 15px; bottom: 8px;
opacity: 0.5; opacity: 0.5;
z-index: 31; 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 { .reveal .slide-number-delimiter {

View File

@ -288,9 +288,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #8b743d; }

View File

@ -284,9 +284,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #42affa; }

View File

@ -288,12 +288,6 @@ body {
-moz-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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #a23; }
.reveal p { .reveal p {
font-weight: 300; font-weight: 300;
text-shadow: 1px 1px #222; } text-shadow: 1px 1px #222; }

View File

@ -290,9 +290,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #13DAEC; }

View File

@ -288,9 +288,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #268bd2; }

View File

@ -282,9 +282,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #e7ad52; }

View File

@ -284,9 +284,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #51483D; }

View File

@ -284,9 +284,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #00008B; }

View File

@ -291,9 +291,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #3b759e; }

View File

@ -288,9 +288,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #268bd2; }

View File

@ -342,11 +342,4 @@ body {
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: $linkColor;
}

View File

@ -284,9 +284,3 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #2a76dd; }

View File

@ -542,6 +542,19 @@
document.body.style.width = pageWidth + 'px'; document.body.style.width = pageWidth + 'px';
document.body.style.height = pageHeight + '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 // Slide and slide background layout
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) { toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
@ -575,7 +588,7 @@
background.style.left = -left + 'px'; 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 ) { if( config.showNotes ) {
var notes = getSlideNotes( slide ); var notes = getSlideNotes( slide );
if( notes ) { if( notes ) {
@ -587,6 +600,18 @@
slide.appendChild( notesElement ); 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 ); value.push( getSlidePastCount() + 1 );
} }
else if( format === 'c/t' ) { else if( format === 'c/t' ) {
value.push( getSlidePastCount() + 1 ); value.push( getSlidePastCount() + 1, '/', getTotalSlides() );
value.push( '<span class="slide-number-delimiter">/</span>' );
value.push( getTotalSlides() );
} }
else { else {
value.push( indexh + 1 ); value.push( indexh + 1 );
if( isVerticalSlide() ) { 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>';
} }
} }