Source: map/utils/LayerLegendOverview.js

import { Window } from "../../ui/Window.js";
import { WMSLayer } from "../layer/WMSLayer/WMSLayer.js";

export { LayerLegendOverview }

/**
 * @memberof vef.map.layer.utils
 */
class LayerLegendOverview extends Window {

    constructor(target, layerTree) {
        super(target, {
            height: "unset",
            width: "280px",
            open: false,
            draggable: true,
            title: "LAYER LEGENDS",
            responsive: true
        })

        this.layerTree_ = layerTree;

        this.initEvents_();

        this.isOpen_ = false;
    }

    showSelectedLayers_() {
        const content = document.createElement("div");
        content.style = "width: 100%; overflow-x: hidden; height: 400px; overflow-y: scroll;";

        const nodes = this.layerTree_.getSelectedNodeLayers();

        for (let i = 0; i < nodes.length; ++i) {
            const l = this.layerTree_.layerManager_.getLayerById(nodes[i].dataset.id);
            if (l instanceof WMSLayer) {
                const title = document.createElement("p");

                title.innerText = l.title;
                title.title = l.title;
                title.style = "overflow: hidden; text-overflow: ellipsis; width: 100%; white-space:nowrap; margin: 2px 0;";
                const img = l.getLegendGraphic();
                img.style = "max-width: 100%; margin: 2px 0 16px 0;";

                content.appendChild(title);
                content.appendChild(img);
            }
        }

        this.setContent(content);
    }

    initEvents_() {
        const listener = () => {
            if (this.isOpen_) {
                this.showSelectedLayers_();
            }
        };

        this.layerTree_.on("layertree_select", listener);
        this.layerTree_.on("layertree_deselect", listener);
        this.layerTree_.on("layertree_reorder", listener);
    }

    open() {
        this.isOpen_ = true;
        this.showSelectedLayers_();

        super.open();

        this.setOptions({
            top: (window.innerHeight - this.getElement().clientHeight - 10) + "px",
            left: "480px"
        });
    }

    close() {
        this.isOpen_ = false;
        super.close();
    }

}