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

Created json formatter and validator. #82

Merged
koleckia merged 25 commits from features/json-parser-and-formatter into master 2023-02-28 12:51:13 +01:00
Conversation 0 Commits 25 Files Changed 6 +15 -31
1 changed files with 15 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0625502d32 - Show all commits

46
Frontend/tools/jsonFormatter.html
View File

@@ -2,18 +2,17 @@
<html> <html>
<head> <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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<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>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/json.js"></script>
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</head> </head>
<body onload="init();"> <body onload="init();">
<div class="container"> <div class="container">
<div id="tool" class="tool rwd-expandable"> <div id="tool" class="tool rwd-expandable">
@@ -23,30 +22,23 @@
</h1> </h1>
</div> </div>
<h4 style="color: red" id="error"></h4> <p style="color: red" id="error"></p>
<pre> <pre>
<code class="hightlight-json jsonBlock" style="height: 600px; width: 1000px;" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code> <code class="hightlight-json jsonBlock" style="height: 600px; width: 1000px;" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre> </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" <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('error')"
Prettify JSON >Prettify JSON</button>
</button>
<button class="max-width block-label action-button active" <button class="max-width block-label action-button active"
onclick="minimizeJson('error')"> onclick="minimizeJson('error')"
Minimize JSON >Minimize JSON</button>
</button>
</div> </div>
</div> </div>
<div class="tooltip-window rwd-hideable"> <div class="tooltip-window rwd-hideable">
<h2>What is this?</h2> <h2>What is this?</h2>
<p>This tool has 2 main functions: <p>This tool has 2 main functions:
@@ -60,20 +52,12 @@
</div> </div>
<script> <script>
const textArea = document.querySelector('#textArea'); const input = document.querySelector('#jsonBlock');
textArea.addEventListener('input', function() { input.addEventListener('div > div', function() {
textArea.innerHTML = hljs.highlight('json', textArea.value).value; hljs.highlightElement(input);
}); });
</script> </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> </body>
</html> </html>