Bespoke.js

DIY Presentation Micro-Framework

Less than 1KB minified and gzipped, with no dependencies.

Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.

Using keyboard and touch events, Bespoke.js adds classes to your slides, while you provide the CSS transitions.

With its robust plugin system, new functionality can be added to Bespoke.js easily.

Download

Download the production version or the development version.

Bespoke.js requires a modern browser with ES5 support. If supporting old IE is your thing, there's always es5-shim and classList.js.

Bower

Bespoke.js can be installed from Bower using the following command:

$ bower install bespoke.js

Demo

View the demo at the official Bespoke.js project page.

Presentations

Made a presentation with Bespoke.js? Let me know.

Getting Started

To create a Bespoke.js presentation, follow these 3 simple steps:

Create a page with required slide markup and resources
Activate your deck via the JavaScript API
Create a custom style sheet using the Bespoke.js classes

Need more functionality? Use an existing plugin, or create a new one.

Basic Usage

Markup

The tags you use are completely optional. Once a parent element is selected, the child elements become slides.

<link rel="stylesheet" href="path/to/my/theme.css">

<article>
  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>
</article>

<script src="bespoke.min.js"></script>
<script src="path/to/my/script.js"></script>

JavaScript

Decks are created by selecting the parent element with the from(selector) method, with optional 'horizontal' or 'vertical' event handlers.

Horizontal Deck

Uses space bar, horizontal arrows and swipes for navigation.

bespoke.horizontal.from('article');

Vertical Deck

Uses space bar, vertical arrows and swipes for navigation.

bespoke.vertical.from('article');

Minimal Deck

For the absolute purist only. Minimal decks provide a simple control API with zero default event handlers. Key presses and swipes have no effect, it's up to you to implement your own interactions from scratch.

bespoke.from('article');

CSS

To create your own custom deck styles, Bespoke.js provides the necessary classes to your elements.

bespoke-parent	The deck's containing element
bespoke-slide	Every slide element
bespoke-active	The active slide
bespoke-inactive	All inactive slides
bespoke-before	All slides before the active slide
bespoke-before-n	All slides before the active slide, with n value incrementing
bespoke-after	All slides after the active slide
bespoke-after-n	All slides after the active slide, with n value incrementing

If you've created an awesome theme you'd like me to share, let me know.

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.

If you'd like your plugin added to this list, let me know.

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.

activate	A slide has been activated. event.slide is the activated slide.
deactivate	A slide has been deactivated. event.slide is the deactivated slide.

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.

next	The next slide has been requested, even if last slide is active. event.slide is the current slide.
prev	The previous slide has been requested, even if first slide is active. event.slide is the current slide.
slide	A specific slide has been requested. event.slide is the requested slide.

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.

*next([eventData])*	Next slide.
*prev([eventData])*	Previous slide.
*slide(index[, eventData])*	Activate a specific slide by index.
*on(event, callback)*	Attach event handlers
*off(event, callback)*	Remove event handlers
*fire(event[, eventData])*	Fire custom events. This method is primarily designed for plugin authors.
parent	The deck's parent element
slides	An array of slide elements

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'
  });

};

Questions?

Contact me on GitHub or Twitter: @markdalgleish

jasonsee / bespoke.js Goto Github PK

bespoke.js's Introduction