From bdff009c74dec78c012b0d8c3961bb70639404c2 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab 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.

+

+ - Hakim El Hattab +

@@ -167,13 +170,16 @@ linkify( 'a' ); - + + + + @@ -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 = '' + node.innerHTML + ''; } @@ -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();