git @ Cat's Eye Technologies noit-o-mnain-worb / b334d3c
Create main stage using yoob/element-factory methods. Chris Pressey 4 years ago
3 changed file(s) with 329 addition(s) and 29 deletion(s). Raw diff Collapse all Expand all
1414
1515 <h1>noit o' mnain worb</h1>
1616
17 <div id="control_panel"></div>
18
19 <div>
20 configuration: <select id="select_source"></select>
21 <span id="load_indicator">
22 load indicator
23 </span>
24 </div>
25
26 <div id="canvas_viewport">
27 <canvas id="canvas" width="400" height="400">
28 Your browser doesn't support displaying an HTML5 canvas.
29 </canvas>
30 </div>
31
32 <textarea id="editor" rows="25" cols="40"></textarea>
17 <div id="container"></div>
3318
3419 </body>
3520 <script src="../../../eg/index.js"></script>
33 }
44 config = config || {};
55 var deps = [
6 "yoob/element-factory.js",
67 "yoob/controller.js",
78 "yoob/playfield.js",
89 "yoob/playfield-canvas-view.js",
1314 var loaded = 0;
1415 var onload = function() {
1516 if (++loaded < deps.length) return;
16 //document.getElementById('installation').innerHTML =
17 // '<div id="control_panel"></div>' +
18 // '<span id="load_indicator">load indicator</span>' +
19 // '<div>example source: <select id="select_source"></select></div>' +
20 // '<div id="animation_container"><canvas id="canvas" width="400" height="400"></canvas></div>' +
21 // '<textarea id="editor" rows="25" cols="40"></textarea>';
2217
23 var loadIndicator = document.getElementById('load_indicator');
24 var controlPanel = document.getElementById('control_panel');
25 var display = document.getElementById('canvas_viewport');
18 var controlPanel = yoob.makeDiv(container);
19 controlPanel.id = 'control_panel';
20 var subPanel = yoob.makeDiv(container);
21 var selectSource = yoob.makeSelect(subPanel, 'configuration:', []);
22 var loadIndicator = yoob.makeSpan(subPanel, "load indicator");
23 loadIndicator.id = 'load_indicator';
24 var canvasViewport = yoob.makeDiv(container);
25 canvasViewport.id = 'canvas_viewport';
26 var canvas = yoob.makeCanvas(canvasViewport, 400, 400);
27 var editor = yoob.makeTextArea(container, 40, 25);
2628
2729 var v = new yoob.PlayfieldCanvasView().init({
28 canvas: document.getElementById('canvas')
30 canvas: canvas
2931 });
3032 v.setCellDimensions(16, 16);
3133
4648
4749 var sourceManager = (new yoob.SourceManager()).init({
4850 panelContainer: controlPanel,
49 editor: document.getElementById('editor'),
50 hideDuringEdit: [display],
51 editor: editor,
52 hideDuringEdit: [canvasViewport],
5153 disableDuringEdit: [controller.panel],
5254 storageKey: 'worb.js',
5355 onDone: function() {
5759 });
5860
5961 var presetManager = (new yoob.PresetManager()).init({
60 selectElem: document.getElementById('select_source'),
62 selectElem: selectSource,
6163 });
6264 function makeCallback(sourceText) {
6365 return function(id) {
0 /*
1 * This file is part of yoob.js version 0.12
2 * Available from https://github.com/catseye/yoob.js/
3 * This file is in the public domain. See http://unlicense.org/ for details.
4 */
5 if (window.yoob === undefined) yoob = {};
6
7 /*
8 * Functions for creating elements.
9 */
10
11 yoob.makeCanvas = function(container, width, height) {
12 var canvas = document.createElement('canvas');
13 if (width) {
14 canvas.width = width;
15 }
16 if (height) {
17 canvas.height = height;
18 }
19 container.appendChild(canvas);
20 return canvas;
21 };
22
23 yoob.makeButton = function(container, labelText, fun) {
24 var button = document.createElement('button');
25 button.innerHTML = labelText;
26 container.appendChild(button);
27 if (fun) {
28 button.onclick = fun;
29 }
30 return button;
31 };
32
33 yoob.checkBoxNumber = 0;
34 yoob.makeCheckbox = function(container, checked, labelText, fun) {
35 var checkbox = document.createElement('input');
36 checkbox.type = "checkbox";
37 checkbox.id = 'cfzzzb_' + yoob.checkBoxNumber;
38 checkbox.checked = checked;
39 var label = document.createElement('label');
40 label.htmlFor = 'cfzzzb_' + yoob.checkBoxNumber;
41 yoob.checkBoxNumber += 1;
42 label.appendChild(document.createTextNode(labelText));
43
44 container.appendChild(checkbox);
45 container.appendChild(label);
46
47 if (fun) {
48 checkbox.onchange = function(e) {
49 fun(checkbox.checked);
50 };
51 }
52 return checkbox;
53 };
54
55 yoob.makeTextInput = function(container, size, value) {
56 var input = document.createElement('input');
57 input.size = "" + (size || 12);
58 input.value = value || "";
59 container.appendChild(input);
60 return input;
61 };
62
63 yoob.makeSlider = function(container, min, max, value, fun) {
64 var slider = document.createElement('input');
65 slider.type = "range";
66 slider.min = min;
67 slider.max = max;
68 slider.value = value || 0;
69 if (fun) {
70 slider.onchange = function(e) {
71 fun(parseInt(slider.value, 10));
72 };
73 }
74 container.appendChild(slider);
75 return slider;
76 };
77
78 yoob.makeParagraph = function(container, innerHTML) {
79 var p = document.createElement('p');
80 p.innerHTML = innerHTML || '';
81 container.appendChild(p);
82 return p;
83 };
84
85 yoob.makeSpan = function(container, innerHTML) {
86 var span = document.createElement('span');
87 span.innerHTML = innerHTML || '';
88 container.appendChild(span);
89 return span;
90 };
91
92 yoob.makeDiv = function(container, innerHTML) {
93 var div = document.createElement('div');
94 div.innerHTML = innerHTML || '';
95 container.appendChild(div);
96 return div;
97 };
98
99 yoob.makePre = function(container, innerHTML) {
100 var elem = document.createElement('pre');
101 elem.innerHTML = innerHTML || '';
102 container.appendChild(elem);
103 return elem;
104 };
105
106 yoob.makePanel = function(container, title, isOpen) {
107 isOpen = !!isOpen;
108 var panelContainer = document.createElement('div');
109 var button = document.createElement('button');
110 var innerContainer = document.createElement('div');
111 innerContainer.style.display = isOpen ? "block" : "none";
112
113 button.innerHTML = (isOpen ? "∇" : "⊳") + " " + title;
114 button.onclick = function(e) {
115 isOpen = !isOpen;
116 button.innerHTML = (isOpen ? "∇" : "⊳") + " " + title;
117 innerContainer.style.display = isOpen ? "block" : "none";
118 };
119
120 panelContainer.appendChild(button);
121 panelContainer.appendChild(innerContainer);
122 container.appendChild(panelContainer);
123 return innerContainer;
124 };
125
126 yoob.makeTextArea = function(container, cols, rows, initial) {
127 var textarea = document.createElement('textarea');
128 textarea.rows = "" + rows;
129 textarea.cols = "" + cols;
130 if (initial) {
131 textarea.value = initial;
132 }
133 container.appendChild(textarea);
134 return textarea;
135 };
136
137 yoob.makeLineBreak = function(container) {
138 var br = document.createElement('br');
139 container.appendChild(br);
140 return br;
141 };
142
143 yoob.makeSelect = function(container, labelText, optionsArray, fun, def) {
144 var label = document.createElement('label');
145 label.innerHTML = labelText;
146 container.appendChild(label);
147
148 var select = document.createElement("select");
149
150 for (var i = 0; i < optionsArray.length; i++) {
151 var op = document.createElement("option");
152 op.value = optionsArray[i][0];
153 op.text = optionsArray[i][1];
154 if (optionsArray[i].length > 2) {
155 op.selected = optionsArray[i][2];
156 } else {
157 op.selected = false;
158 }
159 select.options.add(op);
160 }
161
162 if (fun) {
163 select.onchange = function(e) {
164 fun(optionsArray[select.selectedIndex][0]);
165 };
166 }
167
168 if (def) {
169 var i = 0;
170 var opt = select.options[i];
171 while (opt) {
172 if (opt.value === def) {
173 select.selectedIndex = i;
174 if (fun) fun(def);
175 break;
176 }
177 i++;
178 opt = select.options[i];
179 }
180 }
181
182 container.appendChild(select);
183 return select;
184 };
185
186 var SliderPlusTextInput = function() {
187 this.init = function(cfg) {
188 this.slider = cfg.slider;
189 this.textInput = cfg.textInput;
190 this.callback = cfg.callback;
191 return this;
192 };
193
194 this.set = function(value) {
195 this.slider.value = "" + value;
196 this.textInput.value = "" + value;
197 this.callback(value);
198 };
199 };
200
201 yoob.makeSliderPlusTextInput = function(container, label, min_, max_, size, value, fun) {
202 yoob.makeSpan(container, label);
203 var slider = yoob.makeSlider(container, min_, max_, value);
204 var s = "" + value;
205 var textInput = yoob.makeTextInput(container, size, s);
206 slider.onchange = function(e) {
207 textInput.value = slider.value;
208 fun(parseInt(slider.value, 10));
209 };
210 textInput.onchange = function(e) {
211 var v = parseInt(textInput.value, 10);
212 if (v !== NaN) {
213 slider.value = "" + v;
214 fun(v);
215 }
216 };
217 return new SliderPlusTextInput().init({
218 'slider': slider,
219 'textInput': textInput,
220 'callback': fun
221 });
222 };
223
224 var RangeControl = function() {
225 this.init = function(cfg) {
226 this.slider = cfg.slider;
227 this.textInput = cfg.textInput;
228 this.callback = cfg.callback;
229 this.incButton = cfg.incButton;
230 this.decButton = cfg.decButton;
231 return this;
232 };
233
234 this.set = function(value) {
235 this.slider.value = "" + value;
236 this.textInput.value = "" + value;
237 this.callback(value);
238 };
239 };
240
241 yoob.makeRangeControl = function(container, config) {
242 var label = config.label;
243 var min_ = config['min'];
244 var max_ = config['max'];
245 var value = config.value || min_;
246 var callback = config.callback || function(v) {};
247 var textInputSize = config.textInputSize || 5;
248 var withButtons = config.withButtons === false ? false : true;
249
250 yoob.makeSpan(container, label);
251 var slider = yoob.makeSlider(container, min_, max_, value);
252 var s = "" + value;
253 var textInput = yoob.makeTextInput(container, textInputSize, s);
254 slider.onchange = function(e) {
255 textInput.value = slider.value;
256 callback(parseInt(slider.value, 10));
257 };
258 textInput.onchange = function(e) {
259 var v = parseInt(textInput.value, 10);
260 if (v !== NaN) {
261 slider.value = "" + v;
262 callback(v);
263 }
264 };
265 var incButton;
266 var decButton;
267 if (withButtons) {
268 decButton = yoob.makeButton(container, "-", function() {
269 var v = parseInt(textInput.value, 10);
270 if (v !== NaN && v > min_) {
271 v--;
272 textInput.value = "" + v;
273 slider.value = "" + v;
274 callback(v);
275 }
276 });
277 incButton = yoob.makeButton(container, "+", function() {
278 var v = parseInt(textInput.value, 10);
279 if (v !== NaN && v < max_) {
280 v++;
281 textInput.value = "" + v;
282 slider.value = "" + v;
283 callback(v);
284 }
285 });
286 }
287 return new RangeControl().init({
288 'slider': slider,
289 'incButton': incButton,
290 'decButton': decButton,
291 'textInput': textInput,
292 'callback': callback
293 });
294 };
295
296 yoob.makeSVG = function(container) {
297 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
298 /* <svg viewBox = "0 0 200 200" version = "1.1"> */
299 container.appendChild(svg);
300 return svg;
301 };
302
303 yoob.makeSVGElem = function(svg, tag, cfg) {
304 var elem = document.createElementNS(svg.namespaceURI, tag);
305 for (var key in cfg) {
306 if (cfg.hasOwnProperty(key)) {
307 elem.setAttribute(key, cfg[key]);
308 }
309 }
310 svg.appendChild(elem);
311 return elem;
312 };