First structure for the new menu

display/display.css

@@ -274,3 +274,29 @@
     line-height: 35px;
     font-size: 0.7vw;
 }
+
+.collapsible {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    display: flex;
+    flex-direction: column;
+}
+
+.active, .collapsible:hover {
+    background-color: #ccc;
+}
+
+.content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    flex-direction: column;
+}
\ No newline at end of file

display/overlays/neighbors.js

@@ -31,100 +31,48 @@ class NodeNeighborOverlay {
             "bottom-container",
             this.parentNode
         );
-        const bottomContainerNavDiv = Helpers.createDiv(
-            "bottom-container-nav",
+        const coll = Helpers.createDiv(
+            "button",
             bottomContainerDiv
         );
-        const bottomContainerLinkDiv = Helpers.createDiv(
-            "bottom-container-links",
+        coll.className = "collapsible";
+        coll.innerText = "Nachbarn";
+        var contentTabs = Helpers.createDiv(
+            "content",
             bottomContainerDiv
         );
-
+        coll.addEventListener("click", function() {
+            if(contentTabs.style.display === "flex") {
+                contentTabs.style.display = "none";
+            } else {
+                contentTabs.style.display = "flex";
+            }
+        });
         const colors =
             this.type === "link"
                 ? this.graph.edgeColors
                 : this.graph.nodeColors;
         for (const [cls, color] of Object.entries(colors)) {
-            const navTab = Helpers.createDiv(
-                "bottom-container-nav-tab",
-                bottomContainerNavDiv
+            const collTab = Helpers.createDiv(
+                "button",
+                contentTabs
             );
-            navTab.innerText = cls.slice(0, 3);
-            navTab.style.backgroundColor = color;
-            navTab.type = cls; // Attach the edge type to the DOM object to retrieve it during click events
-            jQuery(navTab).click((event) => this.openTabFromEvent(event));
-            this.tabNavHandles[cls] = navTab;
-
-            const tabContent = Helpers.createDiv(
-                "bottom-container-tab-content",
-                bottomContainerLinkDiv
+            collTab.className = "collapsible";
+            collTab.innerText = cls;
+            collTab.style.backgroundColor = color;
+            collTab.type = cls;
+            const collTabContent = Helpers.createDiv(
+                "content",
+                contentTabs
             );
-            tabContent.style.backgroundColor = color;
-            this.tabContentPages[cls] = tabContent;
-        }
-        this.initializeActive(bottomContainerNavDiv, bottomContainerLinkDiv);
-    }
-
-    /**
-     * Initializes the activeTabNav and activeTabContent variables to a random edge type.
-     * @param {Element} bottomContainerNavDiv
-     * @param {Element} bottomContainerLinkDiv
-     */
-    initializeActive(bottomContainerNavDiv, bottomContainerLinkDiv) {
-        this.activeTabNav = bottomContainerNavDiv.firstChild;
-        this.activeTabContent = bottomContainerLinkDiv.firstChild;
-
-        this.activeTabContent.classList.add("active-tab-content");
-        this.activeTabNav.classList.add("active-tab-nav");
-        this.activeTabNav.innerText = this.activeTabNav.type;
-    }
-
-    /**
-     * Click event handler for the tab headers of the bottom menu.
-     * @param event
-     */
-    openTabFromEvent(event) {
-        const navTab = event.target;
-        const cls = navTab.type;
-        this.openTab(cls);
-    }
-
-    openTab(cls) {
-        this.activeTabNav.classList.remove("active-tab-nav");
-        this.activeTabNav.innerText = this.activeTabNav.innerText.slice(0, 3);
-        this.tabNavHandles[cls].classList.add("active-tab-nav");
-        this.tabNavHandles[cls].innerText = cls;
-
-        this.activeTabContent.classList.remove("active-tab-content");
-        this.tabContentPages[cls].classList.add("active-tab-content");
-
-        this.activeTabNav = this.tabNavHandles[cls];
-        this.activeTabContent = this.tabContentPages[cls];
-    }
-
-    toggleTabVisibility(cls) {
-        this.tabNavHandles[cls].classList.toggle("bottom-container-nav-tab");
-        this.tabNavHandles[cls].classList.toggle("hidden-tab");
-
-        const tcc = this.tabContentPages[cls].classList;
-        tcc.toggle("bottom-container-tab-content");
-        tcc.toggle("hidden-tab");
-
-        // If the tab gets hidden and is the active tab, search for an alternative nav tab to become the new active tab.
-        if (tcc.contains("hidden-tab")) {
-            if (tcc.contains("active-tab-nav")) {
-                for (const tab of Object.values(this.tabNavHandles)) {
-                    if (!tab.classList.contains("hidden-tab")) {
-                        this.openTab(tab.type);
-                        break;
-                    }
+            collTabContent.innerText = "Example Text";
+            collTab.addEventListener("click", function() {
+                if(collTabContent.style.display === "flex") {
+                    collTabContent.style.display = "none";
+                } else {
+                    collTabContent.style.display = "flex";
                 }
-            }
-        } else {
-            // If all tabs are hidden, the new tab should become the active tab.
-            if (this.activeTabNav.classList.contains("hidden-tab")) {
-                this.openTab(cls);
-            }
+            });
         }
     }
 
@@ -132,9 +80,10 @@ class NodeNeighborOverlay {
      * Clears the images from all tab content pages.
      */
     clearTabContentPages() {
-        for (const page of Object.values(this.tabContentPages)) {
+        //TODO: Clear all content of content containers
+        /*for (const page of Object.values(this.tabContentPages)) {
             jQuery(page).empty();
-        }
+        }*/
     }
 
     /**
@@ -172,7 +121,8 @@ class NodeNeighborOverlay {
      * @param node
      */
     updateTabs(node) {
-        this.clearTabContentPages();
+        //TODO: Write update function to update content container
+        /*this.clearTabContentPages();
 
         for (const link of node.links) {
             const target = link.source == node ? link.target : link.source;
@@ -182,6 +132,6 @@ class NodeNeighborOverlay {
             } else {
                 this.tabContentPages[target.type].appendChild(reference);
             }
-        }
+        }*/
     }
 }