Merge pull request #70 from ianb/wip-async

Async execution - procedures may return Promises

index.css

@@ -272,7 +272,7 @@ body {
 .single #toggle #collapse-label { display: none; }
 .multi  #toggle #expand-label { display: none; }
 
-#run, #clear {
+#run, #stop, #clear {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -285,26 +285,35 @@ body {
   background-color: white;
 }
 
-#run {
+#run, #stop {
   top: 5px; bottom: 35px; width: 70px;
 }
 
+#run, #stop {
+  top: 5px; bottom: 35px; width: 70px;
+}
+
+#run { display: block; }
+#stop { display: none; }
+.running #run { display: none; }
+.running #stop { display: block; }
+
 #clear {
   height: 19px; bottom: 10px; width: 70px;
 }
 
-#run, #clear {
+#run, #stop, #clear {
   right: 5px; left: auto;
 }
-[dir=rtl] #run, [dir=rtl] #clear {
+[dir=rtl] #run, [dir=rtl] #clear, [dir=rtl] #stop {
   left: 5px; right: auto;
 }
 
-#run:hover, #clear:hover {
+#run:hover, #clear:hover, #stop:hover {
   background-color: #eeeeee;
 }
 
-#run .label, #clear .label {
+#run .label, #clear .label, #stop .label {
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
   margin: auto;
@@ -377,6 +386,6 @@ a:hover.forkme {
 }
 
 @media only screen and (max-width: 420px) {
-  #run { height: auto; bottom: 10px; }
+  #run, #stop { height: auto; bottom: 10px; }
   #clear { display: none; }
 }

index.html

@@ -54,6 +54,7 @@ <h1 data-l10n-id="tl-title">Logo Interpreter</h1>
 <div id="input-panel" class="panel">
   <!-- TODO: Make this a button or anchor -->
   <div id="run"><div data-l10n-id="ip-button-run" class="label">Run</div></div>
+  <div id="stop"><div data-l10n-id="ip-button-stop" class="label">Stop</div></div>
   <div id="clear"><div data-l10n-id="ip-button-clear" class="label">Clear</div></div>
   <div id="input">
     <div class="inner">

index.js

@@ -209,16 +209,22 @@ function initInput() {
       input.setValue('');
     }
     setTimeout(function() {
-      try {
-        logo.run(v);
-      } catch (e) {
+      document.body.classList.add('running');
+      logo.run(v).catch(function (e) {
         error.innerHTML = '';
         error.appendChild(document.createTextNode(e.message));
         error.classList.add('shown');
-      }
+      }).then(function() {
+        document.body.classList.remove('running');
+      });
     }, 100);
   }
 
+  function stop() {
+    logo.bye();
+    document.body.classList.remove('running');
+  }
+
   input.run = run;
 
   function clear(remote) {
@@ -360,9 +366,9 @@ function initInput() {
   });
 
   $('#run').addEventListener('click', run);
+  $('#stop').addEventListener('click', stop);
   $('#clear').addEventListener('click', clear);
 
-
   window.addEventListener('message', function(e) {
     if ('example' in e.data) {
       var text = e.data.example;
@@ -666,11 +672,9 @@ window.addEventListener('DOMContentLoaded', function() {
     if (param.length > 0) {
       param = decodeURIComponent(param.substring(1).replace(/\_/g, ' '));
       input.setValue(param);
-      try {
-        logo.run(param);
-      } catch (e) {
+      logo.run(param).catch(function (e) {
         window.alert("Error: " + e.message);
-      }
+      });
     }
   }
 

language.html

@@ -913,6 +913,9 @@ <h4>8.1 Control</h4>
   <dt><code>op <var>expr</var></code>
   <dd>End the running procedure and output the specified value
 
+  <dt><code>wait <var>time</var></code>
+  <dd>Pauses execution. <var>time</var> is in 60ths of a second.
+
   <dt><code>bye</code>
   <dd>Terminate the program