git @ Cat's Eye Technologies Lexeduct / 5e630d4
Really, really refactor. Chris Pressey 6 years ago
3 changed file(s) with 93 addition(s) and 98 deletion(s). Raw diff Collapse all Expand all
113113 * Dynamically allocate the number of transformer-slots.
114114 * Provide "insert" and "delete" operations on each transformer-slot.
115115 * Display the description for each select transformer, in a tooltip(?)
116 * Create prompts for available params dynamically in each transformer-slot.
116 * Better live mode (do on each keypress in param input, input text.)
117117
118118 [Michael Paulukonis]: https://github.com/MichaelPaulukonis/
119119 [TextMunger]: https://github.com/MichaelPaulukonis/text-munger
00 "use strict";
11
22 /* REQUIRES yoob/element-factory.js */
3 /* ASSUMES ``transformer`` object has been created */
34
45 var compose = function(g, f) {
56 return function(str, data) {
89 };
910 };
1011
11 var container, input, output, processButton, tranformersPanel;
12 function LexeductUI() {
13 var container, input, output, processButton, tranformersPanel;
14 var liveMode;
15 var MAX_TRANSFORMER_SLOTS = 8; // TODO dynamic
16 var transformerSlots = [];
17 var transformerNames;
1218
13 container = document.getElementById('container');
14 input = yoob.makeTextArea(container, 40, 20);
15 input.value = document.getElementById('initial-text').innerHTML;
19 this.init = function(cfg) {
20 container = document.getElementById('container');
21 input = yoob.makeTextArea(container, 40, 20);
22 input.value = document.getElementById('initial-text').innerHTML;
23
24 var transformersPanel = yoob.makeDiv(container);
25 transformersPanel.style.border = "2px solid black";
26 transformersPanel.style.display = "inline-block";
27 transformersPanel.style.verticalAlign = "top";
1628
17 var transformersPanel = yoob.makeDiv(container);
18 transformersPanel.style.border = "2px solid black";
19 transformersPanel.style.display = "inline-block";
20 transformersPanel.style.verticalAlign = "top";
29 transformerNames = [["identity", "---"]];
30 for (var key in transformer) {
31 if (key !== 'identity' && transformer.hasOwnProperty(key)) {
32 transformerNames.push([key, key]);
33 }
34 }
2135
22 var MAX_TRANSFORMER_SLOTS = 8; // TODO dynamic
23 var transformerSlots = [];
36 processButton = yoob.makeButton(transformersPanel, "Process", this.process);
2437
25 var transformerNames = [["identity", "---"]];
26 for (var key in transformer) {
27 if (key !== 'identity' && transformer.hasOwnProperty(key)) {
28 transformerNames.push([key, key]);
29 }
30 }
38 yoob.makeCheckbox(transformersPanel, false, "Live mode", function(b) {
39 liveMode = b;
40 });
41 yoob.makeLineBreak(transformersPanel);
3142
32 var parseOptions = function(text) {
33 var args = text.split(' ');
34 var cfg = {};
35 for (var i = 0; i < args.length; i++) {
36 var paramPair = args[i].split('=');
37 if (paramPair.length == 2) {
38 cfg[paramPair[0]] = paramPair[1];
39 } else {
40 // register an error
43 for (var i = 0; i < MAX_TRANSFORMER_SLOTS; i++) {
44 var slot = this.makeTransformerSlot(transformersPanel, i);
45 transformerSlots.push(slot);
4146 }
42 }
43 return cfg;
44 };
4547
46 var process = function() {
47 var t = transformer['identity'].makeTransformer({});
48 for (var i = 0; i < transformerSlots.length; i++) {
49 console.log(uneval(transformerSlots[i]));
50 var transformerName = transformerSlots[i].name;
51 var selectedParams = transformerSlots[i].selectedParams;
52 var t2 = transformer[transformerName].makeTransformer(selectedParams);
53 t = compose(t2, t);
54 }
55 var inLines = input.value.split('\n');
56 var outLines = [];
57 for (var i = 0; i < inLines.length; i++) {
58 outLines.push(t(inLines[i]));
59 }
60 output.value = outLines.join('\n');
61 };
48 output = yoob.makeTextArea(container, 40, 20);
49 };
6250
63 processButton = yoob.makeButton(transformersPanel, "Process", process);
51 this.process = function() {
52 var t = transformer['identity'].makeTransformer({});
53 for (var i = 0; i < transformerSlots.length; i++) {
54 var transformerName = transformerSlots[i].name;
55 var selectedParams = transformerSlots[i].selectedParams;
56 var t2 = transformer[transformerName].makeTransformer(selectedParams);
57 t = compose(t2, t);
58 }
59 var inLines = input.value.split('\n');
60 var outLines = [];
61 for (var i = 0; i < inLines.length; i++) {
62 outLines.push(t(inLines[i]));
63 }
64 output.value = outLines.join('\n');
65 };
6466
65 var liveMode;
66 yoob.makeCheckbox(transformersPanel, false, "Live mode", function(b) {
67 liveMode = b;
68 });
69 yoob.makeLineBreak(transformersPanel);
70
71 var updateParametersPanel = function(slot, panel) {
72 var parameters = transformer[slot.name].parameters;
73 panel.innerHTML = ""; // delete any previous controls
74 for (var key in parameters) {
75 if (parameters.hasOwnProperty(key)) {
76 var desc = parameters[key][0];
77 var def = parameters[key][1];
78 var label = yoob.makeSpan(panel, key);
79 var input = yoob.makeTextInput(panel, 24, def);
80 slot.selectedParams[key] = def;
81 input.onchange = function() {
82 slot.selectedParams[key] = input.value;
83 if (liveMode) {
84 process();
67 this.updateParametersPanel = function(slot, panel) {
68 var parameters = transformer[slot.name].parameters;
69 panel.innerHTML = ""; // delete any previous controls
70 for (var key in parameters) {
71 if (parameters.hasOwnProperty(key)) {
72 var desc = parameters[key][0];
73 var def = parameters[key][1];
74 var label = yoob.makeSpan(panel, key);
75 var input = yoob.makeTextInput(panel, 24, def);
76 slot.selectedParams[key] = def;
77 input.onchange = function() {
78 slot.selectedParams[key] = input.value;
79 if (liveMode) {
80 process();
81 }
8582 }
83 yoob.makeLineBreak(panel);
8684 }
87 yoob.makeLineBreak(panel);
88 }
89 }
90 };
91
92 var makeTransformerSlot = function(container, index) {
93 var select = yoob.makeSelect(
94 transformersPanel, "Transformer " + (index+1), transformerNames
95 );
96 yoob.makeLineBreak(transformersPanel);
97 var parametersPanel = yoob.makeDiv(transformersPanel);
98 parametersPanel.style.padding = "2px";
99 parametersPanel.style.border = "1px solid blue";
100 parametersPanel.style.textAlign = "right";
101
102 select.onchange = function(e) {
103 transformerSlots[index].name = select.options[select.selectedIndex].value;
104 updateParametersPanel(transformerSlots[index], parametersPanel);
105 if (liveMode) {
106 process();
10785 }
10886 };
10987
110 return {
111 name: 'identity',
112 selectedParams: {},
113 select: select,
114 parametersPanel: parametersPanel
88 this.makeTransformerSlot = function(container, index) {
89 var select = yoob.makeSelect(
90 container, "Transformer " + (index+1), transformerNames
91 );
92 yoob.makeLineBreak(container);
93 var parametersPanel = yoob.makeDiv(container);
94 parametersPanel.style.padding = "2px";
95 parametersPanel.style.border = "1px solid blue";
96 parametersPanel.style.textAlign = "right";
97
98 var $this = this;
99 select.onchange = function(e) {
100 transformerSlots[index].name = select.options[select.selectedIndex].value;
101 $this.updateParametersPanel(transformerSlots[index], parametersPanel);
102 if (liveMode) {
103 process();
104 }
105 };
106
107 return {
108 name: 'identity',
109 selectedParams: {},
110 select: select,
111 parametersPanel: parametersPanel
112 };
115113 };
114
116115 };
117
118 for (var i = 0; i < MAX_TRANSFORMER_SLOTS; i++) {
119 var slot = makeTransformerSlot(transformersPanel, i);
120 transformerSlots.push(slot);
121 }
122
123 output = yoob.makeTextArea(container, 40, 20);
2121 <script src="yoob/element-factory.js"></script>
2222 <script src="lexeduct-browser.js"></script>
2323 <script>
24 (new LexeductUI()).init({
25 'container': document.getElementById('container')
26 });
2427 </script>