From 0121f8bd9d02ac3605553bad23595a32795176bc Mon Sep 17 00:00:00 2001
From: stisa <stisa4@gmail.com>
Date: Tue, 24 Oct 2017 23:12:19 +0200
Subject: [PATCH] loading; open in playground; improve compat (ie9+)

---
 forms.tmpl           | 83 ++++++++++++++++++++++++++++++--------------
 public/css/style.css | 13 +++++--
 2 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/forms.tmpl b/forms.tmpl
index 3b33156..fcb2623 100644
--- a/forms.tmpl
+++ b/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"))
-  els.forEach(function(element) {
-    var runDiv = document.createElement("DIV")
-    runDiv.setAttribute("class", "runDiv")
-    var btn = document.createElement("BUTTON")
-    var t = document.createTextNode("Run")
-    var code = element.innerText
-    btn.appendChild(t)
+  function appendEachRunBtn(element) {
+    if (element.getElementsByClassName("runDiv").length>0){
+      return; // already has a run btn
+    }
+    var runDiv = document.createElement("DIV");
+    var btn = document.createElement("BUTTON");
+    var t = document.createTextNode("Run");
+    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)
-          // this works because only 1 `element` is inside `element`
-          var resDiv = element.getElementsByClassName("resDiv")[0]
+          var res = JSON.parse(httpRequest.responseText);
+          // this works because only 1 `resDiv` is inside `element`
+          var resDiv = element.getElementsByClassName("resDiv")[0];
           if (resDiv == null) {
-            resDiv = document.createElement("DIV")
-            runDiv.appendChild(resDiv)          
+            resDiv = document.createElement("DIV");
+            runDiv.appendChild(resDiv);
           }
-          if (res.log != "Compilation Failed\u000A"){
-            resDiv.textContent = res.log
-            resDiv.setAttribute("class", "resDiv successComp")          
+          if (res.compileLog.lastIndexOf("[SuccessX]") != -1){
+            resDiv.textContent = res.log;
+            resDiv.setAttribute("class", "resDiv successComp");
           } else {
-            resDiv.textContent = res.compileLog
-            resDiv.setAttribute("class","resDiv failedComp")
+            resDiv.textContent = res.compileLog;
+            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.send(JSON.stringify({"code": code, "compilationTarget": "c"}))
+      httpRequest.onreadystatechange = displayContents;
+      httpRequest.send(JSON.stringify({"code": code, "compilationTarget": "c"}));
+      window.requestAnimationFrame(step);
     }
-    runDiv.appendChild(document.createElement("HR"))
-    runDiv.appendChild(btn)
-    element.appendChild(runDiv)
-  }, this);
+    runDiv.appendChild(document.createElement("HR"));
+    runDiv.appendChild(btn);
+    runDiv.appendChild(playLink);
+    element.appendChild(runDiv);
+  }
+  function appendRunBtn(){
+    var els = Array.prototype.slice.call(document.getElementsByClassName("listing"));
+    els.forEach(appendEachRunBtn, this);
+  }
+  appendRunBtn()
 </script>
 </div>
 #end proc
diff --git a/public/css/style.css b/public/css/style.css
index 3359cfc..028cf56 100644
--- a/public/css/style.css
+++ b/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);
 }