Simple State Manager (SSM for short) is a responsive state manager which allows you to target javascript at different browser widths.
With Simple State Manager you can add multiple states based on your needs, the
most simple way to add a state is to simply pass the information about your
state to SSM using ssm.addState
. It is important to remember that the
width you provide is the upper limit of your responsive state width, the
lower limit is defined simply by defining another state with a width which
is lower.
ssm.addState({id: 'mobile', width: 767, onEnter: function(){console.log('enter mobile')}});
ssm.addState({width: 1023, onEnter: function(){console.log('enter tablet')}});
ssm.addState({width: 9999, onEnter: function(){console.log('enter desktop')}});
If you wish to use one command to add multiple states using one command you can use ssm.addStates to which you should pass an array of states.
ssm.addStates([
{id: 'mobile', width: 767, onEnter: function(){console.log('enter mobile')}},
{id: 'tablet',width: 1023, onEnter: function(){console.log('enter tablet')}},
{id: 'desktop',width: 9999, onEnter: function(){console.log('enter desktop')}}
]);
Sometimes it may be necessary to remove a state, if we have the id for the state we can easily remove the state, to remove the mobile state from our above example we simply use:
ssm.removeState('mobile');
Once you have finished setting up your states you should run ssm.ready()
which will setup the states.
ssm.ready()
As SSM is chaninable you can even fire the ssm.ready()
method by simply
adding .ready()
onto your original command
ssm.addStates([
{id: 'mobile', width: 767, onEnter: function(){console.log('enter mobile')}},
{id: 'tablet',width: 1023, onEnter: function(){console.log('enter tablet')}},
{id: 'desktop',width: 9999, onEnter: function(){console.log('enter desktop')}}
]).ready();
To enable the debug mode you simply need to run ssm.enableDebug()
, this will
add a width meter to the bottom right corner of the viewport area.
ssm.enableDebug();
Method Description
ssm.addState
Add a new state, expects an object literal, properties avaliable - id (optional), width (required), onEnter (optional), onResize (optional), onLeave (optional)
ssm.addStates
Add multiple new states, expects an array of object literals, properties avaliable - id (optional), width (required), onEnter (optional), onResize (optional), onLeave (optional)
ssm.removeState
Remove a state, expects one property, the id of the state to be removed.
ssm.ready
Tells the page that states have been added and we can fire the onEnter event for the current state.
ssm.enableDebug
Enables a debug mode which shows a width meter to the corner of the page.
There are a number of browsers that we have tested support, as we test more browsers we will update this list
- Chrome
- Firefox
- Internet Explorer 8+ (6 & 7 are untested)
- Safari
- Opera
Enable multiple methods to be attached to each state
Allow overlapping states so that JS can span multiple states