Miso Storyboard Example

storyboard.example.js

var interactive = new Miso.Storyboard({
  // our initial state will be loading
  initial : 'loading',

  scenes : {

    loading: {
      enter : function() {
        // show that we are in a loading state
        $('#loading').show();
      },
      exit : function() {
        // This exit method is going to be asyncronous
        // so we will first declare it as such
        // by making a callback we will then need to call
        // to actually exit this scene.
        var complete = this.async();

        system.loadData({ 
          success : function() {

            // When our data actually loads, we can fade out the
            // loading screen (note also async!) and
            // finally call our complete method.
            $('#loading').fadeOut(function() {
              complete();
            });
          }
        })
      }
    },

    // the mainscreen scene just has our main content
    mainScreen : {
      enter : function() {
        $('#mainScreen').show();
      },
      exit : function() {
        $('#mainScreen').hide();
      }
    },

    // our details screen is for a specific element you might
    // select from the main screen
    detailScreen : {
      enter : function(datum) {
        //update the detail chart with the datum reference
      }
    }
  }
});

// Kickoff the storyboard. It will enter the initial
// scene we specified (which is loading.)
interactive.start()
  // when we're done loading, transition to the main screen
  .then(function() {
    interactive.to('mainScreen');
  }
);

// At some point, wire up a control to switch to the 
// detail screen...
$('#mainScreen a.detail').click(function() {
  interactive.to('detailScreen');
});