JSONValidator: Add option to choose indentation in formatted output (#3714)
* JSONValidator: Add options to select number of spaces in indentation * JSONValidator: Add logic for using the number of indentation selected * JSONValidator: Fix CSS to make some margin below radio buttons * JSONValidator: Change class name for consistency in CSS * JSONValidator: Improve new feature of adding tabsize options - Changed radio options to select options - Added more options of indentation, included tab option - Used proper classes according to DDG stylesheetmaster
parent
91ccf0ff85
commit
2868a41a99
|
@ -1,4 +1,18 @@
|
|||
<textarea name="json_validator--input" class="json_validator--input whole tx--12 frm__text" rows="{{rows}}" spellcheck="false" cols="60" placeholder="Paste code here..."></textarea>
|
||||
<div class="json_validator--indentation_options">
|
||||
<form class="frm frm--vrt">
|
||||
<div class="frm__select">
|
||||
<select name="tabsize" id="tabsize">
|
||||
<option value="1">Indent with a tab character</option>
|
||||
<option value="2" selected>Indent with 2 spaces</option>
|
||||
<option value="3">Indent with 3 spaces</option>
|
||||
<option value="4">Indent with 4 spaces</option>
|
||||
<option value="8">Indent with 8 spaces</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<textarea name="json_validator--input" class="json_validator--input whole tx--12 frm__text" rows="{{rows}}" cols="60" spellcheck="false" placeholder="Paste code here..."></textarea>
|
||||
|
||||
<button class="btn btn--skeleton whole--screen-s json_validator--validate_button" disabled>Loading..</button>
|
||||
<button class="btn btn--secondary whole--screen-s json_validator--clear_button">Clear</button>
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
overflow: auto; /* Hide default scrollbars on IE */
|
||||
}
|
||||
|
||||
.zci--json_validator .json_validator--indentation_options {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.zci--json_validator .json_validator--restart_button {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
@ -49,6 +49,9 @@ DDH.json_validator.build = function(ops) {
|
|||
});
|
||||
|
||||
$validateButton.click(function () {
|
||||
// Fetch the value of indentation options (2 or 4 spaces)
|
||||
var tabSize = $('#tabsize').val();
|
||||
|
||||
$result.parent().removeClass('is-hidden');
|
||||
try {
|
||||
var result = jsonlint.parse($input.val());
|
||||
|
@ -59,8 +62,11 @@ DDH.json_validator.build = function(ops) {
|
|||
.removeClass('tx-clr--red-dark')
|
||||
.addClass('tx-clr--green');
|
||||
|
||||
// Set indentation according to option selected by user
|
||||
var indentation = ( tabSize == 1 ) ? '\t' : ' '.repeat(tabSize);
|
||||
|
||||
// Prettyprint (beautify) JSON when it's valid
|
||||
$input.val(JSON.stringify(result, null, " "));
|
||||
$input.val(JSON.stringify(result, null, indentation));
|
||||
}
|
||||
} catch(e) {
|
||||
// JSON is invalid, show the exception (error)
|
||||
|
|
Loading…
Reference in New Issue