nodeinfo.js

import jQuery from "jquery";

import { NodeNeighborOverlay } from "./neighbors";
import * as Helpers from "../helpers";
import * as Config from "../../config";

export { NodeInfoOverlay };

/**
 * An overlay displaying the information which is connected with each node.
 */
class NodeInfoOverlay {
    /**
     * Constructs a new info overlay for the given graph object.
     * @param {Graph} graph
     */
    constructor(graph) {
        this.graph = graph;
        this.bottomMenu = null;
    }

    /**
     * Creates the visible elements of the overlay.
     * Must be called after the graph has been initialized.
     */
    create() {
        const overlayDiv = this.createOverlayMainDiv();
        this.createOverlayElements(overlayDiv);
        this.bottomMenu = new NodeNeighborOverlay(
            this.graph,
            overlayDiv,
            this,
            "node"
        );
        this.bottomMenu.create();

        jQuery("#infoOverlayCloseButton").click(function () {
            jQuery("#infoOverlay").slideUp("fast");
        });
        jQuery("#infoOverlay").hide();
    }

    createOverlayMainDiv() {
        const sceneNode = Helpers.getCanvasDivNode();
        const overlayNode = document.createElement("div");
        overlayNode.id = "infoOverlay";
        overlayNode.className = "detail-view";
        sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
        return overlayNode;
    }

    createOverlayElements(overlayNode) {
        Helpers.createDiv("close-button", overlayNode, {
            id: "infoOverlayCloseButton",
            innerHTML: "<p>&#10006;</p>",
        });

        const infoArea = Helpers.createDiv(
            "detail-view-info-area",
            overlayNode
        );
        infoArea.classList.add("fancy-scrollbar");

        const topArea = Helpers.createDiv("detail-view-top-area", infoArea);

        Helpers.createHTMLElement("img", topArea, {
            id: "infoOverlayImage",
            src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
            className: "detail-view-image",
        });

        Helpers.createHTMLElement("h2", topArea, {
            id: "infoOverlayHeadline",
            innerText: "Default Text",
            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",
            innerHTML: "Default Text",
        });

        const videoDiv = Helpers.createDiv("detail-view-media-area", infoArea);

        const video = document.createElement("video");
        video.id = "infoOverlayVideo";
        video.controls = true;
        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);
    }

    /**
     * Updates the overlay (and its children) to display information on the given node.
     * @param node
     */
    updateInfoOverlay(node) {
        const headline = jQuery("#infoOverlayHeadline");
        headline.text(node.name);
        if ("image" in node) {
            headline.css("margin-top", "0px");
            //jQuery("#infoOverlayImage").removeClass("hidden-tab");
            const overlayImage = jQuery("#infoOverlayImage");
            overlayImage.show();
            overlayImage.attr("src", node.image);
        } else {
            headline.css("margin-top", "25px");
            jQuery("#infoOverlayImage").hide();
            // jQuery("#infoOverlayImage").attr(
            //     "src",
            //     Config.PLUGIN_PATH + "datasets/images/default.jpg"
            // );
        }

        const infoImage = jQuery("#infoAreaInfoImage");
        if ("infoImage" in node) {
            infoImage.show();
            infoImage.attr("src", node.infoImage);
        } else {
            infoImage.hide();
        }

        if ("description" in node) {
            jQuery("#infoOverlayDescription").html(node.description);
            //jQuery("#infoOverlayDescription").text(node.description);
        } else {
            jQuery("#infoOverlayDescription").html("Default Text");
        }

        if ("video" in node) {
            jQuery("#infoOverlayVideo").show();
            jQuery("#infoOverlayVideo").attr("src", node.video);
        } else {
            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");
    }
}