Refactor xpath

separate javascript from HTML file.
get rid of repeated ids

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);

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();
+            })
+}

Frontend/index.html

@@ -29,14 +29,14 @@
     <div id="content">
         <div id="leftBar">
             <ul id="toolList">
-                <li id="toolListRow" class="dynamic restTool" style="display: none;">
+                <li class="dynamic restTool toolListRow" style="display: none;">
                     <a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a>
                 </li>
-                <li class="toolListRow,xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
-                <li class="toolListRow,xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
-                <li class="toolListRow,xmlTool"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
-                <li class="toolListRow,xmlTool"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
-                <li class="toolListRow,jsonTool" style="display: none;"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
+                <li class="toolListRow xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
+                <li class="toolListRow xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
+                <li class="toolListRow xmlTool"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
+                <li class="toolListRow xmlTool"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
+                <li class="toolListRow jsonTool" style="display: none;"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
             </ul>
             <div id="copyright">
                 Build: [:VERSION:]<br>

Frontend/tools/xpath.html

@@ -4,9 +4,9 @@
 <head>
     <!-- <link rel="stylesheet" href="../common.css"> -->
     <!-- <link rel="stylesheet" href="styles.css"> -->
-    <script src="../assets/scripts/tools/jquery-3.6.0.slim.min.js"></script>
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
-    <script src="../assets/scripts/tools/scripts.js"></script>
+    <script src="../assets/scripts/tools/scripts.js"> </script>
+    <script src="../assets/scripts/tools/xpath.js"> </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
@@ -131,7 +131,6 @@
                         </div>
 
 
-
                         [1.0] <a href="#" onClick="return false;"
                             class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:position()</code></a>
                         <div class="content">
@@ -3384,189 +3383,6 @@
 
     </div>
 
-
-
-
-
-    <script>
-        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"));
-
-            }
-
-
-
-            // if (checkDefault(document.getElementById("xmlArea").value.trim()) || document.getElementById("xmlArea").value.trim() == "") {
-            //     document.getElementById("defaultXMLButton").classList.toggle("active", true);
-            // } else {
-            //     document.getElementById("defaultXMLButton").classList.toggle("active", false);
-            // }
-        }
-    </script>
-
-    <script>
-        function getVersion() {
-            return document.getElementById("versions").value;
-        }
-    </script>
-
-    <script>
-        function getProcessor() {
-            return document.getElementById("processors").value;
-        }
-    </script>
-
-
-    <script>
-        function getProcInfo() {
-            var processVariables = document.getElementById("processors").value + "&version=" + getVersion();
-            return processVariables;
-        }
-    </script>
-
-
-    <script>
-        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";
-                    }
-                }
-            });
-        }
-    </script>
-
-    <script>
-
-    </script>
-
-    <script>
-        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();
-            })
-        }
-    </script>
-
-
 </body>
 
 </html>