From 3ec2fbc5f645a99c25beec51c89de4a3d6ebf8f2 Mon Sep 17 00:00:00 2001
From: y0083088 <j.rode@tu-bs.de>
Date: Mon, 19 Jul 2021 16:07:14 +0200
Subject: [PATCH] =?UTF-8?q?Link-Tabs=20gefixe=20und=20Funktionen=20hinzuge?=
=?UTF-8?q?f=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
graph.js | 65 +++++++++++++++++++++++++++++++++++++++++-----------
kg-style.css | 34 +++++++++++++++++++++++----
2 files changed, 81 insertions(+), 18 deletions(-)
diff --git a/graph.js b/graph.js
index 5cea13c..529d809 100644
--- a/graph.js
+++ b/graph.js
@@ -161,7 +161,8 @@ function createInfoOverlay() {
const description = document.createElement('p');
description.id = 'infoOverlayDescription';
- description.innerText = 'Default Text';
+ description.innerText = 'Default Text'
+ description.setAttribute("overflow-y", "scroll");
textArea.appendChild(description);
const link_container = document.createElement('div');
@@ -169,10 +170,11 @@ function createInfoOverlay() {
const linkClasses = getLinkClasses();
link_container.id = 'link_container';
+ link_container.className = 'bottom container';
links.className = 'tab';
links.id = 'links';
- for(i=0; i < linkClasses.length; i++){
+ for(i = 0; i < linkClasses.length; i++){
const linkType = linkClasses[i];
const tablink = document.createElement('button');
@@ -187,14 +189,16 @@ function createInfoOverlay() {
link_container.appendChild(links);
- linkClasses.forEach(linkType => {
+ for(i = 0; i < linkClasses.length; i++){
+ const linkType = linkClasses[i];
const tabcontent = document.createElement('div');
tabcontent.className = 'tabcontent';
tabcontent.id = linkType + "_id_content";
+ tabcontent.style = "background-color: " + edgeColors[linkClasses[i]];
link_container.appendChild(tabcontent);
- })
+ }
overlayNode.appendChild(link_container);
@@ -314,34 +318,67 @@ function updateInfoOverlay(node) {
jQuery('#infoOverlayDescription').text('Default Text');
}
+ updateTabs(node);
+
+ jQuery('#infoOverlay').slideDown('fast');
+}
+
+function updateTabs(node){
//tabs of the links to other nodes:
//delete old nodes from tabcontent
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
- childs = tabcontent[i].children;
- for(j = 0; j < childs.length; j++) {
- tabcontent[i].removeChild(childs[j]);
+ while (tabcontent[i].firstChild){
+ tabcontent[i].removeChild(tabcontent[i].lastChild);
}
}
//add new nodes to tabcontent
for (i = 0; i < tabcontent.length; i++) { //for every type of link
node.links.forEach(link => { //and for every link
if(link.type + '_id_content' == tabcontent[i].id){ //is checked if the type is equal
- const linkButton = document.createElement('button'); //and if so a new element is created
+ const linkButton = document.createElement('div'); //and if so a new element is created
+ linkButton.className = "link img";
+ var node2;
if(link.source == node){
- linkButton.innerHTML = link.target.id;
+ node2 = link.target;
}
- if(link.target == node){
- linkButton.innerHTML = link.source.id;
+ else if(link.target == node){
+ node2 = link.source;
+ }
+ linkButton.id = "linkButton_" + node2.id;
+ const nodeID = node2.id;
+
+ const linkImage = document.createElement('img');
+ const linkTitle = document.createElement('div');
+
+ if ('image' in node2) {
+ linkImage.src = plugin_path + 'datasets/images/' + node2.image;
+ } else if(!('image' in node2) && ('id' in node2)) {
+ linkImage.src = plugin_path + 'datasets/images/default.jpg';
}
- //linkButton.setAttribute("onclick", "focusOnNode(" + linkButton.node + ")"); //TODO: make it so that the node is the parameter.
- tabcontent[i].appendChild(linkButton); //and added
+
+ linkTitle.className = "link title";
+ linkTitle.innerHTML = node2.name;
+
+ //linkButton.appendChild(linkTitle);
+ linkButton.appendChild(linkImage);
+
+ linkButton.addEventListener('click', function (){focusOnNodeId(nodeID)});
+ tabcontent[i].appendChild(linkButton);
}
});
}
- jQuery('#infoOverlay').slideDown('fast');
}
+function focusOnNodeId(id) {
+ const gData = Graph.graphData();
+
+ gData.nodes.forEach(node => {
+ if (node.id === id) {
+ handleNodeClick(node);
+ }
+ })
+}
function focusOnNode(node) {
// Aim at node from outside it
diff --git a/kg-style.css b/kg-style.css
index 7c92856..ac61174 100644
--- a/kg-style.css
+++ b/kg-style.css
@@ -59,6 +59,8 @@
display: block;
padding-left: 25px;
padding-right: 25px;
+ height: 40%;
+ overflow-y: scroll;
}
.detail-view-headline {
@@ -103,16 +105,15 @@
.tab {
overflow: hidden;
- border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
- background-color: inherit;
+ color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
- padding: 14px 16px;
+ padding: 10px 16px;
transition: 0.3s;
}
.tab button:hover {
@@ -124,6 +125,31 @@
.tabcontent {
display: none;
padding: 6px 12px;
- border: 1px solid #ccc;
border-top: none;
+ overflow-x: scroll;
+}
+.bottom container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding-left: 0px;
+}
+
+.link img {
+ position: relative;
+ text-align: center;
+ width: 70px;
+ height: 70px;
+ margin: 10px;
+ display: inline-block;
+ pointer-events: all;
+ cursor: pointer;
+ border-radius: 50%;
+}
+.link title {
+ font-size: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
\ No newline at end of file
--
GitLab