reveal.js-toolbar

A toolbar plugin for Reveal.js to quickly access Reveal functionality. Check out the live demo

This plugin is compatible with the reveal.js-menu plugin.

Installation

Bower

Download and install the package in your project:

bower install reveal.js-toolbar

Add the plugin to the dependencies in your presentation, as below.

Reveal.initialize({
    // ...
    
    dependencies: [
        // ... 
      
        { src: 'bower_components/reveal.js-toolbar/toolbar.js' }
    ]
});

npm

Download and install the package in your project:

npm install --save reveal.js-toolbar

Add the plugin to the dependencies in your presentation, as below.

Reveal.initialize({
    // ...
    
    dependencies: [
        // ... 
      
        { src: 'node_modules/reveal.js-toolbar/toolbar.js' }
    ]
});

Manual

Copy this repository into the plugins folder of your reveal.js presentation, ie plugins/toolbar.

Add the plugin to the dependencies in your presentation, as below.

Reveal.initialize({
    // ...
    
    dependencies: [
        // ... 
      
        { src: 'plugins/toolbar/toolbar.js' }
    ]
});

Configuration

You can configure the toobar for your presentation by providing a toolbar option in the reveal.js initialization options. Note that all config values are optional and will default as specified below.

Reveal.initialize({
    // ...
 
    toolbar: {
        // Specifies where the toolbar will be shown: 'top' or 'bottom'
        position: 'bottom',
 
        // Add button to toggle fullscreen mode for the presentation
        fullscreen: false,
 
        // Add button to toggle the overview mode on and off
        overview: false,
 
        // Add button to pause (hide) the presentation display
        pause: false,
 
        // Add button to show the speaker notes
        notes: false,
 
        // Add button to show the help overlay
        help: false,
 
        // If true, the reveal.js-menu will be moved into the toolbar.
        // Set to false to leave the menu on its own.
        captureMenu: true,
 
        // If true, the playback control will be moved into the toolbar.
        // This is only relevant if the presentation is configured to autoSlide.
        // Set to false to leave the menu on its own.
        capturePlaybackControl: true,
 
        // By default the menu will load it's own font-awesome library
        // icons. If your presentation needs to load a different
        // font-awesome library the 'loadIcons' option can be set to false
        // and the menu will not attempt to load the font-awesome library.
        loadIcons: true
    },
 
});

Ready Event

A 'toolbar-ready' event is fired when reveal.js-toolbar has loaded all non-async dependencies and is ready to start.

Reveal.addEventListener( 'toolbar-ready', function( event ) {
    // your code
} );

License

MIT licensed

Copyright (C) 2017 Greg Denehy