diff options
| -rw-r--r-- | css/main.css | 33 | ||||
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | 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 *********************************************/ @@ -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="#">◄</a> <a class="right" href="#">►</a> <a class="up" href="#">▲</a> <a class="down" href="#">▼</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(); |