Story Unit

An Instagram Story inspired component.

Usage

Add your markup. Start by creating a single element which will contain each chapter of your story. A chapter can be a video element or an image element. Make to include the appropriate video attribtues on your video elements. When using an image element, specify how long the image should be displayed with the data-duration attribute on your img element. Defaults to 1 second. See Below.

<div id="chapters">
  <video muted playsinline src="video.mp4"></video>
  <img data-duration="2" src="image.jpg" alt="" />
  <video muted playsinline src="video.mp4"></video>
  <video muted playsinline src="video.mp4" type="video/mp4"></video>
</div>

Now initialize your story by providing it with an options object.

var story = Story({
  el: '#chapters',
  animate: false // defaults to true. set to false if you want to handle chapter animations yourself.
})

Your story will now have a few methods you can call to get things rolling.

| Method | Description | | ------ | :-------------------------: | | play | begins the story | | end | jumps to end of story | | replay | starts story from beginning |

Now you probably want to know when the story's state changes, right? Get notified of story updates by subscribing to the following events:

| Event | Description | Payload | | ------------ | :-----------------------------------------------: | :-----------------: | | start | fires when the story begins playing. | {current, previous} | | update | fires when the story's active chapter changes. | {current, previous} | | last-chapter | fires at the start of the last chapter | {current, previous} | | end | fires when the entire story has completed. | {current, previous} | | skip-to-end | fires when the user skips to the end of the story | {current, previous} |

Event payloads

Each emitted event will send a payload that includes an object with current and previous properties. The current and previous properties each respectively have a ref property which is the DOM element of that chapter. This is useful if you want to handle animations on your own.

So lets subscribe to some events!

story.on('start', function(payload) {
 // payload.current.ref
 // payload.previous.ref
}

story.on('update', function(payload) {
 // payload.current.ref
 // payload.previous.ref
}

story.on('last-chapter', function(payload) {
 // payload.current.ref
 // payload.previous.ref
}

story.on('end', function(payload) {
 // payload.current.ref
 // payload.previous.ref
}

story.on('skip-to-end', function(payload) {
 // payload.current.ref
 // payload.previous.ref
}

So you've subscribed to some events...nice! How about allowing a user to initiate some actions themselves like, replaying the story, or skipping to the end? Easy!

var replayBtn = document.getElementById('replay-btn')
var skipBtn = document.getElementById('skip-btn')

replayBtn.addEventListener('click', story.replay.bind(story)) // notice we're binding our this context to the story, important!

skipBtn.addEventListener('click', story.end.bind(story))

You'll notice we have to bind our DOM event listeners this context to the story like story.replay.bind(this). This is important, as if you don't, the story won't have access to it's methods and properties.

FINALLY. Play the story!

story.play()