Refactored tools services endpoints system and fixed json formatter. (#91)

Co-authored-by: Artur Kołecki <koleckiartur@icloud.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Reviewed-on: R11/release11-tools-web#91
2023-03-02 11:49:21 +01:00
parent a90cbb938f
commit b0b930926c
34 changed files with 1000 additions and 444 deletions
--- a/Frontend/tools/jsonFormatter.html
+++ b/Frontend/tools/jsonFormatter.html
@@ -1,54 +1,251 @@
 <!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>
+      const mergeHTMLPlugin = (function () {
+        'use strict';

-  </div>
-</body>
+        var originalStream;
+
+        /**
+         * @param {string} value
+         * @returns {string}
+         */
+        function escapeHTML(value) {
+          return value
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#x27;');
+        }
+
+        /* plugin itself */
+
+        /** @type {HLJSPlugin} */
+        const mergeHTMLPlugin = {
+          // preserve the original HTML token stream
+          "before:highlightElement": ({el}) => {
+            originalStream = nodeStream(el);
+          },
+          // merge it afterwards with the highlighted token stream
+          "after:highlightElement": ({el, result, text}) => {
+            if (!originalStream.length) {
+              return;
+            }
+
+            const resultNode = document.createElement('div');
+            resultNode.innerHTML = result.value;
+            result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
+            el.innerHTML = result.value;
+          }
+        };
+
+        /**
+         * @param {Node} node
+         */
+        function tag(node) {
+          return node.nodeName.toLowerCase();
+        }
+
+        /**
+         * @param {Node} node
+         */
+        function nodeStream(node) {
+          /** @type Event[] */
+          const result = [];
+          (function _nodeStream(node, offset) {
+            for (let child = node.firstChild; child; child = child.nextSibling) {
+              if (child.nodeType === 3) {
+                offset += child.nodeValue.length;
+              } else if (child.nodeType === 1) {
+                result.push({
+                  event: 'start',
+                  offset: offset,
+                  node: child
+                });
+                offset = _nodeStream(child, offset);
+
+                if (!tag(child).match(/br|hr|img|input/)) {
+                  result.push({
+                    event: 'stop',
+                    offset: offset,
+                    node: child
+                  });
+                }
+              }
+            }
+            return offset;
+          })(node, 0);
+          return result;
+        }
+
+        /**
+         * @param {any} original - the original stream
+         * @param {any} highlighted - stream of the highlighted source
+         * @param {string} value - the original source itself
+         */
+        function mergeStreams(original, highlighted, value) {
+          let processed = 0;
+          let result = '';
+          const nodeStack = [];
+
+          function selectStream() {
+            if (!original.length || !highlighted.length) {
+              return original.length ? original : highlighted;
+            }
+            if (original[0].offset !== highlighted[0].offset) {
+              return (original[0].offset < highlighted[0].offset) ? original : highlighted;
+            }
+
+            return highlighted[0].event === 'start' ? original : highlighted;
+          }
+
+          /**
+           * @param {Node} node
+           */
+          function open(node) {
+            /** @param {Attr} attr */
+            function attributeString(attr) {
+              return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
+            }
+
+            // @ts-ignore
+            result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('')
+                + '>';
+          }
+
+          /**
+           * @param {Node} node
+           */
+          function close(node) {
+            result += '</' + tag(node) + '>';
+          }
+
+          /**
+           * @param {Event} event
+           */
+          function render(event) {
+            (event.event === 'start' ? open : close)(event.node);
+          }
+
+          while (original.length || highlighted.length) {
+            let stream = selectStream();
+            result += escapeHTML(value.substring(processed, stream[0].offset));
+            processed = stream[0].offset;
+            if (stream === original) {
+              /*
+              On any opening or closing tag of the original markup we first close
+              the entire highlighted node stack, then render the original tag along
+              with all the following original tags at the same offset and then
+              reopen all the tags on the highlighted stack.
+              */
+              nodeStack.reverse().forEach(close);
+              do {
+                render(stream.splice(0, 1)[0]);
+                stream = selectStream();
+              } while (stream === original && stream.length && stream[0].offset === processed);
+              nodeStack.reverse().forEach(open);
+            } else {
+              if (stream[0].event === 'start') {
+                nodeStack.push(stream[0].node);
+              } else {
+                nodeStack.pop();
+              }
+              render(stream.splice(0, 1)[0]);
+            }
+          }
+          return result + escapeHTML(value.substr(processed));
+        }
+
+        return mergeHTMLPlugin;
+
+      }());
+
+      hljs.addPlugin(mergeHTMLPlugin);
+
+      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>
--- a/Frontend/tools/xmlFormatter.html
+++ b/Frontend/tools/xmlFormatter.html
@@ -1,79 +1,79 @@
 <!DOCTYPE html>
 <html>

-<head>
-    <!-- <link rel="stylesheet" href="styles.css"> -->
-    <link rel="stylesheet" href="../assets/css/tools/r11form.css">
-    <script src="../assets/scripts/tools/scripts.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta charset="utf-8" />
-</head>
+    <head>
+        <!-- <link rel="stylesheet" href="styles.css"> -->
+        <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+        <script src="../assets/scripts/tools/scripts.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="utf-8" />
+    </head>

-<body onload="init();">
-    <div class="container">
-        <div id="tool" class="tool rwd-expandable">
-            <div class="tool-context">
-                <div class="headline">
-                    <h1>Online XML Formatter</h1>
-                </div>
-                <select name="processors" id="processors" class="hidden">
-                    <option value="libxml">libXML</option>
-                </select>
-
-                <div class="display-space-between">
-                    <div>
-                        <b><span id="formatinfo"></span></b><br>
-                        <label for="xmlArea"><b>Insert your XML:</b></label>
+    <body onload="init();">
+        <div class="container">
+            <div id="tool" class="tool rwd-expandable">
+                <div class="tool-context">
+                    <div class="headline">
+                        <h1>Online XML Formatter</h1>
                    </div>
-                    <div>
-                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
-                            onclick="clearDataField()">Clear</button>
-                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
-                            onclick="fillDefaultXML(this)">Insert default XML</button>
+                    <select name="processors" id="processors" class="hidden">
+                        <option value="libxml">libXML</option>
+                    </select>
+
+                    <div class="display-space-between">
+                        <div>
+                            <b><span id="formatinfo"></span></b><br>
+                            <label for="xmlArea"><b>Insert your XML:</b></label>
+                        </div>
+                        <div>
+                            <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
+                                onclick="clearDataField()">Clear</button>
+                            <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                                onclick="fillDefaultXML(this)">Insert default XML</button>
+                        </div>
+
                    </div>

+                    <textarea id="xmlArea" name="xmlArea" rows="15"
+                        class="textarea-700 bordered-field vertically-resizeable max-width"
+                        onblur="setDefaultContent(this, 'Insert XML here');"
+                        onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
+                    <br><br>
+                    <button id="prettifyButton" class="max-width block-label action-button active"
+                        onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Prettify XML</button>
+                    <button id="minimizeButton" class="max-width block-label action-button active"
+                        onclick="performFormatRequest('minimize', true, 'xmlArea', 'xmlArea')">Minimize XML</button>
+
                </div>
-                
-                <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-700 bordered-field vertically-resizeable max-width"
-                    onblur="setDefaultContent(this, 'Insert XML here');"
-                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
-                <br><br>
-                <button id="prettifyButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Prettify XML</button>
-                <button id="minimizeButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('minimizepost', true, 'xmlArea', 'xmlArea')">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 XML</strong> to make it human-readable (add indentation etc.)</li>
-                    <li><strong>Minimize XML</strong> to make it more compact (exactly opposite to above)</li>
-                </ul>
-            </p>
+            <div class="tooltip-window rwd-hideable">
+                <h2>What is this?</h2>
+                <p>This tool has 2 main functions:
+                    <ul>
+                        <li><strong>Prettify XML</strong> to make it human-readable (add indentation etc.)</li>
+                        <li><strong>Minimize XML</strong> to make it more compact (exactly opposite to above)</li>
+                    </ul>
+                </p>
+            </div>
+
+
+
        </div>

+        <script>
+            function getProcessor() {
+                return "libxml";
+            }

+            function getVersion() {
+                return "1.0"
+            }

-    </div>
+            function init() {
+                setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
+            }
+        </script>

-    <script>
-        function getProcessor() {
-            return "libxml";
-        }
-
-        function getVersion() {
-            return "1.0"
-        }
-
-        function init() {
-            setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
-        }
-    </script>
-
-</body>
+    </body>

 </html>
--- a/Frontend/tools/xpath.html
+++ b/Frontend/tools/xpath.html
@@ -40,7 +40,7 @@
                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                            onclick="clearDataField()">Clear</button>
                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
-                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                            onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Format XML</button>
                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                            onclick="fillDefaultXML(this)">Insert default XML</button>
                    </div>
@@ -59,7 +59,7 @@
                    onfocus="clearDefaultContent(this,  'Insert XPath expression here');"></textarea>
                <br>
                <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performRequest('xpathpost', false, true)">Execute XPath
+                    onclick="performRequest('xpath', false, true)">Execute XPath
                    expression</button>
                <br><br>
                <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
--- a/Frontend/tools/xsd.html
+++ b/Frontend/tools/xsd.html
@@ -28,7 +28,7 @@
                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                            onclick="clearDataField()">Clear</button>
                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
-                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                            onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Format XML</button>
                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                            onclick="fillDefaultXML(this)">Insert default XML</button>
                    </div>
@@ -50,7 +50,7 @@
                    onfocus="clearDefaultContent(this, 'Insert XSD here');"></textarea>
                <br>
                <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performRequest('xsdpost', true, true)">Verify XSD</button>
+                    onclick="performRequest('xsd', true, true)">Verify XSD</button>
                <br><br>

                <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
--- a/Frontend/tools/xslt.html
+++ b/Frontend/tools/xslt.html
@@ -29,7 +29,7 @@
                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                            onclick="clearDataField()">Clear</button>
                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
-                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
+                            onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Format XML</button>
                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                            onclick="fillDefaultXML(this)">Insert default XML</button>
                    </div>
@@ -52,7 +52,7 @@
                    onfocus="clearDefaultContent(this, 'Insert XSLT here');"></textarea>
                <br>
                <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performRequest('xsltpost', true, true)">Execute XSLT transform</button>
+                    onclick="performRequest('xslt', true, true)">Execute XSLT transform</button>
                <br><br>

                <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>