ribcage-switcher

A left and right view switcher for ribcage-ui

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>'
  , pushfunction () {
      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
 
  var Switcher = require('ribcage-switcher')
 
  var switcher = new Switcher({
    depth: 2
  })
 
  switcher.setPane(0, myView)
  switcher.setPane(1, myOtherView)
 
  switcher.goToPane(0)
  switcher.next()
  switcher.previous()
 

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

  // Fires `transition:start` immediately, and `transition:end` approx. 270-300ms later. 
  switcher.next()
 
  // You can disable these events on a per-call basis 
  switcher.goToPane(0, true)
  switcher.next(true)
  switcher.prev(true)

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

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

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)