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

Removed jQuery and switched to CSS transitions. 

Also more refactoring.
parent 7f65780d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
display/display.css
+ 9
− 2
View file @ 1dbf55ec
......@@ -329,7 +329,8 @@
.neighbor-content-tabs {
padding: 0 18px;
display: none;
display: inline-block;
width: 100%;
overflow: hidden;
background-color: #ffffff;
flex-direction: column;
......@@ -339,7 +340,7 @@
.neighbor-content-linksection {
padding-top: 0;
padding-left: 5px;
display: none;
display: flex;
background-color: #ffffff;
flex-direction: column;
overflow: hidden;
......@@ -381,3 +382,9 @@
top: 10px;
bottom: 10px;
}
.neighbor-collapsible-wrapper {
transition:height 0.3s ease-out;
height:0;
overflow:hidden;
}
display/overlays/neighbors.js
+ 75
− 61
View file @ 1dbf55ec
import * as Helpers from "../helpers";
import jQuery from "jquery";
import { createHTMLElement } from "../helpers";
export { NodeNeighborOverlay };
......@@ -14,9 +13,11 @@ class NodeNeighborOverlay {
this.parentNode = parentNode;
this.infoOverlay = infoOverlay;
this.type = type;
this.contentTab = null;
this.tabContentPages = {}; // Page content - links to other nodes
this.tabNavHandles = {}; // Top-level handles of the content pages
this.tabPageVisibility = {}; // Visibility of each content page
}
/**
......@@ -35,23 +36,18 @@ class NodeNeighborOverlay {
coll.style.textAlign = "center";
// Div that displays the information about all the chapters
const contentTabs = Helpers.createDiv(
const contentTab = Helpers.createDiv(
"neighbor-content-tabs",
bottomContainerDiv
);
this.contentTab = contentTabs;
contentTabs.style.display = "flex";
coll.addEventListener("click", function () {
if (contentTabs.style.display === "flex") {
jQuery(contentTabs).slideUp("fast");
//contentTab.classList.add("neighbor-collapsible-wrapper");
this.contentTab = contentTab;
coll.addEventListener("click", () => {
if (contentTab.style.height === "0px") {
contentTab.style.height = "auto";
} else {
jQuery(contentTabs).slideDown({
start: function () {
jQuery(this).css({
display: "flex",
});
},
});
contentTab.style.height = "0px";
}
});
......@@ -60,12 +56,12 @@ class NodeNeighborOverlay {
? this.graph.edgeColors
: this.graph.nodeColors;
for (const [cls, color] of Object.entries(colors)) {
this.createCollapsibleTab(contentTabs, cls, color);
this.createCollapsibleTab(contentTab, cls, color);
}
}
/**
* Creates a new collapsible tab for a node with type name and a given color.
* Creates a new collapsible tab and content area for a specific node.
* @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
......@@ -77,6 +73,7 @@ class NodeNeighborOverlay {
collTab.innerText = name;
collTab.type = name;
this.tabNavHandles[name] = collTab;
this.tabPageVisibility[name] = false;
const collTabMarker = Helpers.createDiv(
"neighbor-collapsible-marker-div",
......@@ -97,44 +94,67 @@ class NodeNeighborOverlay {
"neighbor-content-linksection",
parent
);
collTabContent.classList.add("neighbor-collapsible-wrapper");
collTabContent.type = name;
const list = createHTMLElement("ul", collTabContent);
list.style.margin = 0;
collTabContent.list = list;
this.tabContentPages[name] = collTabContent;
collTabContent.list = list;
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.tabContentPages[name] = collTabContent;
collTab.addEventListener("click", () => {
this.toggleSectionVisibility(name);
});
}
/**
* Toggles the visibility of a specific section
* @param {string} name Id of the section
*/
toggleSectionVisibility(name) {
if (this.tabPageVisibility[name]) {
this.collapseSection(name);
} else {
this.expandSection(name);
}
}
/**
* Collapses the content area of a specific section
* @param {string} name Id of the section
*/
collapseSection(name) {
this.tabPageVisibility[name] = false;
const section = this.tabContentPages[name];
section.style.height = "0px";
section.marker.innerText = "+";
}
/**
* Expands the content area of a specific section
* @param {string} name Id of the section
*/
expandSection(name) {
this.tabPageVisibility[name] = true;
const section = this.tabContentPages[name];
section.style.height = `${section.scrollHeight}px`;
section.marker.innerText = "-";
}
/**
* Clears the images from all tab content pages and makes the object
* invisible.
*/
clearTabContentPages() {
for (const page of Object.values(this.tabContentPages)) {
jQuery(page.list).empty();
/*if(page.style.display === "flex") {
page.style.display = "none";
}*/
page.list.replaceChildren();
}
}
/**
* Creates a new image (with link) for the given target node.
* Creates a new list element for the given target node.
* @param target
* @returns {HTMLDivElement}
*/
......@@ -143,7 +163,7 @@ class NodeNeighborOverlay {
var linkText = document.createTextNode(target.name);
linkDiv.className = "neighbor-content-link";
linkDiv.appendChild(linkText);
jQuery(linkDiv).on("click", () => {
linkDiv.addEventListener("click", () => {
this.graph.focusOnNode(target);
this.infoOverlay.updateInfoOverlay(target);
});
......@@ -157,7 +177,7 @@ class NodeNeighborOverlay {
updateTabs(node) {
this.clearTabContentPages();
for (const link of node.links) {
const target = link.source == node ? link.target : link.source;
const target = link.source === node ? link.target : link.source;
const reference = this.createReference(target);
if (this.type === "link") {
this.tabContentPages[link.type].list.appendChild(reference);
......@@ -165,48 +185,42 @@ class NodeNeighborOverlay {
this.tabContentPages[target.type].list.appendChild(reference);
}
}
this.hideContentPages();
this.updatePageVisibility();
}
/**
* Hides all the categories of a node that are not represented by a link
* to another neighbor.
* Updates the content page visibility on node change.
* Hides all empty content pages.
*/
hideContentPages() {
updatePageVisibility() {
for (const page of Object.values(this.tabContentPages)) {
if (!page.list.hasChildNodes()) {
this.tabNavHandles[page.type].style.display = "none";
page.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 = "-";
} else {
this.tabNavHandles[page.type].marker.innerText = "+";
page.style.display = "flex";
if (this.tabPageVisibility[page.type]) {
page.style.height = `${page.list.scrollHeight}px`;
}
}
}
}
/**
* Toggle the visibility for a node type
* @param {string} type The name of the type that should be toggled
* Toggle the visibility for a category
* @param {string} type The name of the category that should be toggled
*/
toggleCategory(type) {
const page = this.tabContentPages[type];
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 = "+";
} 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 = "-";
} else {
this.tabNavHandles[page.type].marker.innerText = "+";
}
}
const handle = this.tabNavHandles[type];
if (handle.style.display === "flex") {
page.style.display = "none";
handle.style.display = "none";
} else if (page.list.hasChildNodes()) {
page.style.display = "flex";
handle.style.display = "flex";
}
}
}
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