From 3ff192b3f67c8b0f00c60580c0755965ab62848a Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Fri, 21 Apr 2023 10:55:21 +0200 Subject: [PATCH 01/15] Added import of highlight.js --- Frontend/tools/xpath.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index 4c7962a..563a52e 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -5,7 +5,8 @@ - + + From 008c6259f005501aff91fcb48b538b91e5cd0eb8 Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Fri, 21 Apr 2023 14:40:27 +0200 Subject: [PATCH 02/15] Implemented partially working text field --- Frontend/tools/xpath.html | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index 563a52e..c89e429 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -2,11 +2,13 @@ - - - + + + + + @@ -47,10 +49,13 @@
- + onfocus="clearDefaultContent(this, 'Insert XML here');"> --> + 
+                        Insert XML here
+


--> - 
-                        Insert XML here
-
+


--> -
+


+ rows="10" cols="100"> --> +
From d06c0bdf360c712cc0206668aa105b4a1f4c4d45 Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Tue, 25 Apr 2023 14:52:06 +0200 Subject: [PATCH 05/15] Syntax highlighting works fully for XPath --- Frontend/assets/scripts/tools/scripts.js | 41 +++++++++++++++--------- Frontend/tools/xpath.html | 39 +++++++++++++++++++++- 2 files changed, 63 insertions(+), 17 deletions(-) diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js index 38e57b7..ab24327 100644 --- a/Frontend/assets/scripts/tools/scripts.js +++ b/Frontend/assets/scripts/tools/scripts.js @@ -74,8 +74,8 @@ function clearDataField() { * @param {any} element * @returns {void} */ -function escapeHTML(element) { - element.innerHTML = element.innerHTML +function escapeHTML(elementID) { + document.getElementById(elementID).innerHTML = document.getElementById(elementID).innerHTML .replace(/&/g, "&") .replace(//g, ">") @@ -83,6 +83,11 @@ function escapeHTML(element) { .replace(/'/g, "'"); } +function highlightSyntax(elementId) { + const element = document.getElementById(elementId); + element.innerHTML = hljs.highlightAuto(element.innerText).value +} + /** * It fills the XML area with a sample XML. * @@ -99,10 +104,10 @@ function fillDefaultXML(element) { fetch(serverAddress + "/assets/samples/sampleXml.xml") .then(response => response.text()) .then((exampleData) => { - document.getElementById("xmlArea").innerHTML = exampleData; - escapeHTML(document.getElementById("xmlArea")); + document.getElementById("xmlArea").innerText = exampleData; + highlightSyntax("xmlArea"); document.getElementById("xmlArea").style.backgroundColor = null; - hljs.highlightAll(); + }) } } @@ -284,17 +289,17 @@ function performRequest(endpoint, checkXML, checkTransform) { } if (!empty) { restRequest(port, endpoint, xmlData, transformData).then(function (result) { - document.getElementById("resultArea").innerHTML = result.result; - escapeHTML(document.getElementById("resultArea")); - hljs.highlightAll(); - document.getElementById("procinfo").innerText = ' Computed using ' + result.processor - if (result.type) - document.getElementById("procinfo").innerText += ". Returned: " + result.type; - else - document.getElementById("procinfo").innerText += ". Engine doesn't support return of data types."; + document.getElementById("resultArea").innerText = result.result; + highlightSyntax("resultArea"); + document.getElementById("procinfo").innerText = ' Computed using ' + result.processor; + - if (result.status = "OK") { + if (result.status == "OK") { document.getElementById("procinfo").innerText += " (" + result.time + "ms)"; + if (result.type) + document.getElementById("procinfo").innerText += ". Returned: " + result.type; + else + document.getElementById("procinfo").innerText += ". Engine doesn't support return of data types."; procinfo.style.color = "#30aa58"; } else { procinfo.style.color = "#aa3030"; @@ -324,7 +329,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) { const targetElement = document.getElementById(targetId); const infoElement = document.getElementById("formatinfo"); const port = 8082; - var xmlData = sourceElement.value.trim(); + var xmlData = sourceElement.innerText.trim(); var empty = false; if (defaultStrings.includes(xmlData) && checkXML) { @@ -336,10 +341,13 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) { if (!empty) { restRequest(port, endpoint, xmlData, "").then(function (result) { if (result.status == "OK") { - targetElement.value = result.result; + targetElement.innerText = result.result.trim(); + highlightSyntax(targetElement.id); + targetElement.style.backgroundColor = null; infoElement.innerText = ' Computed'.concat(" in ", result.time, "ms."); infoElement.style.color = "#30aa58"; + } else { targetElement.style.backgroundColor = color_red; @@ -350,6 +358,7 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId) { }); } + } diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index 1ea043e..a540999 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -68,7 +68,7 @@ -
+
@@ -17266,6 +17266,43 @@ }) } + const editorEle = document.getElementById('xmlArea'); + + // 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); + highlightSyntax(editorEle.id); + } 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); + + + } + + }); + From 3728ac0709d3ba868b41d2fa46edf03772670e3d Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 10:57:57 +0200 Subject: [PATCH 06/15] Changed transform field to new one --- Frontend/assets/scripts/tools/scripts.js | 2 +- Frontend/tools/xpath.html | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js index ab24327..5319322 100644 --- a/Frontend/assets/scripts/tools/scripts.js +++ b/Frontend/assets/scripts/tools/scripts.js @@ -270,7 +270,7 @@ function performRequest(endpoint, checkXML, checkTransform) { const sourceId = "xmlArea"; const transformId = "transformArea"; var xmlData = document.getElementById(sourceId).innerText.trim(); - var transformData = document.getElementById(transformId).value.trim(); + var transformData = document.getElementById(transformId).innerText.trim(); var port = 8081; if (getProcessor() == "libxml") { diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index a540999..c0689c8 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -54,16 +54,17 @@ onblur="setDefaultContent(this, 'Insert XML here');" onfocus="clearDefaultContent(this, 'Insert XML here');"> -->
-

+
- + onfocus="clearDefaultContent(this, 'Insert XPath expression here');"> --> +

-

+
-
+
diff --git a/Frontend/tools/xsd.html b/Frontend/tools/xsd.html index 4cfbd35..3409cdc 100644 --- a/Frontend/tools/xsd.html +++ b/Frontend/tools/xsd.html @@ -4,7 +4,11 @@ + + + + @@ -43,25 +47,18 @@ - -

+
+
- +

-

+
- +
@@ -115,6 +112,80 @@ } } + const editorEle = document.getElementById('xmlArea'); + + // 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); + highlightSyntax(editorEle.id); + } 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); + + + } + + }); + + const transformEle = document.getElementById('transformArea'); + + // Handle the `paste` event + transformEle.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); + highlightSyntax(transformEle.id); + } 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); + + + } + + }); + diff --git a/Frontend/tools/xslt.html b/Frontend/tools/xslt.html index 50d3d94..3ba79b9 100644 --- a/Frontend/tools/xslt.html +++ b/Frontend/tools/xslt.html @@ -4,7 +4,13 @@ + + + + + + @@ -45,11 +51,8 @@
- -

