BESPOKE – DIY Presentation Micro-Framework.

bespoke.horizontal.from('article');

bespoke.vertical.from('article');

bespoke.from('article');

Plugins

The following plugins are available for Bespoke.js.

Official Plugins

All official plugins can be installed from Bower, e.g. $ bower install bespoke-bullets

• bespoke-bullets for animated bullet lists.
• bespoke-hash for hash routing.
• bespoke-state for slide-specific deck styles.
• bespoke-loop for looped presentations.
• bespoke-vcr for recording and playback.

Third-Party Plugins

• bespoke-spotlight by @mobz, for quick-searching slide content.
• bespoke-blackout by @originell, for temporarily blacking out the screen.

Advanced Usage

Control API

Programmatically control your presentation, or implement a custom interface when using a minimal deck.

// Next slide
bespoke.next();

// Previous slide
bespoke.prev();

// Go to a specific slide
bespoke.slide(0);

Events

Binding Events

Each event is passed an event object containing a reference to the relevant slide and its index.

bespoke.on(eventName, function(event) {
  event.slide; // Relevant slide
  event.index; // Index of relevant slide

  // Prevent default functionality (for user interaction events only)
  return false;
});

If you need more detail about the deck in your event handlers, you may need to retain a reference to the individual deck instance.

Standard Events

In most cases, you will only need to use these standard events.

User Interaction Events

These events are fired when the user has interacted with the presentation, but before their interaction has had any effect.

This allows you to intercept the default behaviour by returning false from the event handler.

Unbinding events

Events handlers can be removed with the off(event, callback) method.

Note: To remove an event handler, you must retain a reference to the original function.

var myEventHandler = function() {
  // Do something...
};

// Bind event
bespoke.on('activate', myEventHandler);

// Unbind event
bespoke.off('activate', myEventHandler);

Deck Instances

Creating Deck Instances

Individual deck instances can be created and controlled separately.

// First deck instance
var one = bespoke.horizontal.from('#deck-one');
one.next();
one.prev();
one.slide(0);

// Second deck instance
var two = bespoke.horizontal.from('#deck-two');
two.next();
two.prev();
two.slide(0);

The global bespoke API interacts with all deck instances. For example, calling bespoke.next() is actually calling next() on all decks.

Deck Instance Properties

The following properties are available on each instance.

Note: The optional eventData parameter is an object that will be merged with the event object in subsequent event handlers.

Creating Plugins

If you need to expand upon the core Bespoke.js feature set, additional functionality can be packaged up as plugins.

If you’d like to learn by example, check out the list of existing plugins.

Basic Plugins

Plugins are simply functions that are called when presentations are created.

They are passed a deck instance which allows you to interact with the deck’s state, bind events and modify its elements.

// Creating the plugin
bespoke.plugins.myPlugin = function(deck) {
  deck.on('activate', function(e) {
    console.log('Activated slide ' + (e.index + 1) + ' of ' + deck.slides.length);
  });
};

The plugin can now be provided to the second parameter of the from(selector[, plugins]) method.

// Using the plugin
bespoke.horizontal.from('article', { myPlugin: true });

Note: If the value provided is false instead of true, your plugin won’t run.

Plugins with Options

If your plugin needs some configurability, options can be passed through as the second parameter.

Note: The ‘options’ parameter is an empty object if no options are provided.

// Creating the plugin with options
bespoke.plugins.myPlugin = function(deck, options) {
  options.showTotal = options.showTotal !== undefined ? options.showTotal || true;

  deck.on('activate', function(e) {
    console.log('Activated slide ' + (e.index + 1) +
      (options.showTotal ? ' of ' + deck.slides.length : ''));
  });
};

// Using the plugin with options
bespoke.from('article', {
  myPlugin: {
    showTotal: true
  }
});

Custom Event Data

Additional event data can be supplied to next, prev and slide, which is merged with the final event object in subsequent event handlers.

This functionality is particularly useful if you need to differentiate between events caused by your plugin, and those caused by your end users or other plugins.

bespoke.plugins.myPlugin = function(deck) {

  // Differentiating our plugin's events
  deck.on('activate', function(event) {
    if (event.foo === 'bar') {
      // Triggered by my plugin...
    } else {
      // Triggered by end user, or another plugin...
    }
  });

  // Providing custom event data
  deck.next({
    foo: 'bar'
  });

};