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 surebespoke-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 modeinsertStyles
: aboolean
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 thedeck.parent
element when theactivationKey
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 withtransform: translated3d(x, 0, -2000px)
, so that the slides go further from the "camera" and become smaller - Tipically, about 5
.bespoke-slide
s are shown:- The current one:
.bespoke-slide.bespoke-active
- Two before:
.bespoke-slide.bespoke-before
- Two after:
.bespoke-slide.bespoke-after
- The current one:
Events
- There are 3 events exposed by this plugin:
simple-overview.enable
: Goes into overview modesimple-overview.disable
: Leaves to regular modesimple-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')); }
-