stateman
Version:
A tiny foundation that providing nested state-based routing for complex web application.
89 lines (76 loc) • 1.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StateMan Test</title>
<script src="../stateman.js"></script>
</head>
<body>
<ul>
<li><a href="#/app">/app"</a></li>
<li><a href="#/app/blog">/app/blog"</a></li>
<li><a href="#/app/user">/app/user</a></li>
</ul>
<script>
var config = {
enter: function(){
console.log("enter: " + this.name)
},
leave: function(){
console.log("leave: " + this.name)
},
canEnter: function(){
console.log("canEnter: " + this.name)
},
canLeave: function(){
console.log("canLeave: " + this.name)
}
}
function create(o){
o = o || {};
o.enter= o.enter || config.enter;
o.leave = o.leave || config.leave;
return o;
}
var delay = function(time){
return new Promise(function(resolve){
setTimeout( resolve, time)
})
}
var confirmp = function(str){
return new Promise(function (resolve, reject){
if( confirm(str) ) return resolve()
reject();
})
}
var stateman = new StateMan();
var blogDelay = false;
stateman
.state("app", config)
.state("app.blog", create({
enter: function(option){
blogDelay = true;
console.log('app.blog is blocked for 3s ')
return delay(3000).then(function(){
// because user stop this navigating before delay is done
if(!blogDelay) return;
blogDelay = false;
console.log('app.blog is done')
})
},
canLeave: function(option){
if(blogDelay){
var accept = confirmp('blog is pending, want to leave?')
if( accept ) {
blogDelay = false;
console.log('accept to leave from app.blog before done')
}
return accept;
}
}
}))
.state('app.user', config)
.start({})
</script>
</body>
</html>