Adding the ability to click on the images in the history and have that load

experimental/webtry/js/run.js

Index: experimental/webtry/js/run.js
diff --git a/experimental/webtry/js/run.js b/experimental/webtry/js/run.js
index 5cd43ac93ab1beee0912483e854c6fd0af02fe71..c69e2bcc22c7494ce671aeced6c78f5fec53f241 100644
--- a/experimental/webtry/js/run.js
+++ b/experimental/webtry/js/run.js
@@ -49,14 +49,6 @@
     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;
@@ -70,6 +62,60 @@
 
 
     /**
+     * Callback when there's an XHR error.
+     * @param e The callback event.
+     */
+    function xhrError(e) {
+      endWait();
+      alert('Something bad happened: ' + e);
+    }
+
+    /**
+     * Called when an image in the workspace history is clicked.
+     */
+    function historyClick() {
+      beginWait();
+      var req = new XMLHttpRequest();
+      req.addEventListener('load', historyComplete);
+      req.addEventListener('error', xhrError);
+      req.overrideMimeType('application/json');
+      req.open('GET', this.getAttribute('data-try'), true);
+      req.send();
+    }
+
+
+    /**
+     * Callback for when the XHR kicked off in historyClick() returns.
+     */
+    function historyComplete(e) {
+      // The response is JSON of the form:
+      // {
+      //   "hash": "unique id for a try",
+      //   "code": "source code for try"
+      // }
+      endWait();
+      body = JSON.parse(e.target.response);
+      code.value = body.code;
+      img.src = '/i/'+body.hash+'.png';
+      if (permalink) {
+        permalink.href = '/c/' + body.hash;
+      }
+    }
+
+
+    /**
+     * Add the given try image to the history of a workspace.
+     */
+    function addToHistory(hash, imgUrl) {
+      var clone = tryTemplate.content.cloneNode(true);
+      clone.querySelector('img').src = imgUrl;
+      clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash);
+      tryHistory.insertBefore(clone, tryHistory.firstChild);
+      tryHistory.querySelector('.tries').addEventListener('click', historyClick, true);
+    }
+
+
+    /**
      * Callback for when the XHR returns after attempting to run the code.
      * @param e The callback event.
      */
@@ -95,10 +141,10 @@
       if (tryHistory) {
         addToHistory(body.hash, 'data:image/png;base64,' + body.img);
       } else {
-        window.history.pushState(null, null, "./" + body.hash);
+        window.history.pushState(null, null, './' + body.hash);
       }
       if (permalink) {
-        permalink.href = "/c/" + body.hash;
+        permalink.href = '/c/' + body.hash;
       }
       if (embed) {
         var url = document.URL;
@@ -111,25 +157,15 @@
     }
 
 
-    /**
-     * Callback where there's an XHR error.
-     * @param e The callback event.
-     */
-    function codeError(e) {
-      endWait();
-      alert('Something bad happened: ' + e);
-    }
-
-
     function onSubmitCode() {
       beginWait();
       var req = new XMLHttpRequest();
       req.addEventListener('load', codeComplete);
-      req.addEventListener('error', codeError);
+      req.addEventListener('error', xhrError);
       req.overrideMimeType('application/json');
       req.open('POST', '/', true);
       req.setRequestHeader('content-type', 'application/json');
-      req.send(JSON.stringify({"code": code.value, "name": workspaceName}));
+      req.send(JSON.stringify({'code': code.value, 'name': workspaceName}));
     }
     run.addEventListener('click', onSubmitCode);