swoop
Show and hide html elements to build UI widgets.
example
Map all the slides to html elements, in this case using yarnify:
var swoop = ;var domready = ;var yarn = ;;
Write some html files like this slides/beep.html
file.
Everywhere you put a class="link"
with a hash href turns into a special link
that advances to the slide name.
beepROBOTS?[Y/N]
Bundle it all up:
$ yarnify slides/ -o yarn.js
$ browserify entry.js -o bundle.js
Drop down an index.html
file:
And enjoy!
methods
var swoop = ;
var sw = swoop(slides)
Create a new swoop object sw
from an optional hash slides
mapping slide
names to html elements.
sw.addSlide(name, element)
Add a slide with name
as an html element
.
sw.show(name)
Show the slide name
, hiding the previous slide.
sw.appendTo(element)
Append the swoop ui to the target element
.
sw.size(width, height)
Set the size of the slide viewer element.
sw.preventDefault()
Override the default transition between prev
and next
slides for 'show'
events.
This function only works to prevent the default transition on the same tick as
the 'show'
event.
sw.scan(element)
Explicitly add slide listeners for class="link"
with relative slide name hash
hrefs to the DOM Element element
. This is useful if you want to link to slides
from container elements that are not slides themselves.
events
sw.on('show', function (prev, next) {})
Triggered when .show()
is called or a class="link"
element with a slide href
is clicked.
prev
and next
are the string names of the slides being transitioned between.
links
Elements in your slides with class="link"
and a hash href turn into a special
links that advance to a particular slide.
You can also set href="#_back"
to advance to the previous slide.
install
With npm do:
npm install swoop
license
MIT