bespoke-secondary

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

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.

See also

You should check out bespoke-remote prototype, by Mark Dalgleish, who created Bespoke.js. It also has support for notes, and an unlimited number of screens - but it requires server side software for synchronization.

The notes from bespoke-secondary should be compatible with bespoke-remote prototype, so go ahead!

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

Copyright (c) 2013, 2014, Joel Purra All rights reserved.

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