forked from tabatkins/railroad-diagrams
-
Notifications
You must be signed in to change notification settings - Fork 0
/
generator.html
59 lines (56 loc) · 1.19 KB
/
generator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<title>Railroad Diagram Generator</title>
<script src="railroad-diagrams.js"></script>
<link href="railroad-diagrams.css" rel=stylesheet>
<textarea class='input'>Diagram(
Optional('+', 'skip'),
Choice(0,
NonTerminal('name-start char'),
NonTerminal('escape')),
ZeroOrMore(
Choice(0,
NonTerminal('name char'),
NonTerminal('escape'))))</textarea>
<div class='output-image'></div>
<textarea class='output-text' readonly></textarea>
</div>
<script>
window.find = document.querySelector.bind(document);
find('.input').addEventListener('input', process, false);
window.addEventListener('load', process, false);
function process() {
var input = find('.input').value;
try {
var result = eval(input).format();
} catch (e) {
return;
}
find('.output-image').innerHTML = '';
result.addTo(find('.output-image'));
find('.output-text').textContent = result;
}
</script>
<style>
* { box-sizing: border-box; }
.input {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
}
.output-text {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
}
.output-image {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 50%;
}
</style>