+
+
@@ -59,19 +62,14 @@
- +

-

+
- +
@@ -1227,6 +1225,80 @@ processTooltip(); }) } + + const editorEle = document.getElementById('xmlArea'); + + // 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); + highlightSyntax(editorEle.id); + } 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); + + + } + + }); + + const transformEle = document.getElementById('transformArea'); + + // Handle the `paste` event + transformEle.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); + highlightSyntax(transformEle.id); + } 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); + + + } + + }); From 1a010087aad60476b2c4101b4cbada4f4e164a88 Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 11:14:11 +0200 Subject: [PATCH 08/15] Fixed XSLT sample --- Samples/xslt/sampleXSLT.xslt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Samples/xslt/sampleXSLT.xslt b/Samples/xslt/sampleXSLT.xslt index 178e5a0..00f662d 100644 --- a/Samples/xslt/sampleXSLT.xslt +++ b/Samples/xslt/sampleXSLT.xslt @@ -1,4 +1,4 @@ - + From cd68f55c9701cc43efec68c12560d0eedee68f3d Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 11:20:43 +0200 Subject: [PATCH 09/15] Renamed json files to highlight --- Frontend/assets/css/{json.css => highlight.css} | 0 .../assets/scripts/tools/{json.js => highlight.js} | 0 Frontend/tools/jsonFormatter.html | 4 ++-- Frontend/tools/xpath.html | 14 ++------------ Frontend/tools/xsd.html | 4 ++-- Frontend/tools/xslt.html | 4 ++-- 6 files changed, 8 insertions(+), 18 deletions(-) rename Frontend/assets/css/{json.css => highlight.css} (100%) rename Frontend/assets/scripts/tools/{json.js => highlight.js} (100%) diff --git a/Frontend/assets/css/json.css b/Frontend/assets/css/highlight.css similarity index 100% rename from Frontend/assets/css/json.css rename to Frontend/assets/css/highlight.css diff --git a/Frontend/assets/scripts/tools/json.js b/Frontend/assets/scripts/tools/highlight.js similarity index 100% rename from Frontend/assets/scripts/tools/json.js rename to Frontend/assets/scripts/tools/highlight.js diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html index d0e18b4..9bb8db9 100644 --- a/Frontend/tools/jsonFormatter.html +++ b/Frontend/tools/jsonFormatter.html @@ -6,10 +6,10 @@ - + - + diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index f3a8885..f24a0ac 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -3,10 +3,10 @@ - + - + @@ -49,16 +49,9 @@
-

