Simple & powerful routing

Imagine you didn't have to write a bunch of JavaScript to get a slick, progressively enhanced interface! dom-router is a URL hash to DOM router which automatically, & intelligently toggles visibility of Elements based on hashchange events.

This provides a clean separation of concerns, and progressive enhancement in a simple library. You can write clean HTML, and dom-router will progressively enhance the interface with CSS classes (not supplied). DOM updates happen on an animation frame to minimize impacting your application. An optional callback allows you to handle application state changes the way you want.

How can I load dom-router?

dom-router can be installed from npm, & bower, and supports CJS, AMD, & script tags. When loaded with a script tag, window.router will be created.

Requirements

• Element.classList API, or shim

Example

This example is meant to demonstrate multi-tier routing in a single page application. When the HTML is "clean", it is functional for screen readers & text based browsers like `lynx`, and with progressive enhancement, developers can add new behaviour without impacting the experience of other consumers.

Before routing is enabled

After routing is enabled

This would be the result if a user visited #settings/billing

Minimal coding required

Configuration

active

Boolean which enables/disables routing

callback

Function to execute after route has changed, takes arg which describes the event.

css

Object with current, & hidden keys which have corresponding CSS class values, defaults to "current", & "hidden".

ctx

Context for DOM selector, defaults to body if not specified.

This allows for many routers to be dynamically created & scoped to a "view", but it can get pretty complex pretty fast, so a single router is recommended.

default

[Optional] Default route to display if one is not specified, or an invalid route is specified.

delimiter

[Optional] Multi-tier routing delimiter, defaults to /, e.g. #settings/billing; each tier should map to a nested id.

log

Boolean which logs routing to router.history[] if true, defaults to false; could be a memory leak if logging is enabled and target Elements are removed from DOM.

API

current()

Returns the current Route, if logging is enabled.

hashchange(ev)

Event handler, expects {oldURL: "", newURL: ""}.

scan(default)

Scans ctx for routes & resets default which is an optional argument, otherwise it defaults to the first route.

select(query)

Context specific DOM selector.