@weareglow/story-unit
Last updated 5 months ago by adrienhobbs .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @weareglow/story-unit 
SYNC missed versions from official npm registry.

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()

Current Tags

  • 0.0.4                                ...           latest (5 months ago)

4 Versions

  • 0.0.4                                ...           5 months ago
  • 0.0.3                                ...           7 months ago
  • 0.0.2                                ...           7 months ago
  • 0.0.1                                ...           7 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (881)

Copyright 2014 - 2016 © taobao.org |