From bdff009c74dec78c012b0d8c3961bb70639404c2 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Thu, 22 Dec 2011 00:00:29 -0800
Subject: [PATCH] added optional presentation progress bar

---
 css/main.css | 33 +++++++++++++++++++++++++++++++++
 index.html   | 11 ++++++++++-
 js/reveal.js | 20 ++++++++++++++++++--
 3 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index d2ab138..18a9887 100644
--- a/css/main.css
+++ b/css/main.css
@@ -334,6 +334,8 @@ code {
 
 small {
 	font-size: 60%;
+	line-height: 1em;
+	vertical-align: top;
 }
 
 q {	
@@ -440,6 +442,37 @@ section img {
 
 	}
 
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+
+progress::-webkit-progress-bar {
+	background: rgba(0,0,0,0.2);
+}
+
+progress::-moz-progress-bar {
+	background: hsl(185, 85%, 50%);
+}
+
+progress::-webkit-progress-value {
+	background: hsl(185, 85%, 50%);
+}
+
+progress {
+	position: absolute;
+	height: 4px;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+
+	border: 0;
+	outline: 0;
+	background: none;
+}
+
 /*********************************************
  * ROLLING LINKS
  *********************************************/
diff --git a/index.html b/index.html
index 6136c92..b9fe4ae 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,9 @@
 					reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with 
 					support for CSS 3D transforms to see it in its full glory.
 				</p>
+				<p>
+					<i><small>- <a href="http://hakim.se">Hakim El Hattab</a></small></i>
+				</p>
 			</section>
 			
 			<!-- Example of nested vertical slides -->
@@ -167,13 +170,16 @@ linkify( 'a' );
 			</section>
 			
 		</div>
-
+		
 		<aside class="controls">
 			<a class="left" href="#">&#x25C4;</a>
 			<a class="right" href="#">&#x25BA;</a>
 			<a class="up" href="#">&#x25B2;</a>
 			<a class="down" href="#">&#x25BC;</a>
 		</aside>
+
+		<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
+		<progress min=0 max=100 value=0></progress>
 		
 		<script src="js/reveal.js"></script>
 		<script src="lib/highlight.js"></script>
@@ -182,6 +188,9 @@ linkify( 'a' );
 				// Display controls in the bottom right corner
 				controls: true,
 
+				// Display a presentation progress bar
+				progress: true,
+
 				// Apply a 3D roll to links on hover
 				rollingLinks: true,
 
diff --git a/js/reveal.js b/js/reveal.js
index 5afa24a..c332324 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -59,6 +59,9 @@
  * - Support for themes at initialization (default/linear/concave)
  * - Code highlighting via highlight.js
  * 
+ * version 1.1:
+ * - Optional progress bar UI element
+ * 
  * TODO:
  * - Touch/swipe interactions
  * - Presentation overview via keyboard shortcut
@@ -77,6 +80,7 @@ var Reveal = (function(){
 
 		// Configurations options, including;
 		// > {Boolean} controls
+		// > {Boolean} progress
 		// > {String} theme
 		// > {Boolean} rollingLinks
 		config = {},
@@ -90,6 +94,7 @@ var Reveal = (function(){
 	 */
 	function initialize( options ) {
 		// Cache references to DOM elements
+		dom.progress = document.querySelector( 'body>progress' );
 		dom.controls = document.querySelector( '.controls' );
 		dom.controlsLeft = document.querySelector( '.controls .left' );
 		dom.controlsRight = document.querySelector( '.controls .right' );
@@ -108,12 +113,18 @@ var Reveal = (function(){
 		// Fall back on default options
 		config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
 		config.controls = options.controls === undefined ? false : options.controls;
+		config.progress = options.progress === undefined ? false : options.progress;
 		config.theme = options.theme === undefined ? 'default' : options.theme;
 
 		if( config.controls ) {
 			dom.controls.style.display = 'block';
 		}
 
+		if( config.progress ) {
+			dom.progress.style.display = 'block';
+			dom.progress.max = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1;
+		}
+
 		if( config.theme !== 'default' ) {
 			document.body.classList.add( config.theme );
 		}
@@ -238,8 +249,8 @@ var Reveal = (function(){
 
 	        for( var i = 0, len = nodes.length; i < len; i++ ) {
 	            var node = nodes[i];
-
-	            if( !node.className || !node.className.match( /roll/g ) ) {
+	            
+	            if( node.textContent && ( !node.className || !node.className.match( /roll/g ) ) ) {
 	                node.className += ' roll';
 	                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
 	            }
@@ -300,6 +311,11 @@ var Reveal = (function(){
 		indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
 		indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
 
+		// Update progress if enabled
+		if( config.progress ) {
+			dom.progress.value = indexh;
+		}
+
 		updateControls();
 		
 		writeURL();