Source: ui/TabGroup.js

import { UiElement } from "./UiElement.js";
import "./TabGroup.css";

export { TabGroup };

/**
 * Ui class for displaying multiple content groups as tabs
 * 
 * @memberof vef.ui
 */
class TabGroup extends UiElement {

    classes = "tab-group";
    html = `
        <div class="tab-container">
            <div class="tabs"></div>
            <div class="tab-spacer"></div>
        </div>
        <div class="content"></div>
    `;

    /**
     * @param {HTMLElement} target 
     */
    constructor(target) {
        super(target, {
            "show": []
        });

        this.groups_ = {};
        this.empty_ = true;

        this.setHtml(this.html);
        this.setClass(this.classes);
    }

    /**
     * Add a HTMLElement to the tab group
     * 
     * @param {string} title 
     * @param {HTMLElement} element 
     */
    addGroup(title, element) {
        const tabs = this.query(".tabs");
        const content = this.query(".content");

        const tab = document.createElement("div");
        tab.classList.add("tab");
        tab.innerHTML = title;
        tab.onclick = e => this.showGroup(title);
        tabs.appendChild(tab);

        element.style.display = "none";
        content.appendChild(element);

        this.groups_[title] = {
            tab: tab,
            element: element
        }

        if (this.empty_) {
            this.empty_ = false;
            this.showGroup(title);
        }
    }

    /**
     * Display a group identified by the title
     * 
     * @param {string} title 
     */
    showGroup(title) {
        for (let i in this.groups_) {
            const matched = i == title;
            this.groups_[i].element.style.display = (matched) ? "block" : "none";
            this.groups_[i].tab.dataset.active = (matched) ? "true" : "false";
            if (matched) this.fire("show", title);
        }
    }

}