crazy mikes eve example
This commit is contained in:
parent
d4f95d3a7b
commit
c15b75ecae
|
@ -0,0 +1,70 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Crazy Mike's</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
|
||||||
|
<script src="../../../third-party/jquery-2.2.0.min.js"></script>
|
||||||
|
<script src="../../../dist/syndicatecompiler.js"></script>
|
||||||
|
<script src="../../../dist/syndicate.js"></script>
|
||||||
|
<script type="text/syndicate-js" src="index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app-wrapper">
|
||||||
|
<div class="hero-image"></div>
|
||||||
|
<div class="nav-bar" id="nav-bar">
|
||||||
|
<template id="nav-bar-btn">
|
||||||
|
<div id="nav-btn-{{order}}" class="nav-btn">{{name}}</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div id="page-contents">
|
||||||
|
<template id="home-contents">
|
||||||
|
<p>
|
||||||
|
Located on the scenic Pulaski Highway in East Baltimore,
|
||||||
|
Crazy Mike's has the region's best selection of used electronics,
|
||||||
|
and our prices are INSANE!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Hours: Tue-Sat 2pm-4am
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Contact: (410) 768-7000, Ask for Mike
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template id="computers-contents">
|
||||||
|
<p>Need to compute things? We can help.</p>
|
||||||
|
<div class="computer pic"></div>
|
||||||
|
<p>
|
||||||
|
One of our many fine products, this War Operations Plan Response
|
||||||
|
supercomputer was repossessed from the US Dept. of Defense in 1984.
|
||||||
|
Comes with classic games such as chess, checkers, backgammon, poker,
|
||||||
|
tic-tac-toe, and Global Thermonuclear War, though it has been known
|
||||||
|
not to play. Open box, comes as-is. Strict no return policy.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template id="televisions-contents">
|
||||||
|
<p>This is where the TVs live - get you one!</p>
|
||||||
|
<div class="tv pic"></div>
|
||||||
|
<p>
|
||||||
|
Forget the internet, this baby is the real series of tubes. Perfect
|
||||||
|
for your LaserDisc collection.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<template id="stereos-contents">
|
||||||
|
<p>The hottest audio equipment in town!</p>
|
||||||
|
<div class="radio pic"></div>
|
||||||
|
<p>
|
||||||
|
New stock arriving daily, priced to move.
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<div>
|
||||||
|
<pre id="ds-state"></pre>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,73 @@
|
||||||
|
assertion type page(name, order);
|
||||||
|
assertion type currentPage(name);
|
||||||
|
|
||||||
|
function spawnNavBar(defaultPage) {
|
||||||
|
spawn {
|
||||||
|
field this.currentPage = defaultPage;
|
||||||
|
assert currentPage(this.currentPage);
|
||||||
|
on message Syndicate.UI.globalEvent('.nav-btn', 'click', $e) {
|
||||||
|
// INVARIANT: the text content of each nav bar button is the page name
|
||||||
|
this.currentPage = e.originalTarget.textContent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// It seems conceivable that a transition between pages (currentPage changing)
|
||||||
|
// could see a 'glitch' where both the previous and the next page are asserting
|
||||||
|
// '#page-contents'.
|
||||||
|
//
|
||||||
|
// This does not seem to manifest with the current scheduling. There's also the
|
||||||
|
// possiblity that it *is* happening and my feeble human perception cannot
|
||||||
|
// detect it. Or, perhaps, there is something I am missing and there is some
|
||||||
|
// reason the glitch does not happen.
|
||||||
|
function spawnPage(pg) {
|
||||||
|
spawn {
|
||||||
|
this.ui = new Syndicate.UI.Anchor();
|
||||||
|
this.ctx = this.ui.context(pg.name);
|
||||||
|
|
||||||
|
assert this.ctx.html('#nav-bar', Mustache.render($('#nav-bar-btn').html(), {name: pg.name}), pg.order);
|
||||||
|
|
||||||
|
during currentPage(pg.name) {
|
||||||
|
assert this.ui.html('#page-contents', pg.contents);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var homePage = {
|
||||||
|
name: "Home",
|
||||||
|
order: 1,
|
||||||
|
contents: Mustache.render($('#home-contents').html())
|
||||||
|
};
|
||||||
|
|
||||||
|
var computersPage = {
|
||||||
|
name: "Computers",
|
||||||
|
order: 2,
|
||||||
|
contents: Mustache.render($('#computers-contents').html())
|
||||||
|
};
|
||||||
|
|
||||||
|
var televisionsPage = {
|
||||||
|
name: "Televisions",
|
||||||
|
order: 3,
|
||||||
|
contents: Mustache.render($('#televisions-contents').html())
|
||||||
|
};
|
||||||
|
|
||||||
|
var stereosPage = {
|
||||||
|
name: "Stereos",
|
||||||
|
order: 4,
|
||||||
|
contents: Mustache.render($('#stereos-contents').html())
|
||||||
|
};
|
||||||
|
|
||||||
|
var pages = [homePage, computersPage, televisionsPage, stereosPage];
|
||||||
|
var defaultPage = homePage.name;
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
ground dataspace G {
|
||||||
|
Syndicate.UI.spawnUIDriver();
|
||||||
|
spawnNavBar(defaultPage);
|
||||||
|
pages.forEach(spawnPage);
|
||||||
|
}
|
||||||
|
// debugging
|
||||||
|
G.dataspace.setOnStateChange(function (mux, patch) {
|
||||||
|
$("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,78 @@
|
||||||
|
.app-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* position: absolute; */
|
||||||
|
align-self: center;
|
||||||
|
width: 432px;
|
||||||
|
height: 768px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
height: 300px;
|
||||||
|
background-image: url(http://i.imgur.com/L8suaDZ.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
background: #404040;
|
||||||
|
line-height: 50px;
|
||||||
|
color: #fff;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
background: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-page h1 {
|
||||||
|
margin: 10px 0px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-page p {
|
||||||
|
margin: 5px 25px;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic {
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.computer {
|
||||||
|
height: 150px;
|
||||||
|
width: 320px;
|
||||||
|
background: url(http://i.imgur.com/2EbQYGA.jpg) center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tv {
|
||||||
|
height: 250px;
|
||||||
|
width: 320px;
|
||||||
|
background: url(http://i.imgur.com/0kD08WU.jpg) center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
height: 250px;
|
||||||
|
width: 320px;
|
||||||
|
background: url(http://i.imgur.com/rs1NW31.jpg) center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
Loading…
Reference in New Issue