Refactor so that we don't have to mess with HTML too much.
Chris Pressey
8 years ago
0 | "use strict"; | |
1 | ||
2 | /* REQUIRES yoob/element-factory.js */ | |
3 | ||
4 | var compose = function(g, f) { | |
5 | return function(str, data) { | |
6 | str = f(str, data); | |
7 | return g(str, data); | |
8 | }; | |
9 | }; | |
10 | ||
11 | var container, input, output, processButton, tranformersPanel; | |
12 | ||
13 | container = document.getElementById('container'); | |
14 | input = yoob.makeTextArea(container, 40, 20); | |
15 | input.value = document.getElementById('initial-text').innerHTML; | |
16 | ||
17 | var transformersPanel = yoob.makeDiv(container); | |
18 | transformersPanel.style.border = "2px solid black"; | |
19 | transformersPanel.style.display = "inline-block"; | |
20 | transformersPanel.style.verticalAlign = "top"; | |
21 | ||
22 | var MAX_TRANSFORMER_SLOTS = 8; // TODO dynamic | |
23 | var transformerSlots = []; | |
24 | ||
25 | var transformerNames = [["identity", "---"]]; | |
26 | for (var key in transformer) { | |
27 | if (key !== 'identity' && transformer.hasOwnProperty(key)) { | |
28 | transformerNames.push([key, key]); | |
29 | } | |
30 | } | |
31 | ||
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 | |
41 | } | |
42 | } | |
43 | return cfg; | |
44 | }; | |
45 | ||
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 | }; | |
62 | ||
63 | processButton = yoob.makeButton(transformersPanel, "Process", process); | |
64 | ||
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(); | |
85 | } | |
86 | } | |
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(); | |
107 | } | |
108 | }; | |
109 | ||
110 | return { | |
111 | name: 'identity', | |
112 | selectedParams: {}, | |
113 | select: select, | |
114 | parametersPanel: parametersPanel | |
115 | }; | |
116 | }; | |
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); |
17 | 17 | </pre> |
18 | 18 | |
19 | 19 | </body> |
20 | <script src="lexeduct-transformers.js"></script> | |
21 | <script src="yoob/element-factory.js"></script> | |
20 | 22 | <script src="lexeduct-browser.js"></script> |
21 | <script src="yoob/element-factory.js"></script> | |
22 | 23 | <script> |
23 | "use strict"; | |
24 | ||
25 | var compose = function(g, f) { | |
26 | return function(str, data) { | |
27 | str = f(str, data); | |
28 | return g(str, data); | |
29 | }; | |
30 | }; | |
31 | ||
32 | var container, input, output, processButton, tranformersPanel; | |
33 | ||
34 | container = document.getElementById('container'); | |
35 | input = yoob.makeTextArea(container, 40, 20); | |
36 | input.value = document.getElementById('initial-text').innerHTML; | |
37 | ||
38 | var transformersPanel = yoob.makeDiv(container); | |
39 | transformersPanel.style.border = "2px solid black"; | |
40 | transformersPanel.style.display = "inline-block"; | |
41 | transformersPanel.style.verticalAlign = "top"; | |
42 | ||
43 | var MAX_TRANSFORMER_SLOTS = 8; // TODO dynamic | |
44 | var transformerSlots = []; | |
45 | ||
46 | var transformerNames = [["identity", "---"]]; | |
47 | for (var key in transformer) { | |
48 | if (key !== 'identity' && transformer.hasOwnProperty(key)) { | |
49 | transformerNames.push([key, key]); | |
50 | } | |
51 | } | |
52 | ||
53 | var parseOptions = function(text) { | |
54 | var args = text.split(' '); | |
55 | var cfg = {}; | |
56 | for (var i = 0; i < args.length; i++) { | |
57 | var paramPair = args[i].split('='); | |
58 | if (paramPair.length == 2) { | |
59 | cfg[paramPair[0]] = paramPair[1]; | |
60 | } else { | |
61 | // register an error | |
62 | } | |
63 | } | |
64 | return cfg; | |
65 | }; | |
66 | ||
67 | var process = function() { | |
68 | var t = transformer['identity'].makeTransformer({}); | |
69 | for (var i = 0; i < transformerSlots.length; i++) { | |
70 | console.log(uneval(transformerSlots[i])); | |
71 | var transformerName = transformerSlots[i].name; | |
72 | var selectedParams = transformerSlots[i].selectedParams; | |
73 | var t2 = transformer[transformerName].makeTransformer(selectedParams); | |
74 | t = compose(t2, t); | |
75 | } | |
76 | var inLines = input.value.split('\n'); | |
77 | var outLines = []; | |
78 | for (var i = 0; i < inLines.length; i++) { | |
79 | outLines.push(t(inLines[i])); | |
80 | } | |
81 | output.value = outLines.join('\n'); | |
82 | }; | |
83 | ||
84 | processButton = yoob.makeButton(transformersPanel, "Process", process); | |
85 | ||
86 | var liveMode; | |
87 | yoob.makeCheckbox(transformersPanel, false, "Live mode", function(b) { | |
88 | liveMode = b; | |
89 | }); | |
90 | yoob.makeLineBreak(transformersPanel); | |
91 | ||
92 | var updateParametersPanel = function(slot, panel) { | |
93 | var parameters = transformer[slot.name].parameters; | |
94 | panel.innerHTML = ""; // delete any previous controls | |
95 | for (var key in parameters) { | |
96 | if (parameters.hasOwnProperty(key)) { | |
97 | var desc = parameters[key][0]; | |
98 | var def = parameters[key][1]; | |
99 | var label = yoob.makeSpan(panel, key); | |
100 | var input = yoob.makeTextInput(panel, 24, def); | |
101 | slot.selectedParams[key] = def; | |
102 | input.onchange = function() { | |
103 | slot.selectedParams[key] = input.value; | |
104 | if (liveMode) { | |
105 | process(); | |
106 | } | |
107 | } | |
108 | yoob.makeLineBreak(panel); | |
109 | } | |
110 | } | |
111 | }; | |
112 | ||
113 | var makeTransformerSlot = function(container, index) { | |
114 | var select = yoob.makeSelect( | |
115 | transformersPanel, "Transformer " + (index+1), transformerNames | |
116 | ); | |
117 | yoob.makeLineBreak(transformersPanel); | |
118 | var parametersPanel = yoob.makeDiv(transformersPanel); | |
119 | parametersPanel.style.padding = "2px"; | |
120 | parametersPanel.style.border = "1px solid blue"; | |
121 | parametersPanel.style.textAlign = "right"; | |
122 | ||
123 | select.onchange = function(e) { | |
124 | transformerSlots[index].name = select.options[select.selectedIndex].value; | |
125 | updateParametersPanel(transformerSlots[index], parametersPanel); | |
126 | if (liveMode) { | |
127 | process(); | |
128 | } | |
129 | }; | |
130 | ||
131 | return { | |
132 | name: 'identity', | |
133 | selectedParams: {}, | |
134 | select: select, | |
135 | parametersPanel: parametersPanel | |
136 | }; | |
137 | }; | |
138 | ||
139 | for (var i = 0; i < MAX_TRANSFORMER_SLOTS; i++) { | |
140 | var slot = makeTransformerSlot(transformersPanel, i); | |
141 | transformerSlots.push(slot); | |
142 | } | |
143 | ||
144 | output = yoob.makeTextArea(container, 40, 20); | |
145 | 24 | </script> |
0 | 0 | #!/bin/sh |
1 | 1 | |
2 | 2 | cd src |
3 | node gen-lexeduct-browser.js >../demo/lexeduct-browser.js | |
3 | node gen-lexeduct-transformers.js >../demo/lexeduct-transformers.js |
0 | #!/usr/bin/env node | |
1 | ||
2 | fs = require('fs'); | |
3 | ||
4 | function write(s) { | |
5 | process.stdout.write(s + "\n"); | |
6 | } | |
7 | ||
8 | write("module = {};"); | |
9 | write("transformer = {};"); | |
10 | var dirname = 'transformers'; | |
11 | var files = fs.readdirSync(dirname); | |
12 | for (var i = 0; i < files.length; i++) { | |
13 | var filename = files[i]; | |
14 | var transformerName = filename.split('.js')[0]; | |
15 | var text = fs.readFileSync(dirname + '/' + filename); | |
16 | write(text); | |
17 | write("transformer['" + transformerName + "'] = module.exports;"); | |
18 | } |
0 | #!/usr/bin/env node | |
1 | ||
2 | fs = require('fs'); | |
3 | ||
4 | function write(s) { | |
5 | process.stdout.write(s + "\n"); | |
6 | } | |
7 | ||
8 | write("module = {};"); | |
9 | write("transformer = {};"); | |
10 | var dirname = 'transformers'; | |
11 | var files = fs.readdirSync(dirname); | |
12 | for (var i = 0; i < files.length; i++) { | |
13 | var filename = files[i]; | |
14 | var transformerName = filename.split('.js')[0]; | |
15 | var text = fs.readFileSync(dirname + '/' + filename); | |
16 | write(text); | |
17 | write("transformer['" + transformerName + "'] = module.exports;"); | |
18 | } |