Fork me on GitHub

API

Hooks/Methods

Renderers

Renderers have a number of hooks/methods available to structure them and call pieces of Javascript at key moments on navigation. Read more of the documentation about renderers.

Methods Details
onEnter() This method in the renderer is run when the data-router-view is added to the DOM Tree.
onLeave() This method in the renderer is run when transition to hide the data-router-view is called.
onEnterCompleted() This method in the renderer is run when the transition to display the data-router-view is done.
onLeaveCompleted() This method in the renderer is run when the data-router-view is removed from the DOM Tree.

Transitions

Transitions have a number of hooks/methods available to manage which animations should be run to display a page and which one should be run to hide it. Read more of the documentation about transitions.

Methods Method Parameters Details
in({ from, to, trigger, done }) to | <Node>
from | <Node>
done | <Callback>
trigger | <Node|String>

This method is called to display the data-router-view under the to parameter and, for overlaping transitions only, to hide the data-router-view under the from parameter. Once the animation is over the done() callback has to be called to continue the navigation process.

The trigger parameter contains either the link triggering the transition, popstate when the back/forward button of the browser triggers the transition or script for programmatical redirection.

out({ from, trigger, done }) from | <Node>
done | <Callback>
trigger | <Node|String>

This method is called to hide the data-router-view under the from parameter. Once the animation is over the done() callback has to be called to continue the navigation process.

The trigger parameter contains either the link triggering the transition, popstate when the back/forward button of the browser triggers the transition or script for programmatical redirection.

Core

Highway.Core comes with some built-in and useful methods developers can have access to once it has been called with new Highway.Core(). Read more of the documentation about the core of Highway.

Methods Method Parameters Details
attach(links) links | <Array|NodeList> All links on a page that don't have the target attribute or the data-router-disabled attribute are attached to Highway by default. This methods can be used to programatically attach links to Highway.
detach(links) links | <Array|NodeList> All links in a data-router-view that is hidden are detached from Highway by default. This methods can be used to programatically detach links from Highway.
redirect(href, transition) href | <String>
transition | <Transition>
This method can be used to programatically redirect to an internal page with Highway. A transition extending Highway.Transition can be optionally added to the method to override the transition related to the page. The transition related to the page will be used if no transition is added to this method.

Events

Highway.Core extends tiny-emitter so it gives developers access to all the methods from tiny-emitter. Those methods can be used to listen to the following events sent by Highway in the navigation process.

Events Callback Parameters Details
NAVIGATE_IN to | <Node>
trigger | <Node|String>
location | <Object>
This event is sent everytime a data-router-view is added to the DOM Tree. The callback method of the event gets an Object as a parameter that contains the data-router-view under the to key, the triggered element under the trigger key and all the URL informations under the location key.
NAVIGATE_OUT from | <Node>
trigger | <Node|String>
location | <Object>
This event is sent everytime the out() method of a transition is run to hide a data-router-view. The callback method of the event gets an Object as a parameter that contains the data-router-view under the from key, the triggered element under the trigger key and all the URL informations under the location key.
NAVIGATE_END to | <Node>
from | <Node>
trigger | <Node|String>
location | <Object>
This event is sent everytime the done() method is called in the in() method of a transition. The callback method of the event gets an Object as a parameter that contains the new data-router-view under the to key, the old data-router-view under the from key, the triggered element under the trigger key and all the URL informations under the location key.