diff --git a/Frontend/assets/css/frame.css b/Frontend/assets/css/frame.css index e1d622d..296720a 100644 --- a/Frontend/assets/css/frame.css +++ b/Frontend/assets/css/frame.css @@ -87,7 +87,7 @@ div#copyright a, a:visited, a:active { backdrop-filter: blur(10px); } -#toolListRow a { +.toolListRow a { display: block; color: white; text-align: center; @@ -95,7 +95,7 @@ div#copyright a, a:visited, a:active { text-decoration: none; } -#toolListRow a:hover { +.toolListRow a:hover { background-color: #2A93B0; color: white; transform: scale(1.25, 1.25); diff --git a/Frontend/assets/scripts/tools/xpath.js b/Frontend/assets/scripts/tools/xpath.js new file mode 100644 index 0000000..c2c2de7 --- /dev/null +++ b/Frontend/assets/scripts/tools/xpath.js @@ -0,0 +1,153 @@ +import "../common/jquery-3.6.0.slim.min.js"; + +function processVersionSelector() { + var processor = getProcessor(); + var hideableOptions = document.getElementsByClassName("hideable"); + for (let i = 0; i < hideableOptions.length; i++) { + hideableOptions[i].style = "display: none;"; + } + if (processor == "xalan" || processor == "libxml") { + var xalanOptions = document.getElementsByClassName("xalan"); + for (let i = 0; i < xalanOptions.length; i++) { + xalanOptions[i].style = ""; + } + document.getElementById("versions").selectedIndex = 0; + } + else { + var saxonOptions = document.getElementsByClassName("saxon"); + for (let i = 0; i < saxonOptions.length; i++) { + saxonOptions[i].style = ""; + } + document.getElementById("versions").selectedIndex = 3; + + } + processTooltip(); + +} + +function processTooltip() { + var filter = "collapse" + getVersion(); + var collList; + console.log("filter: ", filter); + + + if (filter == "collapse3.0") { + document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0 & 3.0 functions"; + showList(document.getElementsByName("collapse20")); + showList(document.getElementsByName("collapse30")); + hideList(document.getElementsByName("collapse31")); + console.log("collapsed 3.0"); + } else if (filter == "collapse3.1") { + document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0, 3.0 & 3.1 functions"; + showList(document.getElementsByName("collapse20")); + showList(document.getElementsByName("collapse30")); + showList(document.getElementsByName("collapse31")); + console.log("collapsed 3.1"); + } else if (filter == "collapse2.0"){ + document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0 & 2.0 functions"; + showList(document.getElementsByName("collapse20")); + hideList(document.getElementsByName("collapse30")); + hideList(document.getElementsByName("collapse31")); + } else { + document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0 functions"; + hideList(document.getElementsByName("collapse20")); + hideList(document.getElementsByName("collapse30")); + hideList(document.getElementsByName("collapse31")); + + } +} + +function getVersion() { + return document.getElementById("versions").value; +} + +function getProcessor() { + return document.getElementById("processors").value; +} + +function getProcInfo() { + var processVariables = document.getElementById("processors").value + "&version=" + getVersion(); + return processVariables; +} + +var triggerList = document.getElementsByClassName("collapseTrigger"); + for (i = 0; i < triggerList.length; i++) { + console.log("trigger connected"); + triggerList[i].addEventListener("click", function () { + var collapsible = this.parentElement; + if (this.tagName == "A") { + var collapsibleData = this.nextElementSibling; + } else { + var collapsibleData = this.parentElement.nextElementSibling; + + } + + console.log(collapsibleData); + if (collapsibleData.style.maxHeight > "0px") { + collapsibleData.style.maxHeight = "0px"; + + this.classList.toggle("active", false); + if (!this.classList.contains("collapsibleMini")) { + collapsible.classList.toggle("active", false); + } + + var subLists1 = collapsibleData.getElementsByClassName("content"); + var subLists2 = collapsibleData.getElementsByClassName("active"); + for (j = 0; j < subLists1.length; j++) { + subLists1[j].style.maxHeight = "0px"; + } + for (j = 0; j < subLists2.length; j++) { + subLists2[j].classList.toggle("active", false); + } + } else { + collapsibleData.style.maxHeight = (collapsibleData.scrollHeight) + "px"; + + this.classList.toggle("active", true); + if (!this.classList.contains("collapsibleMini")) { + collapsible.classList.toggle("active", true); + } else { + var parentContent = this.closest(".content"); + parentContent.style.maxHeight = (parentContent.scrollHeight + collapsibleData.scrollHeight) + "px"; + } + } + }); + } + +function init() { + //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'); + console.log("init"); + processVersionSelector(); + processTooltip(); + tool.addEventListener('change', event => { + //Check if script was called from textarea or selector + var targetID = event.target.getAttribute('id'); + if (targetID == "processors") { + processVersionSelector(); + processTooltip(); + } + else if (targetID == "versions") { + processTooltip(); + } + + + }) + tool.addEventListener('click', event => { + //Check if script was called from textarea or selector + var targetID = event.target.getAttribute('id'); + if (targetID !== "xmlArea" && targetID !== "transformArea") { + return; + } + processTooltip(); + + }) + tool.addEventListener('change', event => { + //Check if script was called from textarea or selector + var targetID = event.target.getAttribute('id'); + if (targetID !== "xmlArea" && targetID !== "transformArea") { + return; + } + processTooltip(); + }) +} \ No newline at end of file diff --git a/Frontend/index.html b/Frontend/index.html index 52c87ae..4dd6c42 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -29,14 +29,14 @@
- [1.0] fn:position()
@@ -3384,189 +3383,6 @@
- - - - - - - - - - - - - - - - - - - - -