-
Notifications
You must be signed in to change notification settings - Fork 1
/
runtime-svg-reaction.html
156 lines (156 loc) · 5.67 KB
/
runtime-svg-reaction.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<title>Hello, XSLT!</title>
<style>
label {
display: block;
}
table {
width: 100%;
}
td {
height: auto;
width: 33%;
vertical-align: top;
}
button {
width: 200px;
}
.controls {
height: 40px;
text-align: center;
}
.output {
height: 300px;
text-align: center;
}
.spacer {
height: 20px;
}
svg {
display: block;
margin: auto;
}
rect.btn {
stroke: #ffffff;
fill: #ffffff;
fill-opacity: 0;
stroke-opacity: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">
<!-- xslt -->
<label for="preprocessor-xslt">Preprocessor XSLT</label>
<textarea cols="50" rows="10" id="preprocessor-xslt"></textarea>
<label for="processor-xslt">Processor XSLT</label>
<textarea cols="50" rows="10" id="processor-xslt"></textarea>
<label for="postprocessor-xslt">Postprocessor XSLT</label>
<textarea cols="50" rows="10" id="postprocessor-xslt"></textarea>
</td>
<td>
<!-- initial xml -->
<label for="input-xml">Input XML</label>
<textarea cols="50" rows="2" id="input-xml"></textarea>
</td>
<td>
<!-- parameters -->
<label for="parameters">Parameters</label>
<textarea cols="50" rows="2" id="parameters"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<!-- controls -->
<div class="controls">
<button type="button" id="init" onclick="onInit()">Init/Reset</button>
<button type="button" id="step" onclick="onStep()">Step</button>
</div>
<div id="output" class="output"></div>
</td>
</tr>
<tr>
<td>
<label for="output-xml">Output XML</label>
<textarea cols="50" rows="10" id="output-xml"></textarea>
</td>
<td>
<label for="postprocessed-xml">Postprocessed XML</label>
<textarea cols="50" rows="10" id="postprocessed-xml"></textarea>
</td>
</tr>
</table>
</body>
<script>
function transform(xslt, xml, params) {
var processor = new XSLTProcessor();
var parser = new DOMParser();
var xsltDom = parser.parseFromString(xslt, "application/xml");
// TODO: check errors .documentElement.nodeName == "parsererror"
var xmlDom = parser.parseFromString(xml, "application/xml");
processor.importStylesheet(xsltDom);
if (typeof params !== 'undefined') {
params.forEach(function(value, key) {
processor.setParameter("", key, value);
});
}
var result = processor.transformToDocument(xmlDom);
var serializer = new XMLSerializer();
return serializer.serializeToString(result);
}
function parseParams(s) {
var params = new Map();
params.set("param", "" + s);
var rows = s.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var index = row.indexOf("=");
if (index > 0) {
var key = row.substring(0, index).trim();
var value = row.substring(index + 1).trim();
if (key.length > 0) {
params.set(key, value);
}
}
}
return params;
}
function doPreprocessing() {
var xslt = document.getElementById("preprocessor-xslt").value;
var xml = document.getElementById("input-xml").value;
var result = transform(xslt, xml);
document.getElementById("output-xml").value = result;
}
function doProcessing() {
var params = parseParams(document.getElementById("parameters").value);
var xslt = document.getElementById("processor-xslt").value;
var xml = document.getElementById("output-xml").value;
var result = transform(xslt, xml, params);
document.getElementById("output-xml").value = result;
}
function doPostprocessing() {
var xslt = document.getElementById("postprocessor-xslt").value;
var xml = document.getElementById("output-xml").value;
var result = transform(xslt, xml);
document.getElementById("postprocessed-xml").value = result;
document.getElementById("output").innerHTML = result;
}
function onInit() {
doPreprocessing();
doPostprocessing();
}
function onStep() {
doProcessing();
doPostprocessing();
}
function onSvgClick(arg) {
document.getElementById("parameters").value = arg;
onStep();
}
</script>
</html>