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

Removed old js-menus

parent 6dbbb9b8
No related branches found
No related tags found
1 merge request!3Master into new editor
Pipeline #56797 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/display/components/neighbors.js deleted 100644 → 0
+ 0
− 227
View file @ 6dbbb9b8
import * as Helpers from "../helpers";
import { createHTMLElement } from "../helpers";
export { NodeNeighborOverlay };
/**
* Displays an overlay showing the neighbors of a node divided by the link type
* that connects them.
*/
class NodeNeighborOverlay {
constructor(graph, parentNode, infoOverlay, type = "link") {
this.graph = graph;
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
}
/**
* Creates the visible elements of the overlay.
* Must be called after the graph has been initialized.
*/
create() {
const bottomContainerDiv = Helpers.createDiv(
"neighbor-container",
this.parentNode
);
bottomContainerDiv.classList.add("fancy-scrollbar");
// Create the collapsible of the entire menu
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
const contentTab = Helpers.createDiv(
"neighbor-content-tabs",
bottomContainerDiv
);
//contentTab.classList.add("neighbor-collapsible-wrapper");
this.contentTab = contentTab;
coll.addEventListener("click", () => {
if (contentTab.style.height === "0px") {
contentTab.style.height = "auto";
} else {
contentTab.style.height = "0px";
}
});
const colors =
this.type === "link"
? this.graph.edgeColors
: this.graph.nodeColors;
for (const [cls, color] of Object.entries(colors)) {
this.createCollapsibleTab(contentTab, cls, 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
*/
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;
this.tabPageVisibility[name] = false;
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.classList.add("neighbor-collapsible-wrapper");
collTabContent.type = name;
const list = createHTMLElement("ul", collTabContent);
list.classList.add("neighbor-content-list");
collTabContent.list = list;
collTabContent.marker = openMarkerTabs;
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)) {
page.list.replaceChildren();
}
}
/**
* Creates a new list element for the given target node.
* @param target
* @returns {HTMLLIElement}
*/
createReference(target) {
const linkDiv = document.createElement("li");
const linkText = document.createTextNode(target.name);
linkDiv.className = "neighbor-content-link";
linkDiv.appendChild(linkText);
linkDiv.addEventListener("click", () => {
this.graph.focusOnNode(target);
this.infoOverlay.updateInfoOverlay(target);
});
return linkDiv;
}
/**
* Updates all tabs to have content matching the given node.
* @param node
*/
updateTabs(node) {
this.clearTabContentPages();
for (const link of node.links) {
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);
} else {
this.tabContentPages[target.type].list.appendChild(reference);
}
}
this.updatePageVisibility();
}
/**
* Updates the content page visibility on node change.
* Hides all empty content pages.
*/
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";
page.style.display = "flex";
if (this.tabPageVisibility[page.type]) {
page.style.height = `${page.list.scrollHeight}px`;
}
}
}
}
/**
* 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];
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";
}
}
}
src/display/components/nodeinfo.js deleted 100644 → 0
+ 0
− 177
View file @ 6dbbb9b8
import jQuery from "jquery";
import { NodeNeighborOverlay } from "./neighbors";
import * as Helpers from "../helpers";
import * as Config from "../../config";
export { NodeInfoOverlay };
/**
* An overlay displaying the information which is connected with each node.
*/
class NodeInfoOverlay {
/**
* Constructs a new info overlay for the given graph object.
* @param {Graph} graph
*/
constructor(graph) {
this.graph = graph;
this.bottomMenu = null;
}
/**
* Creates the visible elements of the overlay.
* Must be called after the graph has been initialized.
*/
create() {
const overlayDiv = this.createOverlayMainDiv();
this.createOverlayElements(overlayDiv);
this.bottomMenu = new NodeNeighborOverlay(
this.graph,
overlayDiv,
this,
"node"
);
this.bottomMenu.create();
jQuery("#infoOverlayCloseButton").click(function () {
jQuery("#infoOverlay").slideUp("fast");
});
jQuery("#infoOverlay").hide();
}
createOverlayMainDiv() {
const sceneNode = Helpers.getCanvasDivNode();
const overlayNode = document.createElement("div");
overlayNode.id = "infoOverlay";
overlayNode.className = "detail-view";
sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
return overlayNode;
}
createOverlayElements(overlayNode) {
Helpers.createDiv("close-button", overlayNode, {
id: "infoOverlayCloseButton",
innerHTML: "<p>&#10006;</p>",
});
const infoArea = Helpers.createDiv(
"detail-view-info-area",
overlayNode
);
infoArea.classList.add("fancy-scrollbar");
const topArea = Helpers.createDiv("detail-view-top-area", infoArea);
Helpers.createHTMLElement("img", topArea, {
id: "infoOverlayImage",
src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
className: "detail-view-image",
});
Helpers.createHTMLElement("h2", topArea, {
id: "infoOverlayHeadline",
innerText: "Default Text",
className: "detail-view-headline",
});
const infoImageArea = Helpers.createDiv(
"detail-view-media-area",
infoArea
);
Helpers.createHTMLElement("img", infoImageArea, {
id: "infoAreaInfoImage",
src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
});
const textArea = Helpers.createDiv("detail-view-text-area", infoArea);
Helpers.createHTMLElement("p", textArea, {
id: "infoOverlayDescription",
innerHTML: "Default Text",
});
const videoDiv = Helpers.createDiv("detail-view-media-area", infoArea);
const video = document.createElement("video");
video.id = "infoOverlayVideo";
video.controls = true;
video.className = "detail-view-video";
videoDiv.appendChild(video);
const linkArea = Helpers.createDiv("detail-view-link-area", infoArea, {
id: "infoAreaLinkArea",
});
Helpers.createHTMLElement("h6", linkArea, {
innerText: "Weiterführende Links",
});
Helpers.createHTMLElement("ul", linkArea, { id: "infoAreaLinkList" });
Helpers.createDiv("detail-view-spacer", infoArea);
}
/**
* Updates the overlay (and its children) to display information on the given node.
* @param node
*/
updateInfoOverlay(node) {
const headline = jQuery("#infoOverlayHeadline");
headline.text(node.name);
if ("image" in node) {
headline.css("margin-top", "0px");
//jQuery("#infoOverlayImage").removeClass("hidden-tab");
const overlayImage = jQuery("#infoOverlayImage");
overlayImage.show();
overlayImage.attr("src", node.image);
} else {
headline.css("margin-top", "25px");
jQuery("#infoOverlayImage").hide();
// jQuery("#infoOverlayImage").attr(
// "src",
// Config.PLUGIN_PATH + "datasets/images/default.jpg"
// );
}
const infoImage = jQuery("#infoAreaInfoImage");
if ("infoImage" in node) {
infoImage.show();
infoImage.attr("src", node.infoImage);
} else {
infoImage.hide();
}
if ("description" in node) {
jQuery("#infoOverlayDescription").html(node.description);
//jQuery("#infoOverlayDescription").text(node.description);
} else {
jQuery("#infoOverlayDescription").html("Default Text");
}
if ("video" in node) {
jQuery("#infoOverlayVideo").show();
jQuery("#infoOverlayVideo").attr("src", node.video);
} else {
jQuery("#infoOverlayVideo").hide();
}
const linkList = jQuery("#infoAreaLinkList");
const linkArea = jQuery("#infoAreaLinkArea");
if ("infoLinks" in node) {
linkArea.show();
linkList.empty();
for (const link of node["infoLinks"]) {
const listEntry = Helpers.createHTMLElement("li", linkList[0]);
Helpers.createHTMLElement("a", listEntry, {
rel: "noopener noreferrer",
target: "_blank",
href: link,
innerText: link,
});
}
} else {
linkArea.hide();
}
this.bottomMenu.updateTabs(node);
jQuery("#infoOverlay").slideDown("fast");
}
}
src/display/display.tsx
+ 2
− 4
View file @ e5d5f2c3
import { NodeInfoOverlay } from "./components/nodeinfo";
import React from "react"; import React from "react";
import screenfull from "screenfull"; import screenfull from "screenfull";
import PropTypes, { InferType } from "prop-types";
import { GraphNode, GraphRenderer } from "./renderer"; import { GraphNode, GraphRenderer } from "./renderer";
import * as Helpers from "./helpers"; import * as Helpers from "./helpers";
import Graph, { NodeData } from "./graph"; import Graph, { NodeData } from "./graph";
import { loadGraphJson } from "../datasets"; import { loadGraphJson } from "../datasets";
import PropTypes, { InferType } from "prop-types";
import NodeInfoBar from "./components/nodeinfo/nodeinfobar"; import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
class Display extends React.Component< class Display extends React.Component<
...@@ -16,7 +15,6 @@ class Display extends React.Component< ...@@ -16,7 +15,6 @@ class Display extends React.Component<
props: InferType<typeof Display.propTypes>; props: InferType<typeof Display.propTypes>;
state: InferType<typeof Display.stateTypes>; state: InferType<typeof Display.stateTypes>;
infoOverlay: NodeInfoOverlay;
fullscreenRef: React.RefObject<HTMLDivElement>; fullscreenRef: React.RefObject<HTMLDivElement>;
rendererRef: React.RefObject<GraphRenderer>; rendererRef: React.RefObject<GraphRenderer>;
......
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