added optional presentation progress bar

diff --git a/css/main.css b/css/main.css
index d2ab138c67f9ab77133de81803560e4c7a4277db..18a9887bde4a68e535d154135d6f0689454ff0e9 100644 (file)
--- 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 6136c92d2efcad285344b26fae30b35b76a4b183..b9fe4aef631edb9e1aea29b48bd2b966aca219ee 100644 (file)
--- 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 5afa24ad0406c141b3a8bbcf843bc0d8fbaaabad..c3323247a4e5a5a139eda71c8ce9eafb010cf1d9 100644 (file)
--- 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();