Add solutions for Chapter 21

Author: marijnh

bin/chapter_info.js

@@ -6,7 +6,7 @@ var fs = require("fs");
 
 var output = [], failed = false;
 
-var allSolutions = fs.readdirSync("code/solutions/").filter(function(file) { return !/^20/.test(file); });
+var allSolutions = fs.readdirSync("code/solutions/").filter(function(file) { return !/^2[01]/.test(file); });
 
 var dir = fs.readdirSync(".");
 dir.sort();
@@ -92,6 +92,29 @@ dir.forEach(function(file) {
      solution: "// This solutions consists of multiple files. Download it\n// though the link below.\n"
     }
   ];
+  if (chapter.number == 21) chapter.exercises = [
+    {name: "Disk persistence",
+     file: "code/solutions/21_1_disk_persistence.js",
+     number: 1,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/21_1_disk_persistence.js", "utf8")
+    },
+    {name: "Comment field resets",
+     file: "code/solutions/21_2_comment_field_resets.js",
+     number: 2,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/21_2_comment_field_resets.js", "utf8")
+    },
+    {name: "Better templates",
+     file: "code/solutions/21_3_better_templates.js",
+     number: 3,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/21_3_better_templates.js", "utf8")
+    }
+  ];
 
   output.push(chapter);
 });

code/solutions/21_1_disk_persistence.js

@@ -0,0 +1,28 @@
+// This isn't a stand-alone file, only a redefinition of a few
+// fragments from skillsharing/skillsharing_server.js
+
+var fs = require("fs");
+
+var talks = loadTalks();
+
+function loadTalks() {
+  var result = Object.create(null), json;
+  try {
+    json = JSON.parse(fs.readFileSync("./talks.json", "utf8"));
+  } catch (e) {
+    json = {};
+  }
+  for (var title in json)
+    result[title] = json[title];
+  return result;
+}
+
+function registerChange(title) {
+  changes.push({title: title, time: Date.now()});
+  waiting.forEach(function(waiter) {
+    sendTalks(getChangedTalks(waiter.since), waiter.response);
+  });
+  waiting = [];
+
+  fs.writeFile("./talks.json", JSON.stringify(talks));
+}

code/solutions/21_2_comment_field_resets.js

@@ -0,0 +1,28 @@
+// This isn't a stand-alone file, only a redefinition of displayTalks
+// from skillsharing/public/skillsharing_client.js
+
+function displayTalks(talks) {
+  talks.forEach(function(talk) {
+    var shown = shownTalks[talk.title];
+    if (talk.deleted) {
+      if (shown) {
+        talkDiv.removeChild(shown);
+        delete shownTalks[talk.title];
+      }
+    } else {
+      var node = drawTalk(talk);
+      if (shown) {
+        var textField = shown.querySelector("input");
+        var hasFocus = document.activeElement == textField;
+        var value = textField.value;
+        talkDiv.replaceChild(node, shown);
+        var newTextField = node.querySelector("input");
+        newTextField.value = value;
+        if (hasFocus) newTextField.focus();
+      } else {
+        talkDiv.appendChild(node);
+      }
+      shownTalks[talk.title] = node;
+    }
+  });
+}

code/solutions/21_3_better_templates.js

@@ -0,0 +1,65 @@
+// Note that the first argument to instantiateTemplate was changed to
+// be the template itself, not its name, to make testing easier.
+
+function instantiateTemplate(template, values) {
+  function instantiateText(text, values) {
+    return text.replace(/\{\{(\w+)\}\}/g, function(_, name) {
+      return values[name];
+    });
+  }
+  function attr(node, attrName) {
+    return node.nodeType == document.ELEMENT_NODE &&
+      node.getAttribute(attrName);
+  }
+  function instantiate(node, values) {
+    if (node.nodeType == document.ELEMENT_NODE) {
+      var copy = node.cloneNode();
+      for (var i = 0; i < node.childNodes.length; i++) {
+        var child = node.childNodes[i];
+
+        var when = attr(child, "template-when"), unless = attr(child, "template-unless");
+        if (when && !values[when] || unless && values[unless])
+          continue;
+
+        var repeat = attr(child, "template-repeat");
+        if (repeat)
+          (values[repeat] || []).forEach(function(element) {
+            copy.appendChild(instantiate(child, element));
+          });
+        else
+          copy.appendChild(instantiate(child, values));
+      }
+      return copy;
+    } else if (node.nodeType == document.TEXT_NODE) {
+      return document.createTextNode(instantiateText(node.nodeValue, values));
+    }
+  }
+
+  return instantiate(template, values);
+}
+
+// A simple test function to verify that the above actually works
+
+function test(template, values, expected) {
+  var testTemplate = document.createElement("div");
+  testTemplate.innerHTML = template;
+  var result = instantiateTemplate(testTemplate, values).innerHTML;
+  if (result != expected)
+    console.log("Unexpected instantiation. Expected\n  " + expected + "\ngot\n  " + result);
+}
+
+test('<h1 template-when="header">{{header}}</h1>',
+     {header: "One"},
+     '<h1 template-when="header">One</h1>');
+
+test('<h1 template-when="header">{{header}}</h1>',
+     {header: false},
+     '');
+
+test('<p><img src="icon.png" template-unless="noicon">Hello</p>',
+     {noicon: true},
+     '<p>Hello</p>');
+
+test('<ol><li template-repeat="items">{{name}}: {{score}}</li></ol>',
+     {items: [{name: "Alice", score: "10"}, {name: "Bob", score: "7"}]},
+     '<ol><li template-repeat="items">Alice: 10</li><li template-repeat="items">Bob: 7</li></ol>');