Files
impress.js/src/plugins/toolbar
Henrik Ingo 3bb704578a Add toolbar plugin
The toolbar plugin produces a generic toolbar container, which then can contain
buttons, drop-downs or any html inside it. The user can position and otherwise
style the toolbar, and any widgets inside it will follow.

Other plugins that wish to expose graphical controls (navigation-ui, autoplay)
will use the impress:toolbar:appendChild event to 'send' their controls to
this plugin.
2017-10-30 17:07:14 +02:00
..
2017-10-30 17:07:14 +02:00
2017-10-30 17:07:14 +02:00

Toolbar plugin

This plugin provides a generic graphical toolbar. Other plugins that want to expose a button or other widget, can add those to this toolbar.

Using a single consolidated toolbar for all GUI widgets makes it easier to position and style the toolbar rather than having to do that for lots of different divs.

To add/activate the toolbar in your presentation, add this div:

<div id="impress-toolbar"></div>

Styling the toolbar is left to presentation author. Here's an example CSS:

.impress-enabled div#impress-toolbar {
    position: fixed;
    right: 1px;
    bottom: 1px;
    opacity: 0.6;
}
.impress-enabled div#impress-toolbar > span {
    margin-right: 10px;
}

The mouse-timeout plugin can be leveraged to hide the toolbar from sight, and only make it visible when mouse is moved.

body.impress-mouse-timeout div#impress-toolbar {
    display: none;
}

If you're writing a plugin and would like to add a widget to the toolbar, see the top of the source file for further instructions.

Author

Henrik Ingo (@henrikingo), 2016