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

Refactored tools services endpoints system.

Browse Source
This commit is contained in:
Artur Kolecki
2023-03-01 14:42:01 +01:00
parent eb8518afab
commit 6926d90d13
26 changed files with 622 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
Frontend/tools/jsonFormatter.html
View File

@@ -1,54 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/json.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>
</head>
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/json.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>
</head>
<body>
<div class="container">
<div id="tool" class="tool rwd-expandable">
<div class="tool-context">
<div class="headline">
<h1>Online JSON Formatter</h1>
<body>
<div class="container">
<div id="tool" class="tool rwd-expandable">
<div class="tool-context">
<div class="headline">
<h1>Online JSON Formatter</h1>
</div>
<p style="margin-bottom: -30px" id="processInfo"></p>
<pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre>
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('processInfo')"
>Prettify JSON</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('processInfo')"
>Minimize JSON</button>
</div>
<p style="margin-bottom: -30px" id="processInfo"></p>
<pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre>
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('processInfo')"
>Prettify JSON</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('processInfo')"
>Minimize JSON</button>
</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>
<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>
<script>
</div>
</body>
const editorEle = document.getElementById('jsonBlock');
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
</script>
</body>
</html>