forked from deeeeeeeejay/online-xslt-parser
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (78 loc) · 3.88 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Flip Online XSLT Parser</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" style="background: black; color: white">
<strong class="col-sm-4">XML</strong>
<strong class="col-sm-4">XSLT</strong>
<strong class="col-sm-4">
Output XML
<input type="checkbox" name="preview" id="html-preview"/>
Preview HTML
</strong>
</div>
<div class="row editor-container">
<div class="col-sm-4" id="xml-input" class="editor"></div>
<div class="col-sm-4" id="xslt-input" class="editor"></div>
<div class="col-sm-4" id="xml-output" class="editor"></div>
<div class="col-sm-4" id="xml-output-preview" class="editor"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
<script>
$(document).ready(function () {
var xmlOutput = $('#xml-output');
var xmlOutputPreview = $('#xml-output-preview');
var xsltProcessor = new XSLTProcessor();
var xmlSerializer = new XMLSerializer();
var xmlEditor = ace.edit("xml-input");
xmlEditor.setOptions({maxLines: 100, minLines: 100});
xmlEditor.setTheme("ace/theme/cobalt");
xmlEditor.getSession().setMode("ace/mode/xml");
var xsltEditor = ace.edit("xslt-input");
xsltEditor.setOptions({maxLines: 100, minLines: 100});
xsltEditor.setTheme("ace/theme/cobalt");
xsltEditor.getSession().setMode("ace/mode/xml");
var outputEditor = ace.edit("xml-output");
outputEditor.setOptions({maxLines: 100, minLines: 100, readOnly: true});
outputEditor.setTheme("ace/theme/cobalt");
outputEditor.getSession().setMode("ace/mode/xml");
function parse() {
try {
var xmlSource = xmlEditor.getSession().getValue();
var xslSource = xsltEditor.getSession().getValue();
xsltProcessor.reset();
xsltProcessor.importStylesheet($.parseXML(xslSource));
resultDocument = xsltProcessor.transformToFragment($.parseXML(xmlSource), document);
outputEditor.setValue(xmlSerializer.serializeToString(resultDocument));
xmlOutputPreview.html(resultDocument);
} catch (ex) {
outputEditor.setValue(ex.message);
}
}
xsltEditor.getSession().on('change', function () {
setTimeout(parse, 100);
});
xmlEditor.getSession().on('change', function () {
setTimeout(parse, 100);
});
$('#html-preview').change(function () {
if (this.checked){
xmlOutput.fadeOut('slow');
xmlOutputPreview.fadeIn('slow');
} else{
xmlOutput.fadeIn('slow');
xmlOutputPreview.fadeOut('slow');
}
});
});
</script>
</body>
</html>