From e2a1cfa255b7b2d63835b95bfd100f73fcf8f908 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 1 Oct 2021 17:41:56 +0200
Subject: [PATCH] The info area is now able to display additional links.
---
display/overlays/nodeinfo.js | 28 +++++++++++++++++++++++++++-
kg-style.css | 10 +++++++++-
2 files changed, 36 insertions(+), 2 deletions(-)
diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js
index b1cf072..ddaec2e 100644
--- a/display/overlays/nodeinfo.js
+++ b/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");
}
diff --git a/kg-style.css b/kg-style.css
index af637bf..adb2a67 100644
--- a/kg-style.css
+++ b/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;
}
--
GitLab