Merge pull request #111 from stisa/improve-run

Improvements to `Run`

forms.tmpl

@@ -115,6 +115,7 @@
       </div>
     </div>
   </div>
+  <script>appendRunBtn()</script>
 </div>
 #end proc
 #
@@ -177,45 +178,73 @@
 #  end for
 <script>
   // tiny helper that run the code in the playground
-  var els = Array.prototype.slice.call(document.getElementsByClassName("listing"))
+  function appendEachRunBtn(element) {
-  els.forEach(function(element) {
+    if (element.getElementsByClassName("runDiv").length>0){
-    var runDiv = document.createElement("DIV")
+      return; // already has a run btn
-    runDiv.setAttribute("class", "runDiv")
+    }
-    var btn = document.createElement("BUTTON")
+    var runDiv = document.createElement("DIV");
-    var t = document.createTextNode("Run")
+    var btn = document.createElement("BUTTON");
-    var code = element.innerText
+    var t = document.createTextNode("Run");
-    btn.appendChild(t)
+    var playLink = document.createElement("a")
+    var code = element.textContent;
+    var spinners = [" ◆ "," ◇ "];  
+    playLink.title = "Edit in playground" 
+    playLink.textContent = "Edit" 
+    playLink.setAttribute('href', "https://play.nim-lang.org?code="+encodeURIComponent(code));  
+    playLink.setAttribute("class", "button");
+    playLink.setAttribute("target", "_blank");
+    runDiv.setAttribute("class", "runDiv");
+    btn.appendChild(t);
     btn.onclick = function(){
       var httpRequest = new XMLHttpRequest();
-      httpRequest.open("POST", "https://play.nim-lang.org/compile", true)
+      var start = null;
+      httpRequest.open("POST", "https://play.nim-lang.org/compile", true);    
+      btn.textContent = spinners[1];
+      function step(timestamp) {
+        if (!start) start = timestamp;
+        if (timestamp - start > 500) {
+          if (btn.textContent == spinners[0]) { btn.textContent = spinners[1] }
+          else { btn.textContent = spinners[0] }          
+          start = null;
+        }
+        if (httpRequest.status != 200){ window.requestAnimationFrame(step) }
+        else { btn.textContent = "Run" }
+      }
       function displayContents(e){
-        if (httpRequest.readyState!=httpRequest.DONE){return} 
+        if (httpRequest.readyState!=httpRequest.DONE){ return } 
         if (httpRequest.status == 200){
-          var res = JSON.parse(httpRequest.responseText)
+          var res = JSON.parse(httpRequest.responseText);
-          // this works because only 1 `element` is inside `element`
+          // this works because only 1 `resDiv` is inside `element`
-          var resDiv = element.getElementsByClassName("resDiv")[0]
+          var resDiv = element.getElementsByClassName("resDiv")[0];
           if (resDiv == null) {
-            resDiv = document.createElement("DIV")
+            resDiv = document.createElement("DIV");
-            runDiv.appendChild(resDiv)          
+            runDiv.appendChild(resDiv);
           }
-          if (res.log != "Compilation Failed\u000A"){
+          if (res.compileLog.lastIndexOf("[SuccessX]") != -1){
-            resDiv.textContent = res.log
+            resDiv.textContent = res.log;
-            resDiv.setAttribute("class", "resDiv successComp")          
+            resDiv.setAttribute("class", "resDiv successComp");
           } else {
-            resDiv.textContent = res.compileLog
+            resDiv.textContent = res.compileLog;
-            resDiv.setAttribute("class","resDiv failedComp")
+            resDiv.setAttribute("class","resDiv failedComp");
           }
         } else {
-          console.log("There was a problem with the request.")
+          console.log("There was a problem with the request.");
         }
       }
-      httpRequest.onreadystatechange = displayContents
+      httpRequest.onreadystatechange = displayContents;
-      httpRequest.send(JSON.stringify({"code": code, "compilationTarget": "c"}))
+      httpRequest.send(JSON.stringify({"code": code, "compilationTarget": "c"}));
+      window.requestAnimationFrame(step);
     }
-    runDiv.appendChild(document.createElement("HR"))
+    runDiv.appendChild(document.createElement("HR"));
-    runDiv.appendChild(btn)
+    runDiv.appendChild(btn);
-    element.appendChild(runDiv)
+    runDiv.appendChild(playLink);
-  }, this);
+    element.appendChild(runDiv);
+  }
+  function appendRunBtn(){
+    var els = Array.prototype.slice.call(document.getElementsByClassName("langNim"));
+    els.forEach(appendEachRunBtn, this);
+  }
+  appendRunBtn()
 </script>
 </div>
 #end proc

public/css/style.css

@@ -453,7 +453,7 @@ div#sidebar .content
 
 }
 
-div#sidebar .content .button, .runDiv>button
+div#sidebar .content .button, .runDiv>button, .runDiv>a
 {
   background-color: rgba(0,0,0,0.2);
   text-decoration: none;
@@ -728,14 +728,21 @@ blockquote p {
   border: 1px solid #80828d;
 }
 
-.runDiv > button {
+.runDiv > a {
+  color: #FFF !important;
+  padding: 3.5pt;
+  margin-right: 3pt;
+}
+
+.runDiv > button, .runDiv > a {
   cursor: pointer;
   border: none; /* remove border from runDiv>button */
   border-bottom: 2px solid rgba(0,0,0,0.24);
   background-color: #80828d;
 }
 
-.runDiv>button:hover {
+.runDiv>button:hover, .runDiv > a:hover {
+  text-decoration: none !important;
   border-bottom: 2px solid rgba(255, 255, 255, 0.5);
 }
 

utils.nim

@@ -28,6 +28,7 @@ type
 var docConfig: StringTableRef
 
 docConfig = rstgen.defaultConfig()
+docConfig["doc.listing_start"] = "<pre class=\"listing $2\">"
 docConfig["doc.smiley_format"] = "/images/smilieys/$1.png"
 
 proc loadConfig*(filename = getCurrentDir() / "forum.json"): Config =