From 7b63cda19d0811073a6246d4d36ea7438fed6bce Mon Sep 17 00:00:00 2001
From: uriel <aa@bb.cc>
Date: Wed, 30 Oct 2013 22:12:21 +0200
Subject: [PATCH] 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 a9b3888..6dc6594 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 1d9a886..fd80f70 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 9a2f7c6..09e2055 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 5aa2866..44dfe85 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 2ea3fc4..7aaf960 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 734de56..859991c 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 b8f31bc..b74d809 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 35d048e..eee7b08 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 17c3205..2b11d26 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 794911c..9718aef 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(){
'<div class="navigate-left"></div>' +
'<div class="navigate-right"></div>' +
'<div class="navigate-up"></div>' +
- '<div class="navigate-down"></div>' );
+ '<div class="navigate-down"></div>' +
+ '<div class="slide-number"></div>' );
// 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 --------------------------------//
--
GitLab