The info area is now able to display additional links.

display/overlays/nodeinfo.js

@@ -80,7 +80,7 @@ class NodeInfoOverlay {
             innerText: "Default Text",
         });
 
-        const videoDiv = Helpers.createDiv("detail-view-video-div", infoArea);
+        const videoDiv = Helpers.createDiv("detail-view-video-area", infoArea);
 
         const video = document.createElement("video");
         video.id = "infoOverlayVideo";
@@ -88,6 +88,14 @@ class NodeInfoOverlay {
         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);
     }
 
@@ -129,6 +137,24 @@ class NodeInfoOverlay {
             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");
     }

kg-style.css

@@ -106,6 +106,13 @@
     /*padding-bottom: 130px;*/
 }
 
+.detail-view-link-area {
+    display: block;
+    margin-top: 25px;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
 .detail-view-headline {
     font-weight: bold;
     /*text-align: center;*/
@@ -117,8 +124,9 @@
     padding-right: 5px;
 }
 
-.detail-view-video-div {
+.detail-view-video-area {
     width: 100%;
+    margin-top: 15px;
     padding: 10px;
 }