Source: ui/color/ColorScaleDropdown.js

import { Dropdown } from "../Dropdown.js";
import * as Utils from "./Utils.js";
import "./ColorScaleDropdown.css";

export { ColorScaleDropdown };

/**
 * Dropdown menu for selecting color scales
 * 
 * @author rhess <robin.hess@awi.de>
 * @memberof vef.ui.color
 */
class ColorScaleDropdown extends Dropdown {

    /**
     * options = {
     *   items: object (cobject with colorScale)
     * }
     * 
     * @param {HTMLElement | string} target 
     * @param {object} options 
     */
    constructor(target, options) {
        super(target, options);
        this.getElement().classList.add("color-scale-dropdown");
    }

    /**
     * called when an item gets selected.
     * Sets the name in the Ui
     * 
     * @param {object} item
     * @private
     * @override
     */
    select_(item) {
        if (super.select_(item)) {
            const header = this.getElement().querySelector(".vef-dropdown-header");
            header.style.background = (item) ? Utils.generateCssGradient(item.item) : "unset";
        }
    }

    /**
     * Add a color scale to the dropdown
     * 
     * @param {string} key
     * @param {object[]} item
     */
    addItem(key, item) {
        Utils.validateColorScale(item);
        super.addItem(key, item, {
            "background": Utils.generateCssGradient(item)
        });
    }

}