From a7ad6355f51924ca452c5e007a8a6fff53ffecf9 Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Thu, 12 May 2016 20:10:16 -0400 Subject: [PATCH] todomvc: Follow HTML template and file layout more closely; use new locationHash --- js/examples/todo/{style.css => css/app.css} | 0 js/examples/todo/index.html | 129 +++++++++--------- js/examples/todo/index.js | 37 ++--- .../todomvc-app-css}/index.css | 0 .../todomvc-common}/base.css | 0 5 files changed, 76 insertions(+), 90 deletions(-) rename js/examples/todo/{style.css => css/app.css} (100%) rename js/examples/todo/{todomvc => node_modules/todomvc-app-css}/index.css (100%) rename js/examples/todo/{todomvc => node_modules/todomvc-common}/base.css (100%) diff --git a/js/examples/todo/style.css b/js/examples/todo/css/app.css similarity index 100% rename from js/examples/todo/style.css rename to js/examples/todo/css/app.css diff --git a/js/examples/todo/index.html b/js/examples/todo/index.html index 0d6251d..caf6051 100644 --- a/js/examples/todo/index.html +++ b/js/examples/todo/index.html @@ -1,70 +1,67 @@ - - - Syndicate: TodoMVC - - - - - - - - - - - - -
-
-

todos

- -
-
- - -
    - - -
-
- -
+ + + + + Syndicate • TodoMVC + + + - + + + + + + +
+
+

todos

+ +
+
+ + +
    + + +
+
+ +
+ -
- 

-  
+                

+                

+	
 
diff --git a/js/examples/todo/index.js b/js/examples/todo/index.js
index 9069600..90aaed5 100644
--- a/js/examples/todo/index.js
+++ b/js/examples/todo/index.js
@@ -1,7 +1,6 @@
 assertion type todo(id, title, completed);
 message type deleteTodo(id);
 assertion type show(completed);
-assertion type currentLocationHash(hash);
 
 /*
   To Do (ho ho ho)
@@ -27,6 +26,10 @@ assertion type currentLocationHash(hash);
 var ESCAPE_KEY_CODE = 27;
 var ENTER_KEY_CODE = 13;
 
+function getTemplate(id) {
+  return document.getElementById(id).innerHTML;
+}
+
 var nextId = 0;
 function addTodo(title) {
   title = title.trim();
@@ -48,10 +51,10 @@ function addTodo(title) {
         finally { this.visible = false; }
       }
 
-      assert this.ui.html('#todo-list',
-                          Mustache.render($(this.editing
-                                            ? '#todo-list-item-edit-template'
-                                            : '#todo-list-item-view-template').html(),
+      assert this.ui.html('.todo-list',
+                          Mustache.render(getTemplate(this.editing
+                                                      ? 'todo-list-item-edit-template'
+                                                      : 'todo-list-item-view-template'),
                                           {
                                             completed_class: this.completed ? "completed" : "",
                                             hidden_class: this.visible ? "" : "hidden",
@@ -115,22 +118,8 @@ ground dataspace G {
   }
 
   actor {
-    this.hash = hashFrom(document.location.toString());
-    function hashFrom(u) {
-      var i = u.indexOf('#');
-      return (i !== -1) ? u.slice(i + 1) : '/';
-    }
     react {
-      assert currentLocationHash(this.hash);
-      on message Syndicate.UI.windowEvent('hashchange', $e) {
-        this.hash = hashFrom(e.newURL);
-      }
-    }
-  }
-
-  actor {
-    react {
-      on asserted currentLocationHash($hash) {
+      on asserted Syndicate.UI.locationHash($hash) {
         // TODO this is a bit icky too
         var ns = document.querySelectorAll('ul.filters > li > a');
         for (var i = 0; i < ns.length; i++) { ns[i].className = ''; }
@@ -138,14 +127,14 @@ ground dataspace G {
         n.className = 'selected';
       }
 
-      during currentLocationHash('/') {
+      during Syndicate.UI.locationHash('/') {
         assert show(true);
         assert show(false);
       }
-      during currentLocationHash('/active') {
+      during Syndicate.UI.locationHash('/active') {
         assert show(false);
       }
-      during currentLocationHash('/completed') {
+      during Syndicate.UI.locationHash('/completed') {
         assert show(true);
       }
     }
@@ -157,5 +146,5 @@ ground dataspace G {
 }
 
 G.dataspace.setOnStateChange(function (mux, patch) {
-  $("#ds-state").text(Syndicate.prettyTrie(mux.routingTable));
+  document.getElementById("ds-state").innerText = Syndicate.prettyTrie(mux.routingTable);
 });
diff --git a/js/examples/todo/todomvc/index.css b/js/examples/todo/node_modules/todomvc-app-css/index.css
similarity index 100%
rename from js/examples/todo/todomvc/index.css
rename to js/examples/todo/node_modules/todomvc-app-css/index.css
diff --git a/js/examples/todo/todomvc/base.css b/js/examples/todo/node_modules/todomvc-common/base.css
similarity index 100%
rename from js/examples/todo/todomvc/base.css
rename to js/examples/todo/node_modules/todomvc-common/base.css