bespoke-substeps
v1.0.1
Published
Substeps for Bespoke.js presentations
Downloads
17
Maintainers
Readme
bespoke-substeps
Substeps for Bespoke.js presentations
Similar and initially inspired on bespoke-bullets.
You can see bespoke-substeps in action in e.g. Asynchronous JavaScript Interfaces presentation
Features
- Order of display can be customized (via
data-order
attribute), so it doesn't necessary need to follow order in document - Separated steps can be configured to appear in parallel (just apply same
data-order
value) - There are four types of actions (configured via
data-action
attribute) that can be used:- activate (default) show element (turn off
visibility: hidden
) - deactivate hide element (turn on
visibility: hidden
) - insert insert element (turn off
display: none
) - remove remove element (turn on
display: none
) - mark mark element (just for duration of given step turn off
background: inherit
)
- activate (default) show element (turn off
Usage
If CJS bundler you're using, supports CSS modules out of a box, then just do:
var substeps = require('bespoke-substeps');
Otherwise require strictly JS logic of plugin with
var substeps = require('bespoke-substeps/dom');
and manually assure that styles placed in style.css
are also loaded with your application.
Then configure bespoke to use the plugin:
bespoke.from(selector, [
substeps()
]);
Example HTML configuration
All step elements need to share substep
class. Unless overridden they're assigned with activate
action and incremented order.
<section class="bespoke-slide">
<h1>Slide title</h1>
<ul class="substep" data-order="3" data-action="remove"><!-- Removed in final step -->
<li class="substep">First step</li><!-- assigned order: 0.01 -->
<li class="substep">Second step</li><!-- assigned order: 0.02 -->
<li class="substep" data-order="2">Fourth step (1)</p><!-- assigned order: 2 -->
<li class="substep" data-order="1">Third step</p><!-- assigned order: 1 -->
<li class="substep" data-order="2">Fourth step (2)</p><!-- assigned order: 2 -->
<li class="substep">Fifth step</p><!-- assigned order: 2.01 -->
</ul>
<ul class="substep" data-order="3" data-action="insert"><!-- Inserted in final step -->
<li>Final only item</li>
</ul>
</section>
Installation
npm
In your presentation path:
$ npm install bespoke-substeps