From 7b63cda19d0811073a6246d4d36ea7438fed6bce Mon Sep 17 00:00:00 2001 From: uriel Date: Wed, 30 Oct 2013 22:12:21 +0200 Subject: [PATCH 1/4] Added slide numbers options and the css files updated as well. the *.min.js didn't chaged yet. --- css/reveal.css | 9 +++++++++ css/theme/beige.css | 4 ++++ css/theme/default.css | 4 ++++ css/theme/moon.css | 4 ++++ css/theme/night.css | 3 +++ css/theme/serif.css | 3 +++ css/theme/simple.css | 3 +++ css/theme/sky.css | 3 +++ css/theme/solarized.css | 3 +++ js/reveal.js | 36 ++++++++++++++++++++++++++++++++++-- 10 files changed, 70 insertions(+), 2 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index a9b3888a..6dc6594c 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -391,6 +391,15 @@ body { transition: all 0.2s ease; } +.reveal .controls .slide-number { + font-size: 11px; + top: 10px; + left: -10px; + opacity: 0.5; + width: 45px; + text-align: center; +} + .reveal .controls div.enabled { opacity: 0.7; cursor: pointer; diff --git a/css/theme/beige.css b/css/theme/beige.css index 1d9a8864..fd80f70d 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -115,6 +115,10 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } +.reveal .controls .slide-number { + color: #8b743d; +} + .reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } diff --git a/css/theme/default.css b/css/theme/default.css index 9a2f7c6e..09e2055d 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -115,6 +115,10 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } +.reveal .controls .slide-number { + color: #13daec; +} + .reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } diff --git a/css/theme/moon.css b/css/theme/moon.css index 5aa28665..44dfe85d 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -115,6 +115,10 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } +.reveal .controls .slide-number { + color: #268bd2; +} + .reveal .controls div.navigate-left.enabled:hover { border-right-color: #78b9e6; } diff --git a/css/theme/night.css b/css/theme/night.css index 2ea3fc49..7aaf9603 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -103,6 +103,9 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #e7ad52; } +.reveal .controls .slide-number { + color: #e7ad52; +} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #f3d7ac; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 734de56f..859991ce 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -105,6 +105,9 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } +.reveal .controls .slide-number { + color: #51483d; +} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } diff --git a/css/theme/simple.css b/css/theme/simple.css index b8f31bc5..b74d809d 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -105,6 +105,9 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } +.reveal .controls .slide-number { + color: darkblue; +} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } diff --git a/css/theme/sky.css b/css/theme/sky.css index 35d048e7..eee7b083 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -112,6 +112,9 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } +.reveal .controls .slide-number { + color: #3b759e; +} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 17c32056..2b11d264 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -115,6 +115,9 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } +.reveal .controls .slide-number { + color: #268bd2; +} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #78b9e6; } diff --git a/js/reveal.js b/js/reveal.js index 794911c5..9718aeff 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -96,7 +96,10 @@ var Reveal = (function(){ viewDistance: 3, // Script dependencies to load - dependencies: [] + dependencies: [], + + // Indicates whether to show the slides number + showSlideNumber: false }, // Flags if reveal.js is loaded (has dispatched the 'ready' event) @@ -347,7 +350,8 @@ var Reveal = (function(){ '' + '' + '' + - '' ); + '' + + '
' ); // State background element [DEPRECATED] createSingletonNode( dom.wrapper, 'div', 'state-background', null ); @@ -366,6 +370,7 @@ var Reveal = (function(){ dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); + dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' )); } /** @@ -591,6 +596,11 @@ var Reveal = (function(){ dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } ); } ); + if( config.showSlideNumber ) { + ['ready', 'slidechanged'].forEach( function(eventName) { + document.addEventListener( eventName, onSlideChanged, false ); + } ); + } } /** @@ -627,6 +637,11 @@ var Reveal = (function(){ dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } ); } ); + if( config.showSlideNumber ) { + ['ready', 'slidechanged'].forEach( function(eventName) { + document.removeEventListener( eventName, onSlideChanged, false ); + } ); + } } /** @@ -2636,6 +2651,23 @@ var Reveal = (function(){ } + /** + * Invoked when slide changed and on the first time slides are ready + */ + function onSlideChanged( event ) { + var element = dom.slideNumbers; + + // change the number of the page using 'indexh/indexv' format + var indexString = ( event.indexh + 1 ).toString(); + if( indexv > 0 ) { + indexString += ' / ' + indexv.toString(); + } + + element.forEach( function( elm ) { + elm.innerHTML = indexString; + } ); + } + // --------------------------------------------------------------------// // ------------------------------- API --------------------------------// From dda885b71abcf0ecc753bcda3e639f6aea352632 Mon Sep 17 00:00:00 2001 From: uriel Date: Thu, 31 Oct 2013 00:49:07 +0200 Subject: [PATCH 2/4] move the slide-number out of the controls to a proper position and little fix to the updating event. --- css/reveal.css | 24 ++++++++++------- css/theme/beige.css | 11 +++++--- css/theme/default.css | 11 +++++--- css/theme/moon.css | 11 +++++--- css/theme/night.css | 10 ++++--- css/theme/serif.css | 10 ++++--- css/theme/simple.css | 10 ++++--- css/theme/sky.css | 10 ++++--- css/theme/solarized.css | 10 ++++--- js/reveal.js | 60 +++++++++++++++++++---------------------- 10 files changed, 98 insertions(+), 69 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 6dc6594c..77494bd4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -391,15 +391,6 @@ body { transition: all 0.2s ease; } -.reveal .controls .slide-number { - font-size: 11px; - top: 10px; - left: -10px; - opacity: 0.5; - width: 45px; - text-align: center; -} - .reveal .controls div.enabled { opacity: 0.7; cursor: pointer; @@ -485,6 +476,21 @@ body { transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } +/********************************************* + * SLIDE NUMBER + *********************************************/ + +.reveal .slide-number { + position: fixed; + display: block; + opacity: 0.5; + z-index: 31; + width: 110px; + bottom: 58px; + right: 11px; + font-size: 12px; + text-align: center; +} /********************************************* * SLIDES diff --git a/css/theme/beige.css b/css/theme/beige.css index fd80f70d..7caa3d88 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -115,10 +115,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #8b743d; } -.reveal .controls .slide-number { - color: #8b743d; -} - .reveal .controls div.navigate-left.enabled:hover { border-right-color: #c0a86e; } @@ -131,6 +127,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #c0a86e; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #8b743d; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/default.css b/css/theme/default.css index 09e2055d..60c40a31 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -115,10 +115,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #13daec; } -.reveal .controls .slide-number { - color: #13daec; -} - .reveal .controls div.navigate-left.enabled:hover { border-right-color: #71e9f4; } @@ -131,6 +127,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #71e9f4; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #13daec; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/moon.css b/css/theme/moon.css index 44dfe85d..13831ac4 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -115,10 +115,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls .slide-number { - color: #268bd2; -} - .reveal .controls div.navigate-left.enabled:hover { border-right-color: #78b9e6; } @@ -131,6 +127,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #78b9e6; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #268bd2; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/night.css b/css/theme/night.css index 7aaf9603..609442bf 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -103,9 +103,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #e7ad52; } -.reveal .controls .slide-number { - color: #e7ad52; -} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #f3d7ac; } @@ -118,6 +115,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #f3d7ac; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #e7ad52; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/serif.css b/css/theme/serif.css index 859991ce..16d1ab0a 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -105,9 +105,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #51483d; } -.reveal .controls .slide-number { - color: #51483d; -} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #8b7c69; } @@ -120,6 +117,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #8b7c69; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #51483d; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/simple.css b/css/theme/simple.css index b74d809d..c6a12943 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -105,9 +105,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: darkblue; } -.reveal .controls .slide-number { - color: darkblue; -} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #0000f1; } @@ -120,6 +117,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #0000f1; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: darkblue; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/sky.css b/css/theme/sky.css index eee7b083..983def23 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -112,9 +112,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #3b759e; } -.reveal .controls .slide-number { - color: #3b759e; -} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #74a7cb; } @@ -127,6 +124,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #74a7cb; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #3b759e; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 2b11d264..7bf28456 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -115,9 +115,6 @@ body { .reveal .controls div.navigate-down.enabled { border-top-color: #268bd2; } -.reveal .controls .slide-number { - color: #268bd2; -} .reveal .controls div.navigate-left.enabled:hover { border-right-color: #78b9e6; } @@ -130,6 +127,13 @@ body { .reveal .controls div.navigate-down.enabled:hover { border-top-color: #78b9e6; } +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #268bd2; +} + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/js/reveal.js b/js/reveal.js index 9718aeff..136dc933 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -350,8 +350,10 @@ var Reveal = (function(){ '' + '' + '' + - '' + - '
' ); + '' ); + + // slide number + createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); // State background element [DEPRECATED] createSingletonNode( dom.wrapper, 'div', 'state-background', null ); @@ -370,7 +372,7 @@ var Reveal = (function(){ dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) ); dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) ); - dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' )); + dom.slideNumber = document.querySelector( '.slide-number' ); } /** @@ -595,12 +597,6 @@ var Reveal = (function(){ dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } ); dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } ); } ); - - if( config.showSlideNumber ) { - ['ready', 'slidechanged'].forEach( function(eventName) { - document.addEventListener( eventName, onSlideChanged, false ); - } ); - } } /** @@ -636,12 +632,6 @@ var Reveal = (function(){ dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } ); dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } ); } ); - - if( config.showSlideNumber ) { - ['ready', 'slidechanged'].forEach( function(eventName) { - document.removeEventListener( eventName, onSlideChanged, false ); - } ); - } } /** @@ -1548,6 +1538,7 @@ var Reveal = (function(){ updateControls(); updateProgress(); updateBackground(); + updateSlideNumber(); // Update the URL hash writeURL(); @@ -1580,7 +1571,7 @@ var Reveal = (function(){ updateControls(); updateProgress(); updateBackground(); - + updateSlideNumber(); } /** @@ -1789,6 +1780,26 @@ var Reveal = (function(){ } + /** + * Updates the slide number div to reflect the current slide. + */ + function updateSlideNumber() { + + // Update slide number if enabled + if( config.showSlideNumber && dom.slideNumber) + { + var element = dom.slideNumber; + + // change the number of the page using 'indexh - indexv' format + var indexString = ( indexh + 1 ).toString(); + if( indexv > 0 ) { + indexString += ' - ' + indexv.toString(); + } + + element.innerHTML = indexString; + } + } + /** * Updates the state of all control/navigation arrows. */ @@ -2651,23 +2662,6 @@ var Reveal = (function(){ } - /** - * Invoked when slide changed and on the first time slides are ready - */ - function onSlideChanged( event ) { - var element = dom.slideNumbers; - - // change the number of the page using 'indexh/indexv' format - var indexString = ( event.indexh + 1 ).toString(); - if( indexv > 0 ) { - indexString += ' / ' + indexv.toString(); - } - - element.forEach( function( elm ) { - elm.innerHTML = indexString; - } ); - } - // --------------------------------------------------------------------// // ------------------------------- API --------------------------------// From 06078f987fc10192d72d255af73b74182b424997 Mon Sep 17 00:00:00 2001 From: uriel Date: Thu, 31 Oct 2013 00:51:34 +0200 Subject: [PATCH 3/4] synthetic fix --- css/reveal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/reveal.css b/css/reveal.css index 77494bd4..4e5c8ea5 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -486,7 +486,7 @@ body { opacity: 0.5; z-index: 31; width: 110px; - bottom: 58px; + bottom: 60px; right: 11px; font-size: 12px; text-align: center; From f1dd807f662da68ef240f0746794077072d49036 Mon Sep 17 00:00:00 2001 From: uriel Date: Thu, 31 Oct 2013 19:47:13 +0200 Subject: [PATCH 4/4] change SlidesNumber position and start page counter at 0 instead 1 --- css/reveal.css | 5 +++-- js/reveal.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 4e5c8ea5..d5204d01 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -486,10 +486,11 @@ body { opacity: 0.5; z-index: 31; width: 110px; - bottom: 60px; - right: 11px; + bottom: 30px; + left: 11px; font-size: 12px; text-align: center; + letter-spacing: 0px } /********************************************* diff --git a/js/reveal.js b/js/reveal.js index 136dc933..619d8d2d 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -1791,9 +1791,9 @@ var Reveal = (function(){ var element = dom.slideNumber; // change the number of the page using 'indexh - indexv' format - var indexString = ( indexh + 1 ).toString(); + var indexString = indexh; if( indexv > 0 ) { - indexString += ' - ' + indexv.toString(); + indexString += ' - ' + indexv; } element.innerHTML = indexString;