Little changes in json formatter. (#83)
Co-authored-by: Artur Kołecki <koleckiartur@icloud.com> Reviewed-on: R11/release11-tools-web#83
This commit is contained in:
		| @@ -1,29 +1,39 @@ | ||||
| function formatAndValidateJson(errorElement) { | ||||
|   const input = document.querySelector('#jsonBlock'); | ||||
|   const errorOutput = document.getElementById(errorElement); | ||||
|   const processInfo = document.getElementById(errorElement); | ||||
|  | ||||
|   try { | ||||
|     const start = new Date(); | ||||
|  | ||||
|     const obj = JSON.parse(input.textContent); | ||||
|     input.innerHTML = JSON.stringify(obj, null, 2); | ||||
|     errorOutput.innerText = ""; | ||||
|     processInfo.innerText = ""; | ||||
|     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) { | ||||
|     errorOutput.innerText = error; | ||||
|     processInfo.innerHTML = "<b style='color: red'>" + error + "</b>"; | ||||
|     console.error("Error: ", error) | ||||
|   } | ||||
| } | ||||
|  | ||||
| function minimizeJson(errorElement) { | ||||
|   const input = document.querySelector('#jsonBlock'); | ||||
|   const errorOutput = document.getElementById(errorElement); | ||||
|   const processInfo = document.getElementById(errorElement); | ||||
|  | ||||
|   try { | ||||
|     const start = new Date(); | ||||
|  | ||||
|     const obj = JSON.parse(input.textContent); | ||||
|     input.innerHTML = JSON.stringify(obj); | ||||
|     errorOutput.innerText = ""; | ||||
|     processInfo.innerText = ""; | ||||
|     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) { | ||||
|     errorOutput.innerText = error; | ||||
|     processInfo.innerHTML = "<b style='color: red'>" + error + "</b>"; | ||||
|     console.error("Error: ", error) | ||||
|   } | ||||
| } | ||||
| @@ -11,6 +11,7 @@ | ||||
|   <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/json.js"></script> | ||||
|   <script>hljs.highlightAll();</script> | ||||
| </head> | ||||
|  | ||||
| <body> | ||||
| @@ -21,7 +22,7 @@ | ||||
|           <h1>Online JSON Formatter</h1> | ||||
|         </div> | ||||
|  | ||||
|         <p style="color: red" id="error"></p> | ||||
|         <p style="margin-bottom: -30px" id="processInfo"></p> | ||||
|  | ||||
|         <pre> | ||||
|           <code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code> | ||||
| @@ -29,11 +30,11 @@ | ||||
|  | ||||
|         <button style="margin-top: 20px" | ||||
|                 class="max-width block-label action-button active" | ||||
|                 onclick="formatAndValidateJson('error')" | ||||
|                 onclick="formatAndValidateJson('processInfo')" | ||||
|         >Prettify JSON</button> | ||||
|  | ||||
|         <button class="max-width block-label action-button active" | ||||
|                 onclick="minimizeJson('error')" | ||||
|                 onclick="minimizeJson('processInfo')" | ||||
|         >Minimize JSON</button> | ||||
|       </div> | ||||
|     </div> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user