simple navigation widget
This creates a forward/backward navigation in a hyperscript/mutant app.
hello world: ask user their name, then say hello. back button returns to the "ask" screen.
var Nav = require('./')
var h = require('mutant/h')
var nav
document.body.appendChild(nav = Nav(function router (location) {
//router function returns a new element for a given location.
return h('h1', ["Hello,", location])
}, function header (nav) {
return h('label', {'ev-click': nav.back}, ['back'])
},
//the first page
h('div', [
h('h1', 'what is your name?'),
h('input', {'ev-change': function (ev) {
nav.push(ev.target.value)
}})
])
))
create a nav
object, which is a div with added push
and back
functions,
and history
and last
observables.
go to the new location, this will call the router function, and display on the screen whatever it retuns.
pop the current item and go to the previous screen.
an observable of the history stack.
each item is {location: <location>, element: <page>}
a observable of the very last item.
when a page is shown on the screen, 'focus'
event will
be emitted on that element.
when another page is shown, the previously visible page
will have 'blur'
emitted on that element, just before the
other element is shown.
MIT