Skip to content

tkrkt/reveal.js-elapsed-time-bar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

reveal.js Elapsed-Time-Bar Plugin

A reveal.js plugin adding progress bar of elapsed time, inspired by rabbit.

Keeping to time in presentations!

Check out the live demo

Installation

Copy the folder plugin/elapsed-time-bar into plugin folder of your reveal.js project.

Add the plugins to the dependencies and set allottedTime property, like this:

Reveal.initialize({
  // ...
  
  // your allotted time for presentation
  allottedTime: 3 * 60 * 1000, // 3 minutes
  
  dependencies: [
    // ...

    { src: 'plugin/elapsed-time-bar/elapsed-time-bar.js'}
  ]
});

Configurations

Reveal.initialize({
  // ...

  // - (required) your allotted time for presentation
  allottedTime: 3 * 60 * 1000, // 3 minutes

  // - (optional) height of page/time progress bar
  progressBarHeight: 3,

  // - (optional) bar color
  barColor: 'rgb(200,0,0)',

  // - (optional) bar color when timer is paused
  pausedBarColor: 'rgba(200,0,0,.6)',
});

API

You can use APIs from global ElapsedTimeBar object.

property description
isPaused true if timer is paused
isFinished true when you run out of your allotted time
start(allottedTime [,elapsedTime=0]) start timer with new allotted time
reset() reset timer
pause() pause timer
resume() resume timer

Keyboard binding example

Reveal.initialize({
  // ...

  keyboard: {
    // pause/resume time when Enter is pressed
    13: () => {
      ElapsedTimeBar.isPaused ? ElapsedTimeBar.resume() : ElapsedTimeBar.pause();
    },
    // reset timer when 'r' is pressed
    82: () => {
      ElapsedTimeBar.reset();
    }
  }
});

License

MIT

About

A Reveal.js plugin adding progress bar of elapsed time.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published