git @ Cat's Eye Technologies Braktif / 8583e58
Add display/edit and example sources to Braktif demo. catseye 7 years ago
2 changed file(s) with 106 addition(s) and 18 deletion(s). Raw diff Collapse all Expand all
11 <head>
22 <meta charset="utf-8">
33 <title>Braktif Demo</title>
4 <style>
5 #output {
6 border: 1px solid blue;
7 }
8 #load {
9 display: none;
10 }
11 </style>
412 </head>
513 <body>
614
715 <h1>Braktif Demo</h1>
16
17 <button id="load">Load</button>
18 <button id="edit">Edit</button>
19 <button id="start">Start</button>
20 <button id="stop">Stop</button>
21 <button id="step">Step</button>
22 Speed: <input id="speed" type="range" min="0" max="200" value="0" />
23
24 <span id="select_source_container">
25 <select id="select_source">
26 <option>(select one...)</option>
27 <option>test</option>
28 <option>test2</option>
29 <option>test3</option>
30 </select>
31 </span>
832
933 <textarea id="input" rows="10" cols="50">
1034 *
1640 <pre id="output" style="border: 1px solid blue">
1741 </pre>
1842
19 <button id="start">Start</button>
20 <button id="stop">Stop</button>
21 <button id="step">Step</button>
22 <button id="load">Load</button>
23 Speed: <input id="speed" type="range" min="0" max="200" value="0" />
43 <div id="test" style="display: none;"
44 >000000000000000000 &lt;*&lt;*&gt;*&gt;*&lt;*&lt;*&gt;*&gt;*
45 -----------------d-i---------------
46 </div>
47
48
49 <div id="test2" style="display: none;"
50 > &lt;*
51 000000000000000000000000000000000000000000000000000000000 *[---]
52 --------------------------------------------------------d-i- --
53 </div>
54
55
56 <div id="test3" style="display: none;"
57 > *
58 &lt;&lt;*[--]*
59 000000000000000000 *[----- --]
60 -----------------d-i-- --------
61
62 </div>
2463
2564 </body>
2665 <script src="yoob/controller.js"></script>
5190 'stop': 'stop',
5291 'step': 'step',
5392 'load': 'load',
93 'edit': 'edit',
94 'speed': 'speed',
95 'select': 'select_source',
5496 'source': 'input',
55 'speed': 'speed'
97 'display': 'output'
5698 });
99 c.click_load();
57100 </script>
00 /*
1 * This file is part of yoob.js version 0.2-PRE
1 * This file is part of yoob.js version 0.3-PRE
22 * This file is in the public domain. See http://unlicense.org/ for details.
33 */
44 if (window.yoob === undefined) yoob = {};
1919 this.delay = 100;
2020 this.source = undefined;
2121 this.speed = undefined;
22 this.controls = {};
2223
23 var makeOnClick = function(controller, key) {
24 if (controller['click_' + key] !== undefined)
24 this.makeEventHandler = function(control, key) {
25 if (this['click_' + key] !== undefined) {
2526 key = 'click_' + key;
26 return function(e) { controller[key](); }
27 }
28 var self = this;
29 return function(e) {
30 self[key](control);
31 };
2732 };
2833
2934 /*
3439 */
3540 this.connect = function(dict) {
3641 var self = this;
37 var keys = ["start", "stop", "step", "load"];
42 var keys = ["start", "stop", "step", "load", "edit", "select"];
3843 for (var i in keys) {
3944 var key = keys[i];
4045 var value = dict[key];
4247 value = document.getElementById(value);
4348 }
4449 if (value !== undefined) {
45 value.onclick = makeOnClick(this, key);
50 if (key === 'select') {
51 value.onchange = this.makeEventHandler(value, key);
52 } else {
53 value.onclick = this.makeEventHandler(value, key);
54 }
55 this.controls[key] = value;
4656 }
4757 }
4858
49 var source = dict.source;
50 if (typeof source === 'string') {
51 source = document.getElementById(source);
52 }
53 if (source !== undefined) {
54 this.source = source;
59 var keys = ["source", "display"];
60 for (var i in keys) {
61 var key = keys[i];
62 var value = dict[key];
63 if (typeof value === 'string') {
64 value = document.getElementById(value);
65 }
66 if (value !== undefined) {
67 this[key] = value;
68 }
5569 }
5670
5771 var speed = dict.speed;
8397 this.click_load = function(e) {
8498 this.stop();
8599 this.load(this.source.value);
100 if (this.controls.edit) this.controls.edit.style.display = "inline";
101 if (this.controls.load) this.controls.load.style.display = "none";
102 if (this.controls.start) this.controls.start.disabled = false;
103 if (this.controls.step) this.controls.step.disabled = false;
104 if (this.controls.stop) this.controls.stop.disabled = false;
105 if (this.display) this.display.style.display = "block";
106 if (this.source) this.source.style.display = "none";
86107 };
87108
88109 this.load = function(text) {
89110 alert("load() NotImplementedError");
111 };
112
113 this.click_edit = function(e) {
114 this.stop();
115 if (this.controls.edit) this.controls.edit.style.display = "none";
116 if (this.controls.load) this.controls.load.style.display = "inline";
117 if (this.controls.start) this.controls.start.disabled = true;
118 if (this.controls.step) this.controls.step.disabled = true;
119 if (this.controls.stop) this.controls.stop.disabled = true;
120 if (this.display) this.display.style.display = "none";
121 if (this.source) this.source.style.display = "block";
122 };
123
124 this.click_select = function(control) {
125 this.stop();
126 var source = document.getElementById(
127 control.options[control.selectedIndex].value
128 );
129 var text = source.innerHTML;
130 text = text.replace(/\&lt;/g, '<');
131 text = text.replace(/\&gt;/g, '>');
132 text = text.replace(/\&amp;/g, '&');
133 if (this.source) this.source.value = text;
134 this.load(text);
90135 };
91136
92137 this.start = function() {