diff --git a/js/examples/eve/crazy-mikes/index.html b/js/examples/eve/crazy-mikes/index.html new file mode 100644 index 0000000..6b31497 --- /dev/null +++ b/js/examples/eve/crazy-mikes/index.html @@ -0,0 +1,70 @@ + + + + Crazy Mike's + + + + + + + + + + +
+
+ +
+ + + + +
+
+ +
+
+ 

+    

+  
+
diff --git a/js/examples/eve/crazy-mikes/index.js b/js/examples/eve/crazy-mikes/index.js
new file mode 100644
index 0000000..62cb6c4
--- /dev/null
+++ b/js/examples/eve/crazy-mikes/index.js
@@ -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));
+  });
+});
diff --git a/js/examples/eve/crazy-mikes/style.css b/js/examples/eve/crazy-mikes/style.css
new file mode 100644
index 0000000..5ffe0db
--- /dev/null
+++ b/js/examples/eve/crazy-mikes/style.css
@@ -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;
+}