added optional presentation progress bar

This commit is contained in:
Hakim El Hattab 2011-12-22 00:00:29 -08:00
parent 2026c9645c
commit bdff009c74
3 changed files with 61 additions and 3 deletions

View File

@ -334,6 +334,8 @@ code {
small { small {
font-size: 60%; font-size: 60%;
line-height: 1em;
vertical-align: top;
} }
q { 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 * ROLLING LINKS
*********************************************/ *********************************************/

View File

@ -35,6 +35,9 @@
reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with 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. support for CSS 3D transforms to see it in its full glory.
</p> </p>
<p>
<i><small>- <a href="http://hakim.se">Hakim El Hattab</a></small></i>
</p>
</section> </section>
<!-- Example of nested vertical slides --> <!-- Example of nested vertical slides -->
@ -167,13 +170,16 @@ linkify( 'a' );
</section> </section>
</div> </div>
<aside class="controls"> <aside class="controls">
<a class="left" href="#">&#x25C4;</a> <a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a> <a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a> <a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a> <a class="down" href="#">&#x25BC;</a>
</aside> </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="js/reveal.js"></script>
<script src="lib/highlight.js"></script> <script src="lib/highlight.js"></script>
@ -182,6 +188,9 @@ linkify( 'a' );
// Display controls in the bottom right corner // Display controls in the bottom right corner
controls: true, controls: true,
// Display a presentation progress bar
progress: true,
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: true, rollingLinks: true,

View File

@ -59,6 +59,9 @@
* - Support for themes at initialization (default/linear/concave) * - Support for themes at initialization (default/linear/concave)
* - Code highlighting via highlight.js * - Code highlighting via highlight.js
* *
* version 1.1:
* - Optional progress bar UI element
*
* TODO: * TODO:
* - Touch/swipe interactions * - Touch/swipe interactions
* - Presentation overview via keyboard shortcut * - Presentation overview via keyboard shortcut
@ -77,6 +80,7 @@ var Reveal = (function(){
// Configurations options, including; // Configurations options, including;
// > {Boolean} controls // > {Boolean} controls
// > {Boolean} progress
// > {String} theme // > {String} theme
// > {Boolean} rollingLinks // > {Boolean} rollingLinks
config = {}, config = {},
@ -90,6 +94,7 @@ var Reveal = (function(){
*/ */
function initialize( options ) { function initialize( options ) {
// Cache references to DOM elements // Cache references to DOM elements
dom.progress = document.querySelector( 'body>progress' );
dom.controls = document.querySelector( '.controls' ); dom.controls = document.querySelector( '.controls' );
dom.controlsLeft = document.querySelector( '.controls .left' ); dom.controlsLeft = document.querySelector( '.controls .left' );
dom.controlsRight = document.querySelector( '.controls .right' ); dom.controlsRight = document.querySelector( '.controls .right' );
@ -108,12 +113,18 @@ var Reveal = (function(){
// Fall back on default options // Fall back on default options
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks; config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
config.controls = options.controls === undefined ? false : options.controls; config.controls = options.controls === undefined ? false : options.controls;
config.progress = options.progress === undefined ? false : options.progress;
config.theme = options.theme === undefined ? 'default' : options.theme; config.theme = options.theme === undefined ? 'default' : options.theme;
if( config.controls ) { if( config.controls ) {
dom.controls.style.display = 'block'; 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' ) { if( config.theme !== 'default' ) {
document.body.classList.add( config.theme ); document.body.classList.add( config.theme );
} }
@ -238,8 +249,8 @@ var Reveal = (function(){
for( var i = 0, len = nodes.length; i < len; i++ ) { for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[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.className += ' roll';
node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
} }
@ -300,6 +311,11 @@ var Reveal = (function(){
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh ); indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv ); indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
// Update progress if enabled
if( config.progress ) {
dom.progress.value = indexh;
}
updateControls(); updateControls();
writeURL(); writeURL();