diff --git a/src/plugins/progress/README.md b/src/plugins/progress/README.md new file mode 100644 index 0000000..fc1cd69 --- /dev/null +++ b/src/plugins/progress/README.md @@ -0,0 +1,46 @@ +Progress plugin +=============== + +Progressbar and pagexounter for impress.js presentations + +Usage +----- + +Add a div for progressbar and/or progress as you can see it here: + +### HTML + +
+ + +### Sample CSS + + .impress-progressbar { + position: absolute; + right: 318px; + bottom: 1px; + left: 118px; + border-radius: 7px; + border: 2px solid rgba(100, 100, 100, 0.2); + } + .impress-progressbar DIV { + width: 0; + height: 2px; + border-radius: 5px; + background: rgba(75, 75, 75, 0.4); + transition: width 1s linear; + } + .impress-progress { + position: absolute; + left: 59px; + bottom: 1px; + text-align: left; + opacity: 0.6; + } + +Feel free to change the style of your progressbar as you like by editing the CSS file. + +Author +------ + +Copyright 2014: Matthias Bilger (@m42e) diff --git a/src/plugins/progress/progress.js b/src/plugins/progress/progress.js new file mode 100644 index 0000000..85b4d26 --- /dev/null +++ b/src/plugins/progress/progress.js @@ -0,0 +1,58 @@ +/* global document */ +( function( document ) { + "use strict"; + var root; + var stepids = []; + + // Get stepids from the steps under impress root + var getSteps = function() { + stepids = []; + var steps = root.querySelectorAll( ".step" ); + for ( var i = 0; i < steps.length; i++ ) + { + stepids[ i + 1 ] = steps[ i ].id; + } + }; + + // Wait for impress.js to be initialized + document.addEventListener( "impress:init", function( event ) { + root = event.target; + getSteps(); + var gc = event.detail.api.lib.gc; + gc.addCallback( function() { + stepids = []; + if ( progressbar ) { + progressbar.style.width = ""; + } + if ( progress ) { + progress.innerHTML = ""; + } + } ); + } ); + + var progressbar = document.querySelector( "div.impress-progressbar div" ); + var progress = document.querySelector( "div.impress-progress" ); + + if ( null !== progressbar || null !== progress ) { + document.addEventListener( "impress:stepleave", function( event ) { + updateProgressbar( event.detail.next.id ); + } ); + + document.addEventListener( "impress:steprefresh", function( event ) { + getSteps(); + updateProgressbar( event.target.id ); + } ); + + } + + function updateProgressbar( slideId ) { + var slideNumber = stepids.indexOf( slideId ); + if ( null !== progressbar ) { + var width = 100 / ( stepids.length - 1 ) * ( slideNumber ); + progressbar.style.width = width.toFixed( 2 ) + "%"; + } + if ( null !== progress ) { + progress.innerHTML = slideNumber + "/" + ( stepids.length - 1 ); + } + } +} )( document );