phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added optional presentation progress bar

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css
View File

@ -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
*********************************************/

11
index.html
View File

@ -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,

20
js/reveal.js
View File

@ -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();