Skip to content

Commit 79abaa5

Browse files
amitguptagwlamitguptagwl
committed
[AG] update demo
1 parent 7eddb3b commit 79abaa5

File tree

1 file changed

+66
-14
lines changed

1 file changed

+66
-14
lines changed

‎index.html‎

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,22 @@
1818
<link rel="stylesheet" href="static/css/bootstrap.min.css">
1919
<link rel="stylesheet" href="static/css/prettify.min.css">
2020
<link rel="stylesheet" href="static/css/jquery-confirm.min.css">
21+
<link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css">
2122

2223
<script src="static/js/jquery-3.2.1.min.js"></script>
24+
<script src="https://codemirror.net/lib/codemirror.js"></script>
2325
<script src="static/js/bootstrap.min.js"></script>
24-
<script src="static/js/prettify.min.js"></script>
26+
<!-- <script src="static/js/prettify.min.js"></script> -->
2527
<link rel="stylesheet" type="text/css" href="static/css/animate3.5.2.min.css">
2628

2729
<script src="lib/parser.js"></script>
2830
<script src="static/js/jquery-confirm.min.js"></script>
31+
<style>
32+
.CodeMirror{
33+
height: 100%;
34+
width: 100%;
35+
}
36+
</style>
2937
</head>
3038
<body>
3139
<body role="document" style="background-color: #2c3e50;">
@@ -52,6 +60,7 @@ <h2>Note!!</h2>
5260
</div>
5361
<div style="border: 1px dashed grey; margin: 5px; padding: 5px;">
5462
<h2>Parsing options</h2>
63+
<p><small>* Parser will not validate the XML</small></p>
5564
<input type="checkbox" id="attrNodeName"> Group all the attributes <br>
5665
<input type="checkbox" id="ignoreAttributes" checked="true"> Ignore attributes <br>
5766
<input type="checkbox" id="ignoreNameSpace"> Remove namespace string from tag and attribute names. <br>
@@ -85,33 +94,75 @@ <h2>Validator options</h2>
8594
</div>
8695
</div>
8796
<script src="https://cdn.rawgit.com/nimndata/nimnjs-schema-builder/5a452c40/dist/nimn-schema-builder.js"></script>
97+
8898
<script>
99+
var highlightedLine = null;
100+
var editor;
101+
102+
function updateLength(){
103+
var xmlData = editor.getValue();
104+
$("#lengthxml")[0].innerText = xmlData.replace(/>\s*</g, "><").length;
105+
}
106+
107+
function onChange(){
108+
highlightLine();
109+
updateLength();
110+
}
111+
function highlightLine(n) {
112+
if (n) {
113+
unhighlightLine();
114+
highlightedLine = editor.addLineClass(n - 1, 'background', 'alert-danger');
115+
editor.setCursor(n);
116+
}else{
117+
unhighlightLine()
118+
}
119+
}
120+
121+
function unhighlightLine() {
122+
if (highlightedLine) {
123+
editor.removeLineClass(highlightedLine, 'background', 'alert-danger');
124+
highlightedLine = null;
125+
}
126+
}
127+
89128
$( document ).ready(function() {
90129
//var parser = require("parser");
130+
editor = CodeMirror.fromTextArea(document.getElementById("txtXml"), {
131+
mode: "application/xml",
132+
styleActiveLine: true,
133+
lineNumbers: true,
134+
foldGutter: true,
135+
autofocus: true,
136+
gutters: ["CodeMirror-foldgutter"]
137+
});
138+
139+
// when user types something, remove highlighting from "bad" line
140+
editor.on('change', () => onChange());
141+
editor.on('drop', () => onChange());
91142

92-
$('#txtXml').on('input', function(){
143+
/* $('#txtXml').on('input', function(){
93144
updateLength();
94-
});
145+
}); */
95146

96147
$('#toJson').on('click', function() {
97148
$('#result').val('');
98-
var result = parser.parse($('#txtXml').val(),buildParsingConfig());
149+
var result = parser.parse(editor.getValue(),buildParsingConfig());
99150
updateOutputLength(JSON.stringify(result));
100151
$('#result').val(JSON.stringify(result,null,4));
101152
});
102153

103154
$('#toXml').on('click', function() {
104-
$('#txtXml').val('');
155+
editor.setValue('');
105156
var result = buildJ2XParser().parse(JSON.parse( $('#result').val() ));
106-
$('#txtXml').val('<?xml version="1.0"?>\n'+result);
157+
editor.setValue('<?xml version="1.0"?>\n'+result);
107158
});
108159

109160
$('#toNimn').on('click', function() {
110161
$('#result').val('');
111162

112-
var jsonData = parser.parse($('#txtXml').val(),buildParsingConfig());
163+
var jsonData = parser.parse(editor.getValue(),buildParsingConfig());
113164
var schema = nimnSchemaBuilder.build(jsonData);
114-
var result = parser.parseToNimn($('#txtXml').val(), schema, buildParsingConfig());
165+
var result = parser.parseToNimn(editor.getValue(), schema, buildParsingConfig());
115166
updateOutputLength(result);
116167
$('#result').val(result);
117168
});
@@ -122,10 +173,13 @@ <h2>Validator options</h2>
122173
allowBooleanAttributes: $("#allowBooleanAttributes_v").prop("checked"),
123174
localeRange : $("#localeRange_v").val() === "" ? "a-zA-Z" : $("#cdataTagName").val(),
124175
};
125-
var val = parser.validate($('#txtXml').val(), config);
176+
var val = parser.validate(editor.getValue(), config);
126177
if(val === true){
127178
$('#result').val("Valid XML");
128179
}else{
180+
if (val.err.line) {
181+
highlightLine(val.err.line);
182+
}
129183
$('#result').val(JSON.stringify(val,null,4));
130184
}
131185
});
@@ -184,16 +238,13 @@ <h2>Validator options</h2>
184238
return;
185239
}
186240

187-
function updateLength(){
188-
var xmlData = $('#txtXml').val();
189-
$("#lengthxml")[0].innerText = xmlData.replace(/>\s*</g, "><").length;
190-
}
241+
191242

192243
function updateOutputLength(data){
193244
$("#lengthoutput")[0].innerText = data.length;
194245
}
195246

196-
$('#txtXml').val(`<?xml version="1.0"?>
247+
editor.setValue(`<?xml version="1.0"?>
197248
<any_name>
198249
<person>
199250
<phone>+122233344550</phone>
@@ -240,5 +291,6 @@ <h2>Validator options</h2>
240291
});
241292
</script>
242293
<script async defer src="https://buttons.github.io/buttons.js"></script>
294+
243295
</body>
244296
</html>

0 commit comments

Comments
 (0)