Histery
Single page app history handler.
How to use
$H.on(/^\/some\/(reg)\/(expr)$/, {
go: function(sameMatch, href, rem1, rem2) {
console.log('go1: sameMatch: ' + sameMatch + ', href: ' + href +
', rem1: ' + rem1 + ', rem2: ' + rem2);
},
leave: function(sameMatch, href, rem1, rem2) {
console.log('leave1: sameMatch: ' + sameMatch + ', href: ' + href +
', rem1: ' + rem1 + ', rem2: ' + rem2);
}
});
$H.on(/^\/$/, function() { return {
go: function(sameMatch, href) {
console.log('go2: sameMatch: ' + sameMatch + ', href: ' + href);
},
leave: function(sameMatch, href) {
console.log('leave2: sameMatch: ' + sameMatch + ', href: ' + href);
}
}});
$H.on(
{
pathname: /^\/(test)$/,
search: /^param=(pppp)$/,
hash: /^baba(bebe)$/
},
{
go: function(sameMatch, href, rem1, rem2, rem3) {
console.log('go3: sameMatch: ' + sameMatch + ', href: ' + href +
', rem1: ' + rem1 + ', rem2: ' + rem2 + ', rem3: ' + rem3);
},
leave: function(sameMatch, href, rem1, rem2, rem3) {
console.log('leave3: sameMatch: ' + sameMatch + ', href: ' + href +
', rem1: ' + rem1 + ', rem2: ' + rem2 + ', rem3: ' + rem3);
}
}
);
$H.on(null, {
go: function(sameMatch, href) {
console.log('No match: sameMatch: ' + sameMatch + ', href: ' + href);
}
});
$H.on(null, {
go: function(sameMatch, href) {
console.log('No match go: sameMatch: ' + sameMatch + ', href: ' + href);
},
leave: function(sameMatch, href) {
console.log('No match leave: sameMatch: ' + sameMatch + ', href: ' + href);
}
});
$H.run();
> go2: sameMatch: false, href: /
$H.go('/test?param=pppp#bababebe');
> leave2: sameMatch: false, href: /
> go3: sameMatch: false, href: /test?param=pppp#bababebe, rem1: test, rem2: pppp, rem3: bebe
$H.go('/some/reg/expr');
> leave3: sameMatch: false, href: /test?param=pppp#bababebe, rem1: test, rem2: pppp, rem3: bebe
> go1: sameMatch: false, href: /some/reg/expr, rem1: reg, rem2: expr
$H.go('/ololo/piupiu');
> leave1: sameMatch: false, href: /some/reg/expr, rem1: reg, rem2: expr
> No match: sameMatch: false, href: /ololo/piupiu
> No match go: sameMatch: false, href: /ololo/piupiu
$H.go('/ololo/piupiu2');
> No match leave: sameMatch: true, href: /ololo/piupiu
> No match: sameMatch: true, href: /ololo/piupiu2
> No match go: sameMatch: true, href: /ololo/piupiu2
$H.go('/');
> No match leave: sameMatch: false, href: /ololo/piupiu2
> go2: sameMatch: false, href: /
$H.go('/');
> leave2: sameMatch: true, href: /
> go2: sameMatch: true, href: /
State
There is $H.state(key, [value])
method to set or get state entries for
current page.
$H.state('key1', {some: 'serializable', value: true});
console.log($H.state('key1'));
> Object {some: "serializable", value: true}
$H.go('/another/uri');
console.log($H.state('key1'));
> undefined
$H.state('key2', 12345);
console.log($H.state('key2'));
> 12345
window.history.back();
console.log($H.state('key2'));
> undefined
console.log($H.state('key1'));
> Object {some: "serializable", value: true}
window.history.forward();
console.log($H.state('key2'));
> 12345