Skip to content

Commit f11f20c

Browse files
prantlfprantlf
committed
chore: Support parsing mode on the on-line page
1 parent 04d80d7 commit f11f20c

File tree

1 file changed

+76
-29
lines changed

1 file changed

+76
-29
lines changed

‎web/jsonlint.html‎

Lines changed: 76 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
}
2424
#data, #schema, #validate {
2525
font-size: 100%;
26+
border-radius: 0.5ex;
27+
}
28+
#validate {
29+
padding: 1ex;
30+
color: white;
31+
background-color: darkblue;
32+
border: 1px solid darkblue;
2633
}
2734
#data, #schema {
2835
font-family: monospace;
@@ -39,16 +46,20 @@
3946
flex-basis: calc(50% - 1ex);
4047
min-width: calc(42ex - 3ex);
4148
}
42-
#options {
49+
#options > * {
4350
display: flex;
4451
flex-wrap: wrap;
4552
margin-top: 1ex;
4653
margin-bottom: 1ex;
4754
}
48-
#options > * {
55+
#options > * > * {
4956
margin-right: 3ex;
5057
margin-bottom: 1ex;
5158
}
59+
#options > * > span {
60+
display: block;
61+
width: 5em;
62+
}
5263
#result-section {
5364
display: none;
5465
}
@@ -85,32 +96,53 @@ <h1>JSON Lint</h1>
8596
</div>
8697
<div id="options">
8798
<div>
88-
<input type="checkbox" checked id="reformat">
89-
<label for="reformat">Reformat source</label>
90-
</div>
91-
<div>
92-
<input type="checkbox" id="sort-object-keys">
93-
<label for="sort-object-keys">Sort object keys</label>
99+
<span>Parsing:</span>
100+
<div>
101+
<input type="checkbox" id="comments">
102+
<label for="comments">Ignore comments</label>
103+
</div>
104+
<div>
105+
<input type="checkbox" id="trailing-commas">
106+
<label for="trailing-commas">Ignore trailing commas</label>
107+
</div>
108+
<div>
109+
<input type="checkbox" id="single-quoted-strings">
110+
<label for="single-quoted-strings">Allow single-quoted strings</label>
111+
</div>
112+
<div>
113+
<input type="checkbox" checked id="duplicate-object-keys">
114+
<label for="single-quoted-strings">Allow duplicate object keys</label>
115+
</div>
94116
</div>
95117
<div>
96-
<input type="checkbox" id="comments">
97-
<label for="comments">Ignore JavaScript-style comments</label>
118+
<span>Formatting:</span>
119+
<div>
120+
<input type="checkbox" checked id="reformat">
121+
<label for="reformat">Reformat source</label>
122+
</div>
123+
<div>
124+
<input type="checkbox" id="sort-object-keys">
125+
<label for="sort-object-keys">Sort object keys</label>
126+
</div>
98127
</div>
99128
<div>
100-
<input type="checkbox" id="trailing-commas">
101-
<label for="trailing-commas">Ignore trailing commas</label>
102-
</div>
103-
<div>
104-
<input type="checkbox" id="single-quoted-strings">
105-
<label for="single-quoted-strings">Recognize single-quoted strings</label>
106-
</div>
107-
<div>
108-
<input type="checkbox" checked id="duplicate-object-keys">
109-
<label for="single-quoted-strings">Allow duplicate object keys</label>
110-
</div>
111-
<div>
112-
<input type="checkbox" id="with-schema">
113-
<label for="with-schema">Use schema</label>
129+
<span>Standard:</span>
130+
<div>
131+
<input type="radio" name="mode" checked id="json">
132+
<label for="json">JSON</label>
133+
</div>
134+
<div>
135+
<input type="radio" name="mode" id="cjson">
136+
<label for="cjson">CJSON</label>
137+
</div>
138+
<div>
139+
<input type="radio" name="mode" id="json5">
140+
<label for="json5">JSON5</label>
141+
</div>
142+
<div>
143+
<input type="checkbox" id="with-schema">
144+
<label for="with-schema">Use JSON Schema</label>
145+
</div>
114146
</div>
115147
</div>
116148
<button id="validate" type="button">Validate</button>
@@ -141,17 +173,32 @@ <h2>Result</h2>
141173
}
142174
document.getElementById('source').className = className
143175
}
176+
document.querySelectorAll('[name=mode]').forEach(function (element) {
177+
element.onchange = function () {
178+
var mode = document.querySelector('[name=mode]:checked').id
179+
document.getElementById('comments').parentElement.style.display =
180+
mode === 'cjson' || mode === 'json5' ? 'none' : 'block'
181+
document.getElementById('trailing-commas').parentElement.style.display =
182+
mode === 'json5' ? 'none' : 'block'
183+
document.getElementById('single-quoted-strings').parentElement.style.display =
184+
mode === 'json5' ? 'none' : 'block'
185+
}
186+
})
144187
document.getElementById('validate').onclick = function () {
145188
document.getElementById('result-section').style.display = 'block'
146189
try {
147-
var parser = jsonlint.parser
190+
var mode = document.querySelector('[name=mode]:checked').id
148191
var parserOptions = {
149-
ignoreComments: document.getElementById('comments').checked,
150-
ignoreTrailingCommas: document.getElementById('trailing-commas').checked,
151-
allowSingleQuotedStrings: document.getElementById('single-quoted-strings').checked,
192+
mode: mode,
193+
ignoreComments: document.getElementById('comments').checked ||
194+
mode === 'cjson' || mode === 'json5',
195+
ignoreTrailingCommas: document.getElementById('trailing-commas').checked ||
196+
mode === 'json5',
197+
allowSingleQuotedStrings: document.getElementById('single-quoted-strings').checked ||
198+
mode === 'json5',
152199
allowDuplicateObjectKeys: document.getElementById('duplicate-object-keys').checked,
153200
}
154-
var parsed = parser.parse(document.getElementById('data').value, parserOptions)
201+
var parsed = jsonlint.parse(document.getElementById('data').value, parserOptions)
155202
if (document.getElementById('with-schema').checked) {
156203
var schema = document.getElementById('schema').value
157204
var validate = jsonlintValidator.compile(schema, parserOptions)

0 commit comments

Comments
 (0)