From dda885b71abcf0ecc753bcda3e639f6aea352632 Mon Sep 17 00:00:00 2001
From: uriel <aa@bb.cc>
Date: Thu, 31 Oct 2013 00:49:07 +0200
Subject: [PATCH] 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 6dc6594..77494bd 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 fd80f70..7caa3d8 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 09e2055..60c40a3 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 44dfe85..13831ac 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 7aaf960..609442b 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 859991c..16d1ab0 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 b74d809..c6a1294 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 eee7b08..983def2 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 2b11d26..7bf2845 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 9718aef..136dc93 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -350,8 +350,10 @@ var Reveal = (function(){
'<div class="navigate-left"></div>' +
'<div class="navigate-right"></div>' +
'<div class="navigate-up"></div>' +
- '<div class="navigate-down"></div>' +
- '<div class="slide-number"></div>' );
+ '<div class="navigate-down"></div>' );
+
+ // 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 --------------------------------//
--
GitLab