In a previous post, we discussed how we can get started with SimpleStateManager. Recently though a newly released version of SimpleStateManager has enabled us to add custom configuration options which can be used to add additional ways in which we can configure our states. This means that our states can test for virtually anything we can write a javascript test for.

To get started with using custom configuration options we need to take a look at the API. The method used to add a new custom configuration option is ssm.addConfigOption which takes a single parameter which is an object with the following parameters:

name – the name/id of the config option, used when you add your state to test your state with that option

– the name/id of the config option, used when you add your state to test your state with that option test – the method used to test your option, it should return true or false

A simple example of where we might want to use a custom configuration option is to only target our state towards touch devices. To do this we need to write a test that allows us to test for touch devices. In this example to determine whether the device is a touch device or not we will use Modernizr.

ssm.addConfigOption({name:"touch", test: function(){ if(typeof this.state.touch === "boolean" && this.state.touch === Modernizr.touch){ return true; } else{ return false; } }});

The test method is scoped so that this is equal to an object containing the following:

state – The current state being tested. This allows us to read the config options that have been applied.

– The current state being tested. This allows us to read the config options that have been applied. browserWidth – The current width of the browser. This enables your test to compare against the browser width without doing its own additional tests.

– The current width of the browser. This enables your test to compare against the browser width without doing its own additional tests. callback – This is the method you are currently in.

If we take a look at the structure of writing a test, it makes sense to first validate that the option passed to our method is of the correct type. This can be achieved by using typeof to tell us the type of the option and then comparing it to what we expect the value to be.

typeof this.state.touch === "boolean"

The next step is to perform our test. In our above example we simply need to check if the the configuration option matches the value returned by testing if the touch API is available.

this.state.touch === Modernizr.touch

If the option provided passes the test we can then say that our config option test has passed and return true , otherwise we would return false .

If we were to now to use this as part of a state we would simply use touch in the same way we use any of the built in configuration options.

ssm.addState({ id: "mobile", maxWidth: 767, colorbox: false, touch: true, onEnter: function(){ console.log('mobile with touch'); } });

With touch set to true, this state will only be enabled if the device we are using supports touch events. This gives us the flexibility to have states that respond to more than the size of the viewport and instead respond to the features of the browser. The API to add new configuration options is still relatively new so we hope to keep improving it with going forward, suggestions are welcome.

I hope this tutorial has helped you understand what config options can do for you. Good luck and if you get stuck feel free to grab me on twitter or in the comments. This post was checked by @maskeddev.

Are you looking for your next role? I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office. Find out more

Please enable JavaScript to view the comments powered by Disqus.