bespoke-secondary

Show slide notes in a secondary window/screen with Bespoke.js

⚠️ This project has been archived

No future updates are planned. Feel free to continue using it, but expect no support.

Download

Download the production version or the development version, or use a package manager.

Usage

When you've followed the instructions below, load your presentation and hit the S key on your keyboard to toggle the secondary window. Move it to a secondary screen, and you're set!

Scripts

This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  secondary = require('bespoke-secondary');

bespoke.from('#presentation', [
  secondary()
]);

When using browser globals:

bespoke.from('#presentation', [
  bespoke.plugins.secondary()
]);

HTML

In your presentation, add some notes:

<article>
  <section>
    <h2>Slide 1</h2>
    <!-- Put your notes inside of each slide, in an <aside> tag -->
    <aside>
      <h2>I must remember to mention this, and then that.</h2>
    </aside>
  </section>
  <section>
    <h2>Slide 2</h2>
    <aside>
      <h2>There's also a corner case I must tell everyone about.</h2>
    </aside>
  </section>
</article>

You probably want to hide your notes in your actual slides.

.bespoke-slide aside {
    display: none;
}

Configuration

bespoke.horizontal.from('article', {
  secondary: {
      // Change the selector used to find notes, in a .bespoke-slide context
      notes: ".my-notes",
      keys: {
        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Virtual_key_codes
        // Change the key used to toggle the secondary window
        toggle: 0x54, // (84) "T" key.
      }
    }
});

Package managers

npm

$ npm install bespoke-secondary

Bower

$ bower install bespoke-secondary

TODO

Move the HTML for the secondary window to a separate file, and load it when needed, or a separate tag/element within the presentation.
Add some styling to the secondary window.
Make the presentation controllable (next, previous) from the secondary window.

Credits

Mark Dalgleish for Bespoke.js and related tools. This plugin was built with generator-bespokeplugin.

Brooklyn Museum, brooklyn_museum on flickr, for their photo really good idea for wikipedia loves art (CC BY 2.0).

My bestest friends, bespoke-convenient and bespoke-indexfinger, for their continued support - rain and shine. I love you, guys.

License

When using bespoke-secondary, comply to the MIT license. Please see the LICENSE file for details, and the MIT License on Wikipedia.

joelpurra/bespoke-secondary