Commits

Anonymous committed cc4d661

Try to improve the UI in the web demo using new yoob.Controller.

  • Participants
  • Parent commits 51020e1

Comments (0)

Files changed (2)

File demo/circute.html

 <head>
   <meta charset="utf-8">
   <title>Circute Demo</title>
+  <style>
+#input {
+  display: none;
+}
+#output {
+  border: 1px solid blue;
+}
+#load {
+  display: none;
+}
+  </style>
 </head>
 <body>
 
 <h1>Circute Demo</h1>
 
+<button id="load">Load</button>
+<button id="edit">Edit</button>
+<button id="start">Start</button>
+<button id="stop">Stop</button>
+<button id="step">Step</button>
+Speed: <input id="speed" type="range" min="0" max="200" value="0" />
+
 <textarea id="input" rows="10">
    =========
    =       =
    =========
 </textarea>
 
-<pre id="output" style="border: 1px solid blue">
-</pre>
-
-<button id="start">Start</button>
-<button id="stop">Stop</button>
-<button id="step">Step</button>
-<button id="load">Load</button>
-Speed: <input id="speed" type="range" min="0" max="200" value="0" />
+<pre id="output"></pre>
 
 </body>
 <script src="yoob/controller.js"></script>
       newPf.setDefault('Space');
       evolve_playfield(pf, newPf);
       pf = newPf;
-      var output = document.getElementById('output');
       output.innerHTML = pf.dump(dumpMapper);
   };
 
     'stop': 'stop',
     'step': 'step',
     'load': 'load',
+    'edit': 'edit',
     'source': 'input',
+    'display': 'output',
     'speed': 'speed'
   });
+  
+  c.click_load();
 </script>

File demo/yoob/controller.js

 /*
- * This file is part of yoob.js version 0.2-PRE
+ * This file is part of yoob.js version 0.3-PRE
  * This file is in the public domain.  See http://unlicense.org/ for details.
  */
 if (window.yoob === undefined) yoob = {};
     this.delay = 100;
     this.source = undefined;
     this.speed = undefined;
+    this.controls = {};
 
     var makeOnClick = function(controller, key) {
         if (controller['click_' + key] !== undefined)
      */
     this.connect = function(dict) {
         var self = this;
-        var keys = ["start", "stop", "step", "load"];
+        var keys = ["start", "stop", "step", "load", "edit"];
         for (var i in keys) {
             var key = keys[i];
             var value = dict[key];
             }
             if (value !== undefined) {
                 value.onclick = makeOnClick(this, key);
+                this.controls[key] = value;
             }
         }
 
-        var source = dict.source;
-        if (typeof source === 'string') {
-            source = document.getElementById(source);
-        }
-        if (source !== undefined) {
-            this.source = source;
+        var keys = ["source", "display"];
+        for (var i in keys) {
+            var key = keys[i];
+            var value = dict[key];
+            if (typeof value === 'string') {
+                value = document.getElementById(value);
+            }
+            if (value !== undefined) {
+                this[key] = value;
+            }
         }
 
         var speed = dict.speed;
     this.click_load = function(e) {
         this.stop();
         this.load(this.source.value);
+        if (this.controls.edit) this.controls.edit.style.display = "inline";
+        if (this.controls.load) this.controls.load.style.display = "none";
+        if (this.controls.start) this.controls.start.disabled = false;
+        if (this.controls.step) this.controls.step.disabled = false;
+        if (this.controls.stop) this.controls.stop.disabled = false;
+        if (this.display) this.display.style.display = "block";
+        if (this.source) this.source.style.display = "none";
     };
 
     this.load = function(text) {
         alert("load() NotImplementedError");
     };
 
+    this.click_edit = function(e) {
+        this.stop();
+        if (this.controls.edit) this.controls.edit.style.display = "none";
+        if (this.controls.load) this.controls.load.style.display = "inline";
+        if (this.controls.start) this.controls.start.disabled = true;
+        if (this.controls.step) this.controls.step.disabled = true;
+        if (this.controls.stop) this.controls.stop.disabled = true;
+        if (this.display) this.display.style.display = "none";
+        if (this.source) this.source.style.display = "block";
+    };
+
     this.start = function() {
         if (this.intervalId !== undefined)
             return;