Added optional progress bar - fixes jdan#16

README.md

@@ -92,6 +92,8 @@ the following fields.
 * **controls**: Option whether or not arrow buttons should be included (default: *true*)
 * **agenda**: Option whether or not to insert an agenda slide (similar to a table of contents) after the title (default: *false*)
 * **encoding**: A specified content encoding (default: *utf-8*)
+* **progress*: Option whether or not to display a small progress bar at the top of the page
+(default: *true*)
 
 **Power Users**
 

lib/cleaver.js

@@ -109,11 +109,13 @@ Cleaver.prototype._loadAssets = function () {
  */
 Cleaver.prototype._renderSlideshow = function () {
   var putControls = this.metadata.controls || (this.metadata.controls === undefined);
+  var putProgress = this.metadata.progress || (this.metadata.progress === undefined);
 
   // Render the slides in a template (maybe as specified by the user)
   var slideshow = mustache.render(this.templates.loaded.slides, {
     slides: this.slides,
     controls: putControls,
+    progress: putProgress,
     // TODO: uglify navigation.js?
     navigation: this.resources.loaded.navigation
   });

resources/default.css

@@ -148,3 +148,15 @@ pre > code {
   display: none;
 }
 
+.progress {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: 5px;
+  background-color: #bbb;
+}
+
+.progress-bar {
+  width: 0%;
+  height: 5px;
+  background-color: #eee;
+}

resources/navigation.js

@@ -11,6 +11,7 @@ function goBack() {
   wrapper.removeChild(lastSlide);
   wrapper.insertBefore(lastSlide, wrapper.firstChild);
 
+  setCurrentProgress();
   updateURL();
 }
 
@@ -27,6 +28,7 @@ function goForward() {
   wrapper.removeChild(firstSlide);
   wrapper.appendChild(firstSlide);
 
+  setCurrentProgress();
   updateURL();
 }
 
@@ -65,6 +67,21 @@ function setPageNumbers() {
   }
 }
 
+/**
+ * Set the current progress indicator.
+ */
+function setCurrentProgress() {
+  var wrapper = document.querySelector('#wrapper');
+  var progressBar = document.querySelector('.progress-bar');
+
+  if (progressBar !== null) {
+    var pagesNumber    = wrapper.querySelectorAll('section').length;
+    var currentNumber  = parseInt(currentPage());
+    var currentPercent = pagesNumber === 1 ? 100 : 100 * currentNumber / (pagesNumber - 1);
+    progressBar.style.width = currentPercent.toString() + '%';
+  }
+}
+
 /**
  * Go to the specified page of content.
  */

templates/default.mustache

@@ -1,3 +1,9 @@
+{{#progress}}
+  <div class="progress">
+    <div class="progress-bar"></div>
+  </div>
+{{/progress}}
+
 <div id="wrapper">
   {{#slides}}
     <section class="slide">{{{.}}}</section>