-

From 2760ad4e0fc920ea0895d1fdb9fed4664346ac2f Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 11:43:44 +0200 Subject: [PATCH 12/15] Fixes and refactors --- Frontend/tools/jsonFormatter.html | 2 ++ Frontend/tools/xmlFormatter.html | 36 +++++++++++++++++++++++++++++++ Frontend/tools/xpath.html | 4 +--- Frontend/tools/xsd.html | 8 +++---- Frontend/tools/xslt.html | 10 ++------- 5 files changed, 44 insertions(+), 16 deletions(-) diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html index 9bb8db9..a24b29a 100644 --- a/Frontend/tools/jsonFormatter.html +++ b/Frontend/tools/jsonFormatter.html @@ -241,6 +241,7 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); + } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -255,6 +256,7 @@ selection.removeAllRanges(); selection.addRange(range); } + highlightSyntax(editorEle.id); }); diff --git a/Frontend/tools/xmlFormatter.html b/Frontend/tools/xmlFormatter.html index 466d5ea..9a2331a 100644 --- a/Frontend/tools/xmlFormatter.html +++ b/Frontend/tools/xmlFormatter.html @@ -74,6 +74,42 @@ function init() { setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here'); } + + const editorEle = document.getElementById('xmlArea'); + + // 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); + + } + highlightSyntax(editorEle.id); + + }); diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index f24a0ac..742d4f8 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -17274,7 +17274,6 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); - highlightSyntax(editorEle.id); } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -17288,9 +17287,8 @@ const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - - } + highlightSyntax(editorEle.id); }); diff --git a/Frontend/tools/xsd.html b/Frontend/tools/xsd.html index 9ba8044..85152e9 100644 --- a/Frontend/tools/xsd.html +++ b/Frontend/tools/xsd.html @@ -129,7 +129,6 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); - highlightSyntax(editorEle.id); } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -144,8 +143,8 @@ selection.removeAllRanges(); selection.addRange(range); - } + highlightSyntax(editorEle.id); }); @@ -166,7 +165,7 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); - highlightSyntax(transformEle.id); + } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -180,9 +179,8 @@ const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - - } + highlightSyntax(transformEle.id); }); diff --git a/Frontend/tools/xslt.html b/Frontend/tools/xslt.html index 69782f3..2407332 100644 --- a/Frontend/tools/xslt.html +++ b/Frontend/tools/xslt.html @@ -1243,7 +1243,6 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); - highlightSyntax(editorEle.id); } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -1257,10 +1256,8 @@ const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - - } - + highlightSyntax(editorEle.id); }); const transformEle = document.getElementById('transformArea'); @@ -1280,7 +1277,6 @@ if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, text); - highlightSyntax(transformEle.id); } else { // Insert text at the current position of caret const range = document.getSelection().getRangeAt(0); @@ -1294,10 +1290,8 @@ const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - - } - + highlightSyntax(transformEle.id); }); From 10c7c85d571e9fbe8be57068b5c677398fecfc19 Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 12:01:50 +0200 Subject: [PATCH 13/15] Removed duplicate code --- Frontend/assets/scripts/tools/scripts.js | 38 ++++++++++++ Frontend/tools/jsonFormatter.html | 41 ++----------- Frontend/tools/xmlFormatter.html | 38 +----------- Frontend/tools/xpath.html | 39 ++---------- Frontend/tools/xsd.html | 78 ++---------------------- Frontend/tools/xslt.html | 75 +++-------------------- 6 files changed, 62 insertions(+), 247 deletions(-) diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js index 88f85e1..e173992 100644 --- a/Frontend/assets/scripts/tools/scripts.js +++ b/Frontend/assets/scripts/tools/scripts.js @@ -411,3 +411,41 @@ async function restRequest(port, endpoint, xmlData, transformData) { }); return result; } + + +function configurePastingInElement(elementId) { + const editorEle = document.getElementById(elementId); + + // 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); + } + highlightSyntax(editorEle.id); + + }); +} \ No newline at end of file diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html index a24b29a..e316c13 100644 --- a/Frontend/tools/jsonFormatter.html +++ b/Frontend/tools/jsonFormatter.html @@ -13,7 +13,7 @@ - +
@@ -224,40 +224,11 @@ 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); - } - highlightSyntax(editorEle.id); - }); + function init() { + // Make sure that only plain text is pasted + configurePastingInElement("jsonBlock"); + + } diff --git a/Frontend/tools/xmlFormatter.html b/Frontend/tools/xmlFormatter.html index 9a2331a..c9419ea 100644 --- a/Frontend/tools/xmlFormatter.html +++ b/Frontend/tools/xmlFormatter.html @@ -72,44 +72,8 @@ } function init() { - setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here'); + configurePastingInElement("xmlArea"); } - - const editorEle = document.getElementById('xmlArea'); - - // 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); - - } - highlightSyntax(editorEle.id); - - }); diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html index 742d4f8..f228041 100644 --- a/Frontend/tools/xpath.html +++ b/Frontend/tools/xpath.html @@ -17219,6 +17219,10 @@ } function init() { + // Make sure that only plain text is pasted + configurePastingInElement("xmlArea"); + configurePastingInElement("transformArea"); + //Handle clicks in whole form and set info in tooltip setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here'); setDefaultContent(document.getElementById("transformArea"), 'Insert XPath expression here'); @@ -17257,40 +17261,7 @@ }) } - const editorEle = document.getElementById('xmlArea'); - - // 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); - } - highlightSyntax(editorEle.id); - - }); + diff --git a/Frontend/tools/xsd.html b/Frontend/tools/xsd.html index 85152e9..e515362 100644 --- a/Frontend/tools/xsd.html +++ b/Frontend/tools/xsd.html @@ -81,6 +81,10 @@ diff --git a/Frontend/tools/xslt.html b/Frontend/tools/xslt.html index 2407332..5bc9ca7 100644 --- a/Frontend/tools/xslt.html +++ b/Frontend/tools/xslt.html @@ -1199,6 +1199,10 @@ } function init() { + // Make sure that only plain text is pasted + configurePastingInElement("xmlArea"); + configurePastingInElement("transformArea"); + //Handle clicks in whole form and set info in tooltip setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here'); setDefaultContent(document.getElementById("transformArea"), 'Insert XSLT here'); @@ -1223,76 +1227,11 @@ } processTooltip(); + }) + } - - const editorEle = document.getElementById('xmlArea'); - - // 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); - } - highlightSyntax(editorEle.id); - }); - - const transformEle = document.getElementById('transformArea'); - - // Handle the `paste` event - transformEle.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); - } - highlightSyntax(transformEle.id); - }); + From 03a11f40b433805804a87a57f11e836c6cbf0a3a Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 13:24:48 +0200 Subject: [PATCH 14/15] Fixed naming --- Frontend/assets/scripts/tools/highlight.js | 114 +++++++++------------ Frontend/assets/scripts/tools/json.js | 72 +++++++++++++ Frontend/assets/scripts/tools/scripts.js | 43 +------- Frontend/tools/jsonFormatter.html | 1 + 4 files changed, 122 insertions(+), 108 deletions(-) create mode 100644 Frontend/assets/scripts/tools/json.js diff --git a/Frontend/assets/scripts/tools/highlight.js b/Frontend/assets/scripts/tools/highlight.js index 1f5f09c..2b33266 100644 --- a/Frontend/assets/scripts/tools/highlight.js +++ b/Frontend/assets/scripts/tools/highlight.js @@ -1,72 +1,54 @@ -function formatAndValidateJson(errorElement) { - const input = document.querySelector('#jsonBlock'); - const processInfo = document.getElementById(errorElement); +/** + * This file contains scripts needed for syntax highlight to work. + */ - const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting" +function highlightSyntax(elementId) { + const element = document.getElementById(elementId); + element.innerHTML = hljs.highlightAuto(element.innerText).value +} - fetch(address, { - method: 'POST', - body: input.textContent - }) - .then(async (response) => { - const promise = response.json(); - if (!response.ok) { - throw Error(await promise); - } +/** + * Converts pasted data to plain text + * + * @function + * @name configurePastingInElement + * @kind function + * @param {any} elementId + * @returns {void} + */ +function configurePastingInElement(elementId) { + const editorEle = document.getElementById(elementId); - return promise; - }) - .then((data) => { - input.innerText = data.data; - processInfo.innerText = ""; - hljs.highlightElement(input); + // Handle the `paste` event + editorEle.addEventListener('paste', function (e) { + // Prevent the default action + e.preventDefault(); - processInfo.innerHTML = "Computed in " + data.time + "ms"; - }) - .catch((error) => { - processInfo.innerHTML = "" + error.data + ""; - console.error('Error:', error); + // 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); + } + highlightSyntax(editorEle.id); + }); -} - -function minimizeJson(errorElement) { - const input = document.querySelector('#jsonBlock'); - const processInfo = document.getElementById(errorElement); - - const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/minimize" - - fetch(address, { - method: 'POST', - body: input.textContent - }) - .then(async (response) => { - const promise = response.json(); - if (!response.ok) { - throw Error(await promise); - } - - return promise; - }) - .then((data) => { - input.innerText = data.data; - processInfo.innerText = ""; - hljs.highlightElement(input); - - processInfo.innerHTML = "Computed in " + data.time + "ms"; - }) - .catch((error) => { - processInfo.innerHTML = "" + error.data + ""; - console.error('Error:', error); - }); -} - -function clearJsonData() { - const input = document.querySelector('#jsonBlock'); - input.textContent = ""; -} - -function insertDefaultJson() { - const input = document.querySelector('#jsonBlock'); - input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}"; - hljs.highlightElement(input); } \ No newline at end of file diff --git a/Frontend/assets/scripts/tools/json.js b/Frontend/assets/scripts/tools/json.js new file mode 100644 index 0000000..1f5f09c --- /dev/null +++ b/Frontend/assets/scripts/tools/json.js @@ -0,0 +1,72 @@ +function formatAndValidateJson(errorElement) { + const input = document.querySelector('#jsonBlock'); + const processInfo = document.getElementById(errorElement); + + const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting" + + fetch(address, { + method: 'POST', + body: input.textContent + }) + .then(async (response) => { + const promise = response.json(); + if (!response.ok) { + throw Error(await promise); + } + + return promise; + }) + .then((data) => { + input.innerText = data.data; + processInfo.innerText = ""; + hljs.highlightElement(input); + + processInfo.innerHTML = "Computed in " + data.time + "ms"; + }) + .catch((error) => { + processInfo.innerHTML = "" + error.data + ""; + console.error('Error:', error); + }); +} + +function minimizeJson(errorElement) { + const input = document.querySelector('#jsonBlock'); + const processInfo = document.getElementById(errorElement); + + const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/minimize" + + fetch(address, { + method: 'POST', + body: input.textContent + }) + .then(async (response) => { + const promise = response.json(); + if (!response.ok) { + throw Error(await promise); + } + + return promise; + }) + .then((data) => { + input.innerText = data.data; + processInfo.innerText = ""; + hljs.highlightElement(input); + + processInfo.innerHTML = "Computed in " + data.time + "ms"; + }) + .catch((error) => { + processInfo.innerHTML = "" + error.data + ""; + console.error('Error:', error); + }); +} + +function clearJsonData() { + const input = document.querySelector('#jsonBlock'); + input.textContent = ""; +} + +function insertDefaultJson() { + const input = document.querySelector('#jsonBlock'); + input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}"; + hljs.highlightElement(input); +} \ No newline at end of file diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js index e173992..8c08cf4 100644 --- a/Frontend/assets/scripts/tools/scripts.js +++ b/Frontend/assets/scripts/tools/scripts.js @@ -85,10 +85,7 @@ function escapeHTML(elementID) { .replace(/'/g, "'"); } -function highlightSyntax(elementId) { - const element = document.getElementById(elementId); - element.innerHTML = hljs.highlightAuto(element.innerText).value -} + /** * It fills the XML area with a sample XML. @@ -410,42 +407,4 @@ async function restRequest(port, endpoint, xmlData, transformData) { }); return result; -} - - -function configurePastingInElement(elementId) { - const editorEle = document.getElementById(elementId); - - // 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); - } - highlightSyntax(editorEle.id); - - }); } \ No newline at end of file diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html index e316c13..300ff95 100644 --- a/Frontend/tools/jsonFormatter.html +++ b/Frontend/tools/jsonFormatter.html @@ -10,6 +10,7 @@ + From 8a3baa6648488f4cef0b11828ac0e21892fbbe3d Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Wed, 26 Apr 2023 13:42:09 +0200 Subject: [PATCH 15/15] Added docs --- Frontend/assets/scripts/tools/highlight.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Frontend/assets/scripts/tools/highlight.js b/Frontend/assets/scripts/tools/highlight.js index 2b33266..e1ceb51 100644 --- a/Frontend/assets/scripts/tools/highlight.js +++ b/Frontend/assets/scripts/tools/highlight.js @@ -2,6 +2,16 @@ * This file contains scripts needed for syntax highlight to work. */ + +/** + * This functions highlight element with provided ID. + * + * @function + * @name highlightSyntax + * @kind function + * @param {any} elementId + * @returns {void} + */ function highlightSyntax(elementId) { const element = document.getElementById(elementId); element.innerHTML = hljs.highlightAuto(element.innerText).value