iFSM jQuery plugin

Go to the demo...

A Finite State Machine (FSM) in jQuery ? but what for ! ?

If you've got no idea of what a FSM is, you can have a look on the wikipedia description.
Actually, a FSM can address a lot of problems and simplify them by centralizing all the "logic" in one place: Application initialization, UI behaviours according to different states or user interactions, ...

Why should I need a FSM ?

Of course, if your code has no complexity and no logic... no need of a FSM... But if you are doing games, complex user interface, complex decision tree, ...

Well, if your javascript will contain a lot of "if... else if.... else..."... Then, a FSM will be your friend!

What is iFSM ?

iFSM is a jquery plugin that helps you to manage the behavior of your UI jQUery objects.

Actually, iFSM is more than a simple FSM as it can handle sub-machines within states and handle Push/Pop states. It handles automatically the javascript and virtual event bindings to your states.

And thanks to the use of jQuery, you can completly handle the complexity of any UI.

The main philosophy is the following:

First, you define the different states your object has to manage, the listened events the object should react on, the logic written in javascript when the event occurs, the whole in one or several javascript objects.

var myStateDefinition = {
        IsDisplayed: 
        {
            enterState:
            {
                init_function: function(){this.myUIObject.html("I'm Displayed");}
            },
            click:   
            {
                next_state: 'IsNotDisplayed'
            }
        }, 
        IsNotDisplayed: 
        {
            enterState:   
            {
                init_function: function(){this.myUIObject.html("I'm NOT Displayed");}
            },
            click:   
            {
                next_state: 'IsDisplayed'
            }
        },
        DefaultState:
        {
            start:
            {
                next_state: 'IsDisplayed'
            }
        }
    };

Then, you create your iFSM object by linking it with your jQuery object:
```
$('#myObject').iFSM(myStatesDefinition);
```

That's it, your FSM is working!
When you'll click on your 'myObject', the iFSM will get the event and will play the logic code according to the state of the object.

see it live...

iFSM can listen and react to any javascript or user defined events... you can have submachines in your machine to break down the complexity... well, I let you discover the different possibilities and configuration listed in the documentation...