connectivityMachine

http://blogs.telerik.com/appbuilder/posts/13-04-23/is-this-thing-on-%28part-1%29

by ffabreti

HTML

<script src="https://github.com/ifandelse/machina.js/blob/master/lib/machina.min.js"></script>

JavaScript

// We're getting a customized FSM constructor which we
// can use later to create an instance. Please note that
// I'm leaving off any "wrapper methods" at the top of
// the FSM (methods that would wrap the "handle" call).
// For the sake of keeping this example somewhat simple,
// we'll just use the handle call directly...
var HttpConnectivityFsm = machina.Fsm.extend({
    // we'll assume we're offline and let the app
    // determine when to try and probe for state
    initialState : "offline",
     
    // The initialize method is invoked as soon as the
    // constructor has completed execution. Here we
    // set up listeners to the various events that
    // could indicate changes in connectivity
    initialize : function () {
    var self = this;
    // The "stethoscope" is simply an object that can make a
    // request to a pre-determined HTTP endpoint and emit a
    // heartbeat event if the request is successful, or a
    // no-heartbeat event if it fails.
    _.each( ['heartbeat', 'no-heartbeat'],
        function ( eventName ) {
            self.stethoscope.on( eventName, function () {
                self.handle.call( self, eventName );
            });
        }
    );
    $( window ).bind( "online", function () {
        self.handle( "window.online" );
    });
     
    $( window ).bind( "offline", function () {
        self.handle( "window.offline" );
    });
     
    $( window.applicationCache ).bind( "error", function () {
        self.handle( "appCache.error" );
    });
     
    $( window.applicationCache ).bind( "downloading", function () {
        self.handle( "appCache.downloading" );
    });
    $( document ).on( "resume", function () {
        self.handle( "device.resume" );
    });
    },
     
    states : {
        probing : {
            // the "_onEnter" handler is a special machina
            // feature that gets executed as soon as you
            // enter the state. This is our "entry action".
            _onEnter : function ()...