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

Created base of json formatter and validator.

Browse Source
This commit is contained in:
Artur Kolecki
2023-02-23 17:49:26 +01:00
parent 3c927f91cf
commit 735f600c66
5 changed files with 114 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Frontend/assets/scripts/tools/json.js Normal file
View File

@@ -0,0 +1,29 @@
function formatAndValidateJson(errorElement) {
const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement);
try {
const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj, null, 2);
errorOutput.innerText = "";
hljs.highlightElement(input);
} catch (error) {
errorOutput.innerText = error;
console.error("Error: ", error)
}
}
function minimizeJson(errorElement) {
const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement);
try {
const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj);
errorOutput.innerText = "";
hljs.highlightElement(input);
} catch (error) {
errorOutput.innerText = error;
console.error("Error: ", error)
}
}

4
Frontend/assets/scripts/tools/scripts.js
View File

@@ -43,6 +43,10 @@ function setDefaultContent(element, text) {
element.style.color = color_grey;
element.value = text;
}
if (id == "jsonArea") {
element.style.color = color_grey;
element.value = text;
}
}
}

3
Frontend/index.html
View File

@@ -25,7 +25,8 @@
<li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
<li id="toolListRow"><a href="./tools/formatter.html" target="iframe">Formatter</a></li>
<li id="toolListRow"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
<li id="toolListRow"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
</ul>
<div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
</div>

79
Frontend/tools/jsonFormatter.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/json.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<script>hljs.highlightAll();</script>
</head>
<body onload="init();">
<div class="container">
<div id="tool" class="tool rwd-expandable">
<div class="tool-context">
<div class="headline">
<h1>Online JSON Formatter <span class="versionInfo"><span class="version-span">v0.0.1 BETA</span></span>
</h1>
</div>
<h4 style="color: red" id="error"></h4>
<pre>
<code class="hightlight-json jsonBlock" style="height: 600px; width: 1000px;" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre>
<!-- <label for="jsonArea"><b>Insert your JSON:</b></label>
<textarea id="jsonArea"
name="jsonArea"
rows="15"
class="textarea-700 bordered-field vertically-resizeable max-width"></textarea>-->
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('error')">
Prettify XML
</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('error')">
Minimize XML
</button>
</div>
</div>
<div class="tooltip-window rwd-hideable">
<h2>What is this?</h2>
<p>This tool has 2 main functions:
<ul>
<li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
<li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
</ul>
</p>
</div>
</div>
<script>
const textArea = document.querySelector('#textArea');
textArea.addEventListener('input', function() {
textArea.innerHTML = hljs.highlight('json', textArea.value).value;
});
</script>
<script>
function init() {
//Handle clicks in whole form and set info in tooltip
setDefaultContent(document.getElementById("jsonArea"), 'Insert JSON here');
console.log("init")
}
</script>
</body>
</html>

0
Frontend/tools/formatter.html → Frontend/tools/xmlFormatter.html
View File