The router module will be responsible for the navigation in the LayerJS framework. This module will make sure that the correct sub-routers are called. The router will make the correct frames transition to their new state. The router will also parse the url for transition parameters.

The router will detect all link clicks in the HTML document. When the link points to an other HTML document, the router will parse this external document and will add the new frames to the existing document. It will also transition to these newly added frames.

When an link can't be parsed, the framework will let the browser do a normal navigation.

When the clicked link contains a hash (#), the hash part will be parsed. The hash can be used to specify to which frame or frames to transition to. More information can be found in the Hash Router.

A link can also contain parameters to configure the transition. The name that is used for these parameters can be customize in the default.js. This will expose an object called 'transitionParameters' that will have 2 properties duration and type. The value for these properties will be used to identify the transition parameters in a link.

By default an url parameter with a name of 't' will map to the duration of a transition. For example /path?t=10ms, will set the duration of the transition to 10 milliseconds.

By default an url parameter with a name of 'p' will map to the type of a transition. For example /path?p=left, will do a left transition.

These parameters can be combined with each other and with other non-layerJS url parameters.

The router module offers a method that can be used to define your own static route. These routes will link a specific url to a specific state of your document.

layerJS.router.addStaticRoute(url, state, modify)

• url: url of the route
• state: a state (array of strings) to transition to
• modify: when true, existing route will be overwritten with this new route

The router module will also react when the back or forward button is pressed in the browser. For example, when the back button is pressed, the framework will transition to the frames that where active in the previous state.

This works because when the url is changed, the state of that url is automatically registered as a static route. When the back button is pressed, the router module will look for a static route that maps with the previous url and it will transition to the state of that url.