From 7f65780d2db8edfaf4358ed86c258701b14b1f73 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 28 Feb 2022 13:48:33 +0100
Subject: [PATCH] Slight refactoring
---
display/overlays/neighbors.js | 165 +++++++++++++++++-----------------
1 file changed, 81 insertions(+), 84 deletions(-)
diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js
index 2ec1420..0ed2cdd 100644
--- a/display/overlays/neighbors.js
+++ b/display/overlays/neighbors.js
@@ -15,11 +15,8 @@ class NodeNeighborOverlay {
this.infoOverlay = infoOverlay;
this.type = type;
- this.activeTabNav = null; // The currently selected tab handle
- this.activeTabContent = null; // The currently selected tab content
-
- this.tabContentPages = {};
- this.tabNavHandles = {};
+ this.tabContentPages = {}; // Page content - links to other nodes
+ this.tabNavHandles = {}; // Top-level handles of the content pages
}
/**
@@ -32,31 +29,28 @@ class NodeNeighborOverlay {
this.parentNode
);
// Create the collapsible of the entire menu
- const coll = Helpers.createDiv(
- "button",
- bottomContainerDiv
- );
+ const coll = Helpers.createDiv("button", bottomContainerDiv);
coll.className = "neighbor-collapsible-title";
coll.innerText = "Verwandte Inhalte";
coll.style.textAlign = "center";
// Div that displays the information about all the chapters
- var contentTabs = Helpers.createDiv(
+ const contentTabs = Helpers.createDiv(
"neighbor-content-tabs",
bottomContainerDiv
);
this.contentTab = contentTabs;
contentTabs.style.display = "flex";
- coll.addEventListener("click", function() {
- if(contentTabs.style.display === "flex") {
+ coll.addEventListener("click", function () {
+ if (contentTabs.style.display === "flex") {
jQuery(contentTabs).slideUp("fast");
} else {
jQuery(contentTabs).slideDown({
start: function () {
jQuery(this).css({
- display: "flex"
- })
- }
+ display: "flex",
+ });
+ },
});
}
});
@@ -66,65 +60,66 @@ class NodeNeighborOverlay {
? this.graph.edgeColors
: this.graph.nodeColors;
for (const [cls, color] of Object.entries(colors)) {
-
- // Creating the collapsible tabs for the different chapters
- const collTab = Helpers.createDiv(
- "button",
- contentTabs
- );
- collTab.className = "neighbor-collapsible-section";
- collTab.innerText = cls;
- collTab.type = cls;
- this.tabNavHandles[cls] = collTab;
-
- const collTabMarker = Helpers.createDiv(
- "neighbor-collapsible-marker-div",
- collTab
- );
- collTabMarker.style.borderColor = color;
- collTabMarker.style.backgroundColor = color;
-
- const openMarkerTabs = Helpers.createDiv(
- "neighbor-tab-open-status-marker",
- collTab
- );
- openMarkerTabs.innerText = '+';
- collTab.marker = openMarkerTabs;
-
- // Content of the different tabs
- const collTabContent = Helpers.createDiv(
- "neighbor-content-linksection",
- contentTabs
- );
- collTabContent.type = cls;
-
- const list = createHTMLElement(
- "ul",
- collTabContent
- );
- list.style.margin = 0;
- collTabContent.list = list;
-
- this.tabContentPages[cls] = collTabContent;
- collTabContent.marker = openMarkerTabs;
- collTab.addEventListener("click", function() {
- if(collTabContent.style.display === "flex") {
- jQuery(collTabContent).slideUp("fast");
- openMarkerTabs.innerText = '+';
- } else {
- jQuery(collTabContent).slideDown({
- start: function () {
- jQuery(this).css({
- display: "flex"
- })
- }
- });
- openMarkerTabs.innerText = '-';
- }
- });
+ this.createCollapsibleTab(contentTabs, cls, color);
}
}
+ /**
+ * Creates a new collapsible tab for a node with type name and a given color.
+ * @param {HTMLElement} parent Parent of the new tab.
+ * @param {string} name Name of the node type class
+ * @param {string} color Color of the node type class
+ */
+ createCollapsibleTab(parent, name, color) {
+ // Creating the collapsible tabs for the different chapters
+ const collTab = Helpers.createDiv("button", parent);
+ collTab.className = "neighbor-collapsible-section";
+ collTab.innerText = name;
+ collTab.type = name;
+ this.tabNavHandles[name] = collTab;
+
+ const collTabMarker = Helpers.createDiv(
+ "neighbor-collapsible-marker-div",
+ collTab
+ );
+ collTabMarker.style.borderColor = color;
+ collTabMarker.style.backgroundColor = color;
+
+ const openMarkerTabs = Helpers.createDiv(
+ "neighbor-tab-open-status-marker",
+ collTab
+ );
+ openMarkerTabs.innerText = "+";
+ collTab.marker = openMarkerTabs;
+
+ // Content of the different tabs
+ const collTabContent = Helpers.createDiv(
+ "neighbor-content-linksection",
+ parent
+ );
+ collTabContent.type = name;
+
+ const list = createHTMLElement("ul", collTabContent);
+ list.style.margin = 0;
+ collTabContent.list = list;
+
+ this.tabContentPages[name] = collTabContent;
+ collTabContent.marker = openMarkerTabs;
+ collTab.addEventListener("click", function () {
+ if (collTabContent.style.display === "flex") {
+ jQuery(collTabContent).slideUp("fast");
+ openMarkerTabs.innerText = "+";
+ } else {
+ jQuery(collTabContent).slideDown({
+ start: function () {
+ jQuery(this).css({ display: "flex" });
+ },
+ });
+ openMarkerTabs.innerText = "-";
+ }
+ });
+ }
+
/**
* Clears the images from all tab content pages and makes the object
* invisible.
@@ -177,39 +172,41 @@ class NodeNeighborOverlay {
* Hides all the categories of a node that are not represented by a link
* to another neighbor.
*/
- hideContentPages () {
+ hideContentPages() {
for (const page of Object.values(this.tabContentPages)) {
- if(!page.list.hasChildNodes()) {
+ if (!page.list.hasChildNodes()) {
this.tabNavHandles[page.type].style.display = "none";
} else {
this.tabNavHandles[page.type].style.display = "flex";
- if (this.tabContentPages[page.type].style.display == "flex") {
- this.tabNavHandles[page.type].marker.innerText = '-';
+ if (this.tabContentPages[page.type].style.display === "flex") {
+ this.tabNavHandles[page.type].marker.innerText = "-";
} else {
- this.tabNavHandles[page.type].marker.innerText = '+';
+ this.tabNavHandles[page.type].marker.innerText = "+";
}
}
}
}
- toggleCategory (type) {
+ /**
+ * Toggle the visibility for a node type
+ * @param {string} type The name of the type that should be toggled
+ */
+ toggleCategory(type) {
const page = this.tabContentPages[type];
- if (this.tabNavHandles[page.type].style.display == "flex") {
+ if (this.tabNavHandles[page.type].style.display === "flex") {
this.tabNavHandles[page.type].style.display = "none";
const collTabContent = this.tabContentPages[page.type];
jQuery(collTabContent).slideUp("fast");
- collTabContent.marker.innerText = '+';
+ collTabContent.marker.innerText = "+";
} else {
if (page.list.hasChildNodes()) {
this.tabNavHandles[page.type].style.display = "flex";
- if (this.tabContentPages[page.type].style.display == "flex") {
- this.tabNavHandles[page.type].marker.innerText = '-';
+ if (this.tabContentPages[page.type].style.display === "flex") {
+ this.tabNavHandles[page.type].marker.innerText = "-";
} else {
- this.tabNavHandles[page.type].marker.innerText = '+';
+ this.tabNavHandles[page.type].marker.innerText = "+";
}
}
}
}
}
-
-
--
GitLab