Refactor xpath
separate javascript from HTML file. get rid of repeated ids
This commit is contained in:
		| @@ -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); | ||||
|   | ||||
							
								
								
									
										153
									
								
								Frontend/assets/scripts/tools/xpath.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										153
									
								
								Frontend/assets/scripts/tools/xpath.js
									
									
									
									
									
										Normal file
									
								
							| @@ -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(); | ||||
|             }) | ||||
| } | ||||
		Reference in New Issue
	
	Block a user