Move to using HTML templates when filling out the workspace history.

experimental/webtry/js/run.js

 /**
  * Common JS that talks XHR back to the server and runs the code and receives
  * the results.
  */
 
 /**
+ * A polyfill for HTML Templates.
+ *
+ * This just adds in the content attribute, it doesn't stop scripts
+ * from running nor does it stop other side-effects.
+ */
+(function polyfillTemplates() {
+  if('content' in document.createElement('template')) {
+    return false;
+  }
+
+  var templates = document.getElementsByTagName('template');
+  for (var i=0; i<templates.length; i++) {
+    var content = document.createDocumentFragment();
+    while (templates[i].firstChild) {

[mtklein, 2014/04/21 16:19:01]

This may be me being rusty on the DOM, but is this not an infinite loop?

[jcgregorio, 2014/04/21 16:26:24]

A node can only be owned by one parent, when the node is appended to content it
is automatically removed from templates[i].


On 2014/04/21 16:19:01, mtklein wrote:

[mtklein, 2014/04/21 16:31:14]

Ah, duh, clearly rusty.

+     content.appendChild(templates[i].firstChild);
+    }
+    templates[i].content = content;
+  }
+})();
+
+/**
  * All the functionality is wrapped up in this anonymous closure, but we need
  * to be told if we are on the workspace page or a normal try page, so the
  * workspaceName is passed into the closure, it must be set in the global
  * namespace. If workspaceName is the empty string then we know we aren't
  * running on a workspace page.
+ *
+ * If we are on a workspace page we also look for a 'history'
+ * variable in the global namespace which contains the list of tries
+ * that are included in this workspace. That variable is used to
+ * populate the history list.
  */
 (function(workspaceName) {
     var run = document.getElementById('run');
     var permalink = document.getElementById('permalink');
     var embed = document.getElementById('embed');
     var embedButton = document.getElementById('embedButton');
     var code = document.getElementById('code');
     var output = document.getElementById('output');
     var img = document.getElementById('img');
     var tryHistory = document.getElementById('tryHistory');
     var parser = new DOMParser();
+    var tryTemplate = document.getElementById('tryTemplate');
+
+
+    function addToHistory(hash, imgUrl) {
+      var clone = tryTemplate.content.cloneNode(true);
+      clone.querySelector('a').href = '/c/' + hash;
+      clone.querySelector('img').src = imgUrl;
+      tryHistory.insertBefore(clone, tryHistory.firstChild);
+    }
 
 
     function beginWait() {
       document.body.classList.add('waiting');
       run.disabled = true;
     }
 
 
     function endWait() {
       document.body.classList.remove('waiting');
@@ skipping 18 matching lines @@
       console.log(e.target.response);
       body = JSON.parse(e.target.response);
       output.innerText = body.message;
       if (body.hasOwnProperty('img')) {
         img.src = 'data:image/png;base64,' + body.img;
       } else {
         img.src = '';
       }
       // Add the image to the history if we are on a workspace page.
       if (tryHistory) {
-        var newHistoryStr = '<div class=tries>' +
-          '<a href="/c/' + body.hash + '">' +
-          '  <img width=64 height=64 src="' + img.src +  '">' +
-          '</a></div>';
-
-        var newHistory = parser.parseFromString(newHistoryStr, "text/html");
-        tryHistory.insertBefore(newHistory.body.firstChild, tryHistory.firstChild);
+        addToHistory(body.hash, 'data:image/png;base64,' + body.img);
       } else {
         window.history.pushState(null, null, "./" + body.hash);
       }
       if (permalink) {
         permalink.href = "/c/" + body.hash;
       }
       if (embed) {
         var url = document.URL;
         url = url.replace('/c/', '/iframe/');
         embed.value = '<iframe src="' + url + '" width="740" height="550" style="border: solid #00a 5px; border-radius: 5px;"/>'
@@ skipping 28 matching lines @@
 
 
     function onEmbedClick() {
       embed.style.display='inline';
     }
 
     if (embedButton) {
       embedButton.addEventListener('click', onEmbedClick);
     }
 
+
+    // Add the images to the history if we are on a workspace page.
+    if (tryHistory && history) {
+      for (var i=0; i<history.length; i++) {
+        addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
+      }
+    }
+
 })(workspaceName);