Refactor javascript

move repeating javascript code to scripts.js file

Frontend/assets/scripts/tools/scripts.js

@@ -20,6 +20,34 @@ function clearDefaultContent(element, text) {
     }
 }
 
+/**
+ * It returns the value of the element with id "processors".
+ * 
+ * @function
+ * @name getProcessor
+ * @kind function
+ * @returns {any}
+ */
+function getProcessor() {
+    return document.getElementById("processors").value;
+}
+
+/**
+ * It returns version of XSLT.
+ * 
+ * @function
+ * @name getVersion
+ * @kind function
+ * @returns {"1.0" | "3.0"}
+ */
+function getVersion() {
+    if (getProcessor() == "xalan") {
+        return "1.0";
+    } else {
+        return "3.0";
+    }
+}
+
 /**
  * It clears all data fields.
  * 

Frontend/assets/scripts/tools/xpath.js

@@ -1,153 +0,0 @@
-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/assets/scripts/tools/xsd.js

@@ -1,18 +0,0 @@
-function init() {
-    //Handle clicks in whole form and set info in tooltip
-    setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
-    setDefaultContent(document.getElementById("transformArea"), 'Insert XSD here');
-    console.log("init");
-    // refreshTooltip();
-    processTooltip();
-    tool.addEventListener('click', event => {
-        //Check if script was called from textarea or selector
-        var targetID = event.target.getAttribute('id');
-        if (targetID !== "processors" && targetID !== "xmlArea" && targetID !== "transformArea" && targetID !== "versions") {
-            return;
-        }
-
-        processTooltip();
-        // console.log("clock");
-    })
-}

Frontend/tools/xpath.html

@@ -6,7 +6,6 @@
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <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>
@@ -3383,6 +3382,148 @@
 
     </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"));
+
+            }
+        }
+
+        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();
+            })
+        }
+
+    </script>
+
 </body>
 
 </html>

Frontend/tools/xsd.html

@@ -5,7 +5,6 @@
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <script src="../assets/scripts/tools/scripts.js"></script>
-    <script src="../assets/scripts/tools/xsd.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
@@ -19,11 +18,11 @@
                 </div>
                 <div class="display-space-between">
                     <div style="text-align: center;">
-                <label for="processors">Select XSLT processor:</label>
+                        <label for="processors">Select XSLT processor:</label>
-                <select name="processors" id="processors">
+                        <select name="processors" id="processors">
-                    <option value="xalan">Xalan</option>
+                            <option value="xalan">Xalan</option>
-                    <option value="libxml">libXML</option>
+                            <option value="libxml">libXML</option>
-                </select>
+                        </select>
                     </div>
                     <div>
                         <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
@@ -63,20 +62,57 @@
         <div class="tooltip-window rwd-hideable">
             <h2>What is XSD?</h2>
             <p><b>XSD is a W3C recomedation that specifies how to describe the elements in XML document</b></p>
-                <p>XSD specifies data types, order and arity of elements in XML file.<br>
+            <p>XSD specifies data types, order and arity of elements in XML file.<br>
-                    Main components of XSD file are:<br>
+                Main components of XSD file are:<br>
-                    - Element declaration - declares properties of elements (names and namespaces)<br>
+                - Element declaration - declares properties of elements (names and namespaces)<br>
-                    - Attribute declarations - declares properties of attributes<br>
+                - Attribute declarations - declares properties of attributes<br>
-                    - Simple and complex types:<br>
+                - Simple and complex types:<br>
-                    - - XSD provides 19 simple data types<br>
+                - - XSD provides 19 simple data types<br>
-                    - - More complex types are declared using simple types and relationships<br>
+                - - More complex types are declared using simple types and relationships<br>
-                </p>
+            </p>
         </div>
 
 
 
     </div>
 
+    <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 XSD here');
+            console.log("init");
+            // refreshTooltip();
+            processTooltip();
+            tool.addEventListener('click', event => {
+                //Check if script was called from textarea or selector
+                var targetID = event.target.getAttribute('id');
+                if (targetID !== "processors" && targetID !== "xmlArea" && targetID !== "transformArea" && targetID !== "versions") {
+                    return;
+                }
+
+                processTooltip();
+                // console.log("clock");
+            })
+        }
+
+        function processTooltip() {
+            console.log("processTooltip");
+
+
+            if (getProcessor() == "xalan") {
+                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
+                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
+                hideList(document.getElementsByName("collapse30"));
+            } else {
+                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0, 2.0 & 3.0 functions";
+                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT up to 3.0";
+                showList(document.getElementsByName("collapse30"));
+            }
+        }
+
+    </script>
+
 </body>
 
 </html>

Frontend/tools/xslt.html

@@ -18,12 +18,12 @@
                 </div>
                 <div class="display-space-between">
                     <div style="text-align: center;">
-                <label for="processors">Select XSLT processor:</label>
+                        <label for="processors">Select XSLT processor:</label>
-                <select name="processors" id="processors">
+                        <select name="processors" id="processors">
-                    <option value="saxon">Saxon</option>
+                            <option value="saxon">Saxon</option>
-                    <option value="xalan">Xalan</option>
+                            <option value="xalan">Xalan</option>
-                    <option value="libxml">libXML</option>
+                            <option value="libxml">libXML</option>
-                </select>
+                        </select>
                     </div>
                     <div>
                         <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
@@ -57,7 +57,8 @@
 
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
                 <textarea disabled id="resultArea" name="resultArea" rows="10"
-                    class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;" ></textarea>
+                    class="textarea-300 bordered-field vertically-resizeable max-width"
+                    style="margin-bottom: 50px;"></textarea>
 
             </div>
         </div>
@@ -1135,17 +1136,10 @@
 
     </div>
 
-    <!-- <script>
-        function getVersion() {
-            return document.getElementById("versions").value;
-        }
-    </script> -->
     <script>
         function processTooltip() {
             console.log("processTooltip");
-
+            if (getProcessor() == "xalan" || getProcessor() == "libxml") {
-
-            if (getProcInfo() == "xalan" || getProcInfo() == "libxml") {
                 document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
                 document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
                 hideList(document.getElementsByName("collapse30"));
@@ -1155,29 +1149,7 @@
                 showList(document.getElementsByName("collapse30"));
             }
         }
-    </script>
-    <script>
-        function getProcessor() {
-            return document.getElementById("processors").value;
-        }
-    </script>
-    <script>
-        function getVersion() {
-            if (getProcInfo() == "xalan") {
-                return "1.0";
-            } else {
-                return "3.0";
-            }
-        }
-    </script>
-    <script>
-        function getProcInfo() {
-            var processVariables = document.getElementById("processors").value;// + "&version=" + document.getElementById("versions").value;
-            return processVariables;
-        }
-    </script>
 
-    <script>
         var triggerList = document.getElementsByClassName("collapseTrigger");
         for (i = 0; i < triggerList.length; i++) {
             console.log("trigger connected");
@@ -1214,9 +1186,7 @@
                 }
             });
         }
-    </script>
 
-    <script>
         function init() {
             //Handle clicks in whole form and set info in tooltip
             setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');