Use yoob.elementFactory to create the UI.
Chris Pressey
7 years ago
| 17 | 17 | var loaded = 0; |
| 18 | 18 | var onload = function() { |
| 19 | 19 | if (++loaded < deps.length) return; |
| 20 | /* ----- launch ----- */ | |
| 21 | var programView = new yoob.PlayfieldHTMLView().init({ | |
| 22 | element: document.getElementById('program_display') | |
| 20 | /* ----- launch, phase 1: create the UI ----- */ | |
| 21 | var controlPanel = yoob.makeDiv(container); | |
| 22 | controlPanel.id = "panel_container"; | |
| 23 | ||
| 24 | var subPanel = yoob.makeDiv(container); | |
| 25 | var selectSource = yoob.makeSelect(subPanel, 'example source:', []); | |
| 26 | ||
| 27 | var displayContainer = yoob.makeDiv(); | |
| 28 | displayContainer.id = 'display_container'; | |
| 29 | ||
| 30 | var programDisplay = yoob.makePre(displayContainer); | |
| 31 | programDisplay.id = 'program_display'; | |
| 32 | ||
| 33 | var editor = yoob.makeTextArea(displayContainer, 40, 25); | |
| 34 | ||
| 35 | var stateDisplay = yoob.makeDiv(); | |
| 36 | stateDisplay.id = "state_display"; | |
| 37 | ||
| 38 | var opTableDisplay = yoob.makePre(stateDisplay); | |
| 39 | opTableDisplay.id = 'op_table_display'; | |
| 40 | ||
| 41 | var tapeSubDisplay = yoob.makeDiv(stateDispay); | |
| 42 | yoob.makeSpan(tapeSubDisplay, "Tape:"); | |
| 43 | var tapeDisplay = yoob.makeSpan(tapeSubDisplay); | |
| 44 | ||
| 45 | var ioSubDisplay = yoob.makeDiv(stateDispay); | |
| 46 | ioSubDisplay.innerHTML = 'Input: <input id="input"></input><br />' + | |
| 47 | 'Output: <div id="output">'; | |
| 48 | ||
| 49 | new yoob.PlayfieldHTMLView().init({ | |
| 50 | element: programDisplay | |
| 23 | 51 | }); |
| 24 | 52 | var opTableView = new yoob.PlayfieldHTMLView().init({ |
| 25 | element: document.getElementById('op_table_display') | |
| 53 | element: opTableDisplay | |
| 26 | 54 | }); |
| 27 | 55 | opTableView.render = function(value) { |
| 28 | 56 | return ' ' + value + ' '; |
| 29 | 57 | }; |
| 30 | 58 | var tapeView = new yoob.TapeHTMLView().init({ |
| 31 | element: document.getElementById('tape_display') | |
| 59 | element: tapeDisplay | |
| 32 | 60 | }); |
| 33 | 61 | |
| 34 | var controlPanel = document.getElementById("panel_container"); | |
| 35 | var editor = document.getElementById("editor"); | |
| 36 | var display = document.getElementById("program_display"); | |
| 37 | ||
| 62 | /* ----- launch, phase 2: connect the controller ----- */ | |
| 38 | 63 | var WunnelController = getWunnelControllerClass(); |
| 39 | 64 | var controller = (new WunnelController()).init({ |
| 40 | 65 | programView: programView, |
| 48 | 73 | var sourceManager = (new yoob.SourceManager()).init({ |
| 49 | 74 | panelContainer: controlPanel, |
| 50 | 75 | editor: editor, |
| 51 | hideDuringEdit: [display], | |
| 76 | hideDuringEdit: [programDisplay], | |
| 52 | 77 | disableDuringEdit: [controller.panel], |
| 53 | 78 | storageKey: 'wunnel.js', |
| 54 | 79 | onDone: function() { |
| 56 | 81 | } |
| 57 | 82 | }); |
| 58 | 83 | var p = (new yoob.PresetManager()).init({ |
| 59 | selectElem: document.getElementById('select_source'), | |
| 84 | selectElem: selectSource, | |
| 60 | 85 | controller: controller |
| 61 | 86 | }); |
| 62 | 87 | function makeCallback(sourceText) { |