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 stylesheet
master
Sahil Dua 2016-11-16 20:57:10 +01:00 committed by Zaahir Moolla
parent 91ccf0ff85
commit 2868a41a99
3 changed files with 26 additions and 2 deletions

View File

@ -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>

View File

@ -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;
}

View File

@ -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)