@naikus/stage
Version:
Check out the live [demo](https://codepen.io/naikus/project/full/AzkkER) (POC uses plain javascript and HTML)
272 lines (249 loc) • 7.9 kB
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="480" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cleartype" content="on" />
<meta name="theme-color" content="#456" />
<link rel="stylesheet" type="text/css" href="css/stage.css" />
<style>
body {
font-family: "Helvetica Neue", sans-serif;
font-size: 1em;
}
#viewPort {
background-color: #232a33;
position: absolute;
/*
width: 60%;
height: 500px;
top: 5%;
left: 20%;
*/
width: 100%;
min-height: 100%;
/*height: 600px;*/
top: 0;
left: 0;
}
#actionbar {
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
/* background-color: #232d37; */
background-color: #456;
border: 1px solid rgba(0,0,0,0.1);
color: #fff;
padding: 10px;
font-weight: normal;
font-size: 0.9em;
z-index: 100;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
min-height: 60px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
transition: background 500ms ease;
letter-spacing: 4px;
font-family: 'Arial Black';
display: flex;
align-items: center;
}
.stage-view {
padding: 25px;
padding-top: 60px;
background-color: #586d82;
color: #fff;
}
.stage-view .btn {
display: inline-block;
width: 80px;
font-size: 3em;
background: #456;
color: #fff;
padding: 10px;
padding-top: 5px;
border-radius: 4px;
margin-right: 10px;
border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.stage-view p {
line-height: 1.3em;
font-size: 1.1em;
}
.stage-view .btn:active {
background: #345;
}
.one {
background: #B9CC98;
}
.two {
background: #739aaa;
color: #fafafa;
}
.three {
background: #D77E8E;
color: #fff;
}
.four {
background: #61B0C8;
color: #fff;
}
.five {
background: rgb(213, 178, 104);
color: #fff;
}
</style>
</head>
<!-- Don't keep body as the view-port on android devices cause the views don't scroll -->
<body>
<!-- All our views will be shown here -->
<div class="stage-viewport" id="viewPort">
<div class="stage-view one" data-view="one">
<h1>View One</h1>
<button class="btn" id="btn1">»</button>
</div>
<div class="stage-view two" data-view="two">
<h1>View Two</h1>
<p>Shows usage of cutom context. In this case a custom title() function is called.</p>
<button class="btn" id="btn2">«</button>
<button class="btn" id="btn3">»</button>
<p class="message"></p>
</div>
</div>
<div id="actionbar">WELCOME</div>
<script src="js/stage.js"> </script>
<script>
var ACTION = ("ontouchend" in document.documentElement) ? "touchend" : "click";
var viewPort = document.getElementById("viewPort"),
actionbar = document.getElementById("actionbar");
Stage.defineView({
id: "one",
factory: function(view_context, viewUi) {
function handleTransitionOut(e) {
// do somethng
}
return {
initialize: function() {
document.getElementById("btn1").addEventListener(ACTION, function() {
view_context.pushView('two', {transition: 'slide-up'/*, replace: true */});
}, false);
viewUi.addEventListener("beforetransitionout", handleTransitionOut);
},
destroy: function() {
console.log("Destroying all views");
viewUi.removeEventListener("beforetransitionout", handleTransitionOut);
}
};
}
});
Stage.defineView({
id: "two",
factory: function(view_context, viewUi) {
return {
initialize: function() {
document.getElementById("btn2").addEventListener(ACTION, function() {
stage.popView();
}, false);
document.getElementById("btn3").addEventListener(ACTION, function() {
view_context.pushView('three', {transition: 'slide-down'});
}, false);
viewUi.addEventListener("transitionin", function() {
viewUi.querySelector(".message").innerHTML = view_context.title();
});
},
activate(options) {
console.log(options);
}
};
}
});
Stage.defineView({
id: "three",
template: `<div class="stage-view three">
<h1>View Three</h1>
<p>Clicking » will show the next view after some delay</p>
<button class="btn" id="btn4">«</button>
<button class="btn" id="btn5">»</button>
</div>`,
factory: function(view_context, viewUi) {
return {
initialize: function() {
document.getElementById("btn4").addEventListener(ACTION, function() {
view_context.popView();
}, false);
document.getElementById("btn5").addEventListener(ACTION, function() {
view_context.pushView('four');
}, false);
},
activate: function(options, done) {
actionbar.innerHTML = "Loading...";
// Simulate delay (Should not affect transition smoothness)
// /*
setTimeout(function() {
// Tell the stage that we are done
done();
}, 200);
// */
}
};
}
});
var stage = Stage({
// viewport: "#viewPort",
viewport: viewPort,
transition: "slide", // Use null for no transitions
contextFactory: function(stage) {
var users = ["Alice", "Bob", "Joe"],
getUser = function () {
return users[Math.floor(Math.random() * users.length)];
};
return {
title: function () {
return "Hello, " + getUser();
}
};
}
});
// Define a fourth external view
Stage.views({
"four": {
path: "views/four/view-four.html",
config: {
transition: "pop-out"
}
},
"five": {
path: "views/five.js",
config: {
"hello": "world"
}
}
});
viewPort.addEventListener("viewtransitionin", function(e) {
actionbar.innerHTML = "VIEW " + e.viewId.toUpperCase();
}, false);
viewPort.addEventListener("beforeviewtransitionin", function(e) {
actionbar.innerHTML = "";
// console.log(e.viewId, stage.getViewConfig(e.viewId));
// actionbar.className = e.viewId;
}, false);
setTimeout(function() {
stage.pushView("one");
}, 100);
</script>
</body>
</html>