bespoke-simple-overview

This plugin creates an overview mode in which the viewer sees more than 1 slide at a time and it can be toggled using ESC or some other configurable key.

Hit 'ESC' now!! ;)

Works on different themes!

Try it out on:

Dependencies

This plugin depends only on the bespoke-classes plugin

However, if you are including bespoke-bullets, make sure bespoke-simple-overview gets loaded before it, like so:

window.deck = bespoke.from('article', [
  bespoke.plugins.classes(),
  bespoke.plugins.simpleOverview(),
  bespoke.plugins.bullets()
]);

Configuration

The plugin constructor can take a configuration object like this:

var simpleOverview = bespoke.plugins.simpleOverview({
  activationKey: 'd',   // Defaults to 27 (ESC)
  insertStyles: false   // Defaults to true
});

activationKey: a string character or its corresponding ASCII integer to be used as the key that activates/deactivates the overview mode
insertStyles: a boolean indicating whether the plugin should include some CSS rules to style the presentation when in the overview mode

How it works

The plugin simply adds/removes a .bespoke-simple-overview class on the deck.parent element when the activationKey is pressed.
By default, it adds some CSS rules based on that class

The default styling

To see which CSS rules are added by default, see the file lib/bespoke-simple-overview.css
They basically add a rule to the .bespoke-slide class with transform: translated3d(x, 0, -2000px), so that the slides go further from the "camera" and become smaller
Tipically, about 5 .bespoke-slides are shown:
- The current one: .bespoke-slide.bespoke-active
- Two before: .bespoke-slide.bespoke-before
- Two after: .bespoke-slide.bespoke-after

Events

There are 3 events exposed by this plugin:
- simple-overview.enable: Goes into overview mode
- simple-overview.disable: Leaves to regular mode
- simple-overview.toggle: Toggles overview/regular mode
To trigger the events:
```
deck.fire('simple-overview.disable')
```

Triggering from a button

Using the plugin events, it is possible to trigger the overview mode using, for instance, a button:
- ```
button.addEventListener('click', () => {
  deck.fire('simple-overview.toggle'));
}
```