Skip to content
Snippets Groups Projects
Commit 7f65780d authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Slight refactoring

parent 109f6ce5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
display/overlays/neighbors.js
+ 81
− 84
View file @ 7f65780d
......@@ -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 = "+";
}
}
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment