statemachine.js

This is a little javascript state-machine that does the job for me.

It's less complicated than https://github.com/jakesgordon/javascript-state-machine/

I like C++ boost::statechart, so all the transitions are done within event handlers.

Status

WIP

Usage

Creating state machine

Add script to your app. Create StateMachine object, like this:

var fsm = new StateMachine();

States Declaration

Declare states you need. In a constructor:

var fsm = new StateMachine({
	start:{},
	loading:{},
	dragging:{},
	refreshing:{}
});

or after creating with = operator;

fsm.states = {
	start:{},
	loading:{},
	dragging:{},
	refreshing:{}
};

Event Handlers Declaration

Add event handlers inside the states, like that:

fsm.states = {
	start:{},
	dragging:{
		user_mousemove:	function(e);
		user_mousedown:	function(some, arguments, go, here){},
		user_mouseup:	function(up, to, five, arguments){}
	}
}

You can use two callbacks called when leaving and entering state:

• before - when entering state
• after - when leaving state

Like that:

fsm.states = {
	start:{},
	loading:{
		loaded:	function(what_was_loaded){},
		before:	function(){},
		after:	function(){}
	}
}

Logic And Transitions

To make transitions return next state name string in event handler, like this:

fsm.states = {
	start:{},
	loading:{
		loaded:function(){
			/*Everything is loaded => Switch to idle state*/
			return "idle";
		}
	}
	idle:{}
	error_state:{}
}

Or use jumpToState(stateName) function, like this:

fsm.jumpToState("loaded");

Runtime

Copy the code somewhere in your app.

Create statemachine object:

var fsm = new StateMachine( /** States definition hash here **/ );

To control state machine call jumpToState, like this:

fsm.jumpToState("loaded");

Or process events, like this:

fsm.processEvent("loaded");

You can process events with up to 5 parameters, like this:

fsm.processEvent("loaded", "dojox");

processEvent calls should be placed somewhere in your UI or AJAX event handlers, like(jQuery):

$('#something').click(function(){fsm.processEvent('clicked-something');}); 

Enjoy

Hope somebody finds it useful. Wrote it to learn making docs in github;p

Jacek Glodek