Refined code

Frontend/assets/scripts/frame.js

@@ -44,7 +44,7 @@ function init() {
     tools.set("jsonform", "tools/jsonFormatter.html");
     tools.set("mock", getMockHost());
 
-    changeActiveTools('xmlTool', 'XML');
+    changeActiveTools('XML');
     loadLastPage();
 }
 
@@ -57,27 +57,29 @@ function init() {
  * @param {any} activeClass class of elements that have to be shown
  * @param {any} activeCategoryButton class of category button that has to be active
  */
-function changeActiveTools(activeClass, activeCategoryButton) {
+function changeActiveTools(activeCategoryButton) {
-    let tools = document.getElementById("toolList").children
+    let toolList = document.getElementById("toolList").children;
+    let categoryToClass = new Map(["XML",  "xmlTool"],
+                                  ["JSON", "jsonTool"],
+                                  ["REST", "restTool"]);
     
-    for (i = 0; i < tools.length; i++) {
+    let activeClass = categoryToClass.get(activeCategoryButton.toUpperCase());
-        if (tools[i].classList.contains(activeClass)) {
+    if(activeClass == null) return;
-            tools[i].style.display = "block";
+
-        }
+    for (i = 0; i < toolList.length; i++) {
-        else {
+        if (toolList[i].classList.contains(activeClass))
-            tools[i].style.display = "none";
+            toolList[i].style.display = "block";
-        }
+        else
+            toolList[i].style.display = "none";
     }
 
-    let categories = document.getElementById("menu").children
+    let categoryList = document.getElementById("menu").children;
 
-    for (i = 0; i < categories.length; i++) {
+    for (i = 0; i < categoryList.length; i++) {
-        if (categories[i].innerText == activeCategoryButton) {
+        if (categoryList[i].innerText == activeCategoryButton)
-            categories[i].classList.add("active")
+            categoryList[i].classList.add("active");
-        }
+        else
-        else {
+            categoryList[i].classList.remove("active");
-            categories[i].classList.remove("active")
-        }
     }
 }
 
@@ -106,12 +108,12 @@ function changeTool(tool) {
  */
 function loadLastPage() {
     const lastPage = localStorage.getItem("lastPage");
-    switch (lastPage) {
+    switch (lastPage) { // XML category is default.
         case "jsonform":
-            changeActiveTools('jsonTool', 'JSON');
+            changeActiveTools('JSON');
             break;
         case "mock":
-            changeActiveTools('restTool', 'REST');
+            changeActiveTools('REST');
             break;
                     
     }

Frontend/index.html

@@ -21,9 +21,9 @@
         <div id="leftElements">
             <div id="logo"><a href="http://release11.com/"><img src="assets/images/logo_czarne.svg" alt="Release11"></a></div>
             <div id="menu">
-                <a href="#" onclick="changeActiveTools('xmlTool', 'XML')" class="active">XML</a>
+                <a href="#" onclick="changeActiveTools('XML')" class="active">XML</a>
-                <a href="#" onclick="changeActiveTools('jsonTool', 'JSON')">JSON</a>
+                <a href="#" onclick="changeActiveTools('JSON')">JSON</a>
-                <a href="#" onclick="changeActiveTools('restTool', 'REST')">REST</a>
+                <a href="#" onclick="changeActiveTools('REST')">REST</a>
             </div>
         </div>