Link-Tabs gefixe und Funktionen hinzugefügt

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

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