A left and right view switcher for ribcage-ui

Usage no npm install needed!

<script type="module">
  import ribcageSwitcher from 'https://cdn.skypack.dev/ribcage-switcher';


Ribcage Switcher

A left and right swiping view switcher for ribcage-ui.


npm install ribcage-switcher


  var Switcher = require('ribcage-switcher')
    , ribcage = require('ribcage-view')
    , FirstView
    , NextView = require('NextView')

  FirstView = ribcage.extend({
    events: {'click a': 'push'}
  , template: '<a href="#">Push</a>'
  , push: function () {
      this.trigger('push', new NextView({rootView: this}))

  var switcher = new Switcher({
    rootView: new FirstView()

  // See tests for a more complex example


Triggering these events on a pane will cause the switcher to respond

  • push - Pass a view as the first argument, and the switcher will push it onto the stack and move to the new view
  • pop - Goes to the previous view and pops the last one off the stack
  • goToView - Pass a view as the first argument, and the switcher will backtrack there, popping off views as it goes
  • replace - Pass a view as the first argument, and the switcher will replace the current pane with that view

Legacy Use

  var Switcher = require('ribcage-switcher')

  var switcher = new Switcher({
    depth: 2

  switcher.setPane(0, myView)
  switcher.setPane(1, myOtherView)


Transition Events

The switcher will send panes transition:start and transition:end events.

  // Fires `transition:start` immediately, and `transition:end` approx. 270-300ms later.

  // You can disable these events on a per-call basis
  switcher.goToPane(0, true)

The switcher itself also emits transition:start and transition:end events.

  switcher.on('transition:end', function (paneIndex, paneView) {
    // Do something

Throttling Pane Renders

Rendering subviews in the middle of a transition can result in interface lag. Avoiding this issue is easy with panes that extend from ribcage-view.

  var myPane = require('ribcage-view').extend({
    throttle: true  // Defaults to false

  switcher.setPane(1, myPane)

  myPane.render() // Will run immediately

  switcher.next() // Start moving to the next pane

  setTimeout(function () {
    myPane.render() // Will run only after the switcher has transitioned
  }, 100)