rework GUI, scripts, and fiddle main for multiple simultaneous configs

experimental/webtry/res/js/webtry.js

 /**
  * Common JS that talks XHR back to the server and runs the code and receives
  * the results.
  */
 
 
 /**
  * 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() {
     function onLoad() {
       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 outputWrapper   = document.getElementById('output-wrapper');
       var gpu             = document.getElementById('use-gpu');
-      var img             = document.getElementById('img');
+      var raster          = document.getElementById('use-raster');
+      var pdf             = document.getElementById('use-pdf');
+      var rasterOutput    = document.getElementById('raster-output');
+      var rasterImg       = document.getElementById('raster-img');
+      var gpuOutput       = document.getElementById('gpu-output');
+      var gpuImg          = document.getElementById('gpu-img');
       var imageWidth      = document.getElementById('image-width');
       var imageHeight     = document.getElementById('image-height');
       var tryHistory      = document.getElementById('tryHistory');
       var parser          = new DOMParser();
       var tryTemplate     = document.getElementById('tryTemplate');
       var sourcesTemplate = document.getElementById('sourcesTemplate');
 
       var enableSource   = document.getElementById('enableSource');
       var selectedSource = document.getElementById('selectedSource');
       var sourceCode     = document.getElementById('sourceCode');
@@ skipping 101 matching lines @@
           req.send();
         } else {
           sourceId = 0;
           chooseSource.classList.remove('show');
         }
       }
 
       enableSource.addEventListener('click', sourceClick, true);
       selectedSource.addEventListener('click', sourceClick, true);
 
+      function configChange(e) {
+        if (!(gpu.checked || raster.checked || pdf.checked)) {
+          run.disabled = true;
+          run.innerHTML = "Choose a configuration"
+        } else {
+          run.disabled = false;
+          run.innerHTML = "Run"
+        }
+      }
+
+      gpu.addEventListener('change', configChange);
+      raster.addEventListener('change', configChange);
+      pdf.addEventListener('change', configChange);
+
 
       var editor = CodeMirror.fromTextArea(code, {
         theme: "default",
         lineNumbers: true,
         matchBrackets: true,
         lineWrapping: true,
         mode: "text/x-c++src",
         indentUnit: 4,
       });
 
@@ skipping 49 matching lines @@
       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;
         editor.setValue(body.code);
-        img.src = '/i/'+body.hash+'.png';
+        rasterImg.src = '/i/'+body.hash+'_raster.png';
+        gpuImg.src = '/i/'+body.hash+'_gpu.png';
         imageWidth.value = body.width;
         imageHeight.value = body.height;
         gpu.checked = body.gpu;
         sourceSelectByID(body.source);
         if (permalink) {
           permalink.href = '/c/' + body.hash;
           permalink.style.display='inline-block';
         }
       }
 
@@ skipping 66 matching lines @@
 
             editor.addLineClass( parseInt( compileError.line ) - 1, "wrap", "error" );
           }
           outputWrapper.style.display = 'block';
         } else {
           output.textContent = body.message;
           if (body.message) {
             outputWrapper.style.display = 'block';
           }
         }
-        if (body.hasOwnProperty('img')) {
-          img.src = 'data:image/png;base64,' + body.img;
+        if (body.hasOwnProperty('rasterImg') && body.rasterImg != "") {
+          rasterImg.src = 'data:image/png;base64,' + body.rasterImg;
+          rasterOutput.style.display = "inline-block";
         } else {
-          img.src = '';
+          rasterOutput.style.display = "none";
+          rasterImg.src = '';
+        }
+        if (body.hasOwnProperty('gpuImg') && body.gpuImg != "") {
+          gpuImg.src = 'data:image/png;base64,' + body.gpuImg;
+          gpuOutput.style.display = "inline-block";
+        } else {
+          gpuImg.src = '';
+          gpuOutput.style.display = "none";
         }
         // Add the image to the history if we are on a workspace page.
         if (tryHistory) {
-          addToHistory(body.hash, 'data:image/png;base64,' + body.img);
+          addToHistory(body.hash, 'data:image/png;base64,' + body.rasterImg);
         } else {
           window.history.pushState(null, null, '/c/' + body.hash);
         }
         if (permalink) {
           permalink.href = '/c/' + body.hash;
           permalink.style.display = 'inline-block';
         }
         if (embed) {
           setIFrameURL();
         }
         if (embedButton) {
           embedButton.style.display = 'inline-block';
         }
       }
 
-
       function onSubmitCode() {
         beginWait();
         clearOutput();
         var req = new XMLHttpRequest();
         req.addEventListener('load', codeComplete);
         req.addEventListener('error', xhrError);
         req.overrideMimeType('application/json');
         req.open('POST', '/', true);
         req.setRequestHeader('content-type', 'application/json');
         req.send(JSON.stringify({
           'code': editor.getValue(),
           'width': parseInt(imageWidth.value),
           'height': parseInt(imageHeight.value),
           'name': workspaceName,
           'source': sourceId,
-          'gpu': gpu.checked
+          'gpu': gpu.checked,
+          'raster': raster.checked,
+          'pdf': pdf.checked
         }));
       }
       run.addEventListener('click', onSubmitCode);
 
 
       function onEmbedClick() {
         embed.style.display='inline';
       }
 
       if (embedButton) {
@@ skipping 11 matching lines @@
     }
 
     // If loaded via HTML Imports then DOMContentLoaded will be long done.
     if (document.readyState != "loading") {
       onLoad();
     } else {
       this.addEventListener('load', onLoad);
     }
 
 })();
+
+// TODO (humper) -- move the following functions out of the global
+// namespace as part of a web-components based fiddle frontend rewrite.
+
+function collectionHas(a, b) { //helper function (see below)
+    for(var i = 0, len = a.length; i < len; i ++) {
+        if(a[i] == b) return true;
+    }
+    return false;
+}
+function findParentBySelector(elm, selector) {
+    var all = document.querySelectorAll(selector);
+    var cur = elm.parentNode;
+    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
+        cur = cur.parentNode; //go up
+    }
+    return cur; //will return null if not found
+}
+
+function onLoadImage(img) {
+  var wrapper = findParentBySelector(img, ".image-wrapper");
+  wrapper.style.display = "inline-block";
+}