View

Configuration

var app = LiteJS()

Options only needed when changing defaults:

Option	Default	Effect
home	"home"	Default view name
root	document.body	Root element for views
breakpoints	—	Responsive breakpoints, e.g. "sm,601=md,1025=lg"
locales	—	Locale definitions, e.g. {en: "en"}
globals	—	Default translations

var app = LiteJS({
	breakpoints: "sm,601=md,1025=lg",
	locales: {en: "en"}
})

// Optional path prefix for view files, default = ""
app.path = "/js/views/"

Methods

app.def(definitions)

Define views hierarchy in form:

route file-needed.js,another-file.css
users/{user} users.view,%.css

Path Expansion can be used to define files.

app.get(url, params)

Find a matching view, assign parameters from url to params and return View object.

app.show(url)

Find a matching view and call show on it.

app.param(name, callback)

Add callback to resolve url parameters. Name can be a string or array of strings. Callback receives (value, name, view, params).

Use view.wait() to pause navigation until async data is loaded.

app.param(["user", "post"], function(value, name, view, params) {
	var done = view.wait()
	api(name).get(value, function(err, item) {
		if (err) return app.show("404")
		$d[name] = item
		done()
	})
})

app.ping(viewName, callback)

Listen for a view's ping event (shorthand for app(name).on("ping", fn)).

app.ping("user/{userId}", function(params) {
	var done = this.wait()
	loadUser(params.userId, done)
})

Lifecycle Events

Event	When	Arguments
ping	Before render, fetch data here	params
pong	After render	params, View
open	View becomes active	params
close	View deactivated	—
nav	Navigation started	params
show	Navigation complete	params
openChild	Child view opened	child, previous
closeChild	Child view closed	child, next
resize	Viewport resized	—

Events can be listened on individual views or globally:

// On a specific view
app("home").on("open", function(params) { ... })

// On all views globally
app.on("open", function(view, params) { ... })

View Transitions

To enable transitions, the old and new View need to be coordinated with each other - as in, the transition names in the old document match the ones in the new document and the effect of animating between them is intentional. Otherwise, there could be a situation where two documents of the same origin define styles for same-document transitions independently, and enabling this feature would create an unexpected transition between them.