node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Show and hide html elements to build UI widgets.

swooping osprey


View the example.

Map all the slides to html elements, in this case using yarnify:

var swoop = require('swoop');
var domready = require('domready');
var yarn = require('./yarn');
domready(function () {
    var sw = swoop({
        foo : yarn('foo.html'),
        bar : yarn('bar.html'),
        baz : yarn('baz.html'),
        beep : yarn('beep.html'),
        boop : yarn('boop.html'),
        end : yarn('end.html')
    sw.size(800, 600);

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.

  <a class="link" href="#boop">Y</a>
  <a class="link" href="#end">N</a>

Bundle it all up:

$ yarnify slides/ -o yarn.js
$ browserify entry.js -o bundle.js

Drop down an index.html file:

  <script src="bundle.js"></script> 

And enjoy!


var swoop = require('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.

Show the slide name, hiding the previous slide.


Append the swoop ui to the target element.

sw.size(width, height)

Set the size of the slide viewer element.


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.


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.


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.


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.


With npm do:

npm install swoop