R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Little changes in json formatter. (#83)

Browse Source 
Co-authored-by: Artur Kołecki <koleckiartur@icloud.com>
Reviewed-on: R11/release11-tools-web#83
This commit is contained in:
Artur Kolecki
2023-02-28 14:08:26 +01:00
parent 4d7c0d6acd
commit d6c2c863eb
2 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Frontend/assets/scripts/tools/json.js
View File

@@ -1,29 +1,39 @@
function formatAndValidateJson(errorElement) { function formatAndValidateJson(errorElement) {
const input = document.querySelector('#jsonBlock'); const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement); const processInfo = document.getElementById(errorElement);
try { try {
const start = new Date();
const obj = JSON.parse(input.textContent); const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj, null, 2); input.innerHTML = JSON.stringify(obj, null, 2);
errorOutput.innerText = ""; processInfo.innerText = "";
hljs.highlightElement(input); hljs.highlightElement(input);
const end = new Date();
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
} catch (error) { } catch (error) {
errorOutput.innerText = error; processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
console.error("Error: ", error) console.error("Error: ", error)
} }
} }
function minimizeJson(errorElement) { function minimizeJson(errorElement) {
const input = document.querySelector('#jsonBlock'); const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement); const processInfo = document.getElementById(errorElement);
try { try {
const start = new Date();
const obj = JSON.parse(input.textContent); const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj); input.innerHTML = JSON.stringify(obj);
errorOutput.innerText = ""; processInfo.innerText = "";
hljs.highlightElement(input); hljs.highlightElement(input);
const end = new Date();
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
} catch (error) { } catch (error) {
errorOutput.innerText = error; processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
console.error("Error: ", error) console.error("Error: ", error)
} }
} }

7
Frontend/tools/jsonFormatter.html
View File

@@ -11,6 +11,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script> <script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/json.js"></script> <script src="../assets/scripts/tools/json.js"></script>
<script>hljs.highlightAll();</script>
</head> </head>
<body> <body>
@@ -21,7 +22,7 @@
<h1>Online JSON Formatter</h1> <h1>Online JSON Formatter</h1>
</div> </div>
<p style="color: red" id="error"></p> <p style="margin-bottom: -30px" id="processInfo"></p>
<pre> <pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code> <code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
@@ -29,11 +30,11 @@
<button style="margin-top: 20px" <button style="margin-top: 20px"
class="max-width block-label action-button active" class="max-width block-label action-button active"
onclick="formatAndValidateJson('error')" onclick="formatAndValidateJson('processInfo')"
>Prettify JSON</button> >Prettify JSON</button>
<button class="max-width block-label action-button active" <button class="max-width block-label action-button active"
onclick="minimizeJson('error')" onclick="minimizeJson('processInfo')"
>Minimize JSON</button> >Minimize JSON</button>
</div> </div>
</div> </div>