From 5ab1d722c1d6ded0832c870e67e26f41e46b5100 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 1 Oct 2021 18:06:07 +0200
Subject: [PATCH] The info area now also supports additional images.
---
display/overlays/nodeinfo.js | 24 +++++++++++++++++++-----
kg-style.css | 3 ++-
2 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js
index ddaec2e..8e408de 100644
--- a/display/overlays/nodeinfo.js
+++ b/display/overlays/nodeinfo.js
@@ -74,13 +74,22 @@ class NodeInfoOverlay {
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",
innerText: "Default Text",
});
- const videoDiv = Helpers.createDiv("detail-view-video-area", infoArea);
+ const videoDiv = Helpers.createDiv("detail-view-media-area", infoArea);
const video = document.createElement("video");
video.id = "infoOverlayVideo";
@@ -111,10 +120,7 @@ class NodeInfoOverlay {
//jQuery("#infoOverlayImage").removeClass("hidden-tab");
const overlayImage = jQuery("#infoOverlayImage");
overlayImage.show();
- overlayImage.attr(
- "src",
- Config.PLUGIN_PATH + "datasets/images/" + node.image
- );
+ overlayImage.attr("src", node.image);
} else {
headline.css("margin-top", "25px");
jQuery("#infoOverlayImage").hide();
@@ -124,6 +130,14 @@ class NodeInfoOverlay {
// );
}
+ const infoImage = jQuery("#infoAreaInfoImage");
+ if ("infoImage" in node) {
+ infoImage.show();
+ infoImage.attr("src", node.infoImage);
+ } else {
+ infoImage.hide();
+ }
+
if ("description" in node) {
jQuery("#infoOverlayDescription").text(node.description);
} else {
diff --git a/kg-style.css b/kg-style.css
index adb2a67..ae35a53 100644
--- a/kg-style.css
+++ b/kg-style.css
@@ -101,6 +101,7 @@
.detail-view-text-area {
display: block;
+ margin-top: 10px;
padding-left: 25px;
padding-right: 25px;
/*padding-bottom: 130px;*/
@@ -124,7 +125,7 @@
padding-right: 5px;
}
-.detail-view-video-area {
+.detail-view-media-area {
width: 100%;
margin-top: 15px;
padding: 10px;
--
GitLab