added optional presentation progress bar
This commit is contained in:
parent
2026c9645c
commit
bdff009c74
33
css/main.css
33
css/main.css
@ -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
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -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 -->
|
||||||
@ -175,6 +178,9 @@ linkify( 'a' );
|
|||||||
<a class="down" href="#">▼</a>
|
<a class="down" href="#">▼</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>
|
||||||
<script>
|
<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,
|
||||||
|
|
||||||
|
18
js/reveal.js
18
js/reveal.js
@ -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 );
|
||||||
}
|
}
|
||||||
@ -239,7 +250,7 @@ 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();
|
||||||
|
Loading…
Reference in New Issue
Block a user