blaze-2d/lib/src/ui/tabBar.js

A fast and simple WebGL 2 2D game engine written in TypeScript

import BlazeTitlebar from "./titleBar";

  const THWBsJdXuLCR = document.createElement("style");
  THWBsJdXuLCR.textContent = `.blzTabBar {
  background-color: var(--blz-bg-light);
  justify-content: flex-start;
  gap: 0 0.3rem;
}

.blzTabBar p {
  background-color: var(--blz-accent);
  cursor: pointer;
  align-self: flex-end;
  padding: 0.15rem 0.4rem;
  border-radius: 0.1rem 0.1rem 0 0;
  flex-grow: 1;
}

.blzTabBar .active {
  background-color: var(--blz-primary);
}
`;
  document.head.appendChild(THWBsJdXuLCR);
  
import BlazeElement from "./element";
import { Mouse } from "../input/mouse";
export default class BlazeTabBar extends BlazeTitlebar {
    /**
     * Creates an {@link BlazeTabBar} component.
     *
     * @param tabs The tab titles
     */
    constructor(...tabs) {
        super(tabs[0]);
        this.tabElements = [];
        this.text.remove();
        this.element.classList.add("blzTabBar");
        this.tabs = tabs;
        this.createTabElements();
        this.markActive(tabs[0]);
    }
    /**
     * Creates and adds the tab elements to the bar.
     */
    createTabElements() {
        this.tabs.forEach((tab) => {
            const element = document.createElement("p");
            element.textContent = tab;
            this.element.appendChild(element);
            const blzElement = new BlazeElement(element);
            blzElement.mouse.addListener(Mouse.LEFT, (pressed) => {
                if (pressed) {
                    this.markActive(tab);
                }
            });
            this.tabElements.push(blzElement);
        });
    }
    /**
     * Adds the `active` class to the element for the given tab id.
     *
     * @param tab The id of the tab to mark
     * @param fireCallback wether or not to call `activeCb`
     */
    markActive(tab, fireCallback = true) {
        this.tabElements.forEach((blzElement) => {
            blzElement.element.classList.remove("active");
        });
        this.tabs.forEach((t, i) => {
            if (t !== tab)
                return;
            const blzElement = this.tabElements[i];
            if (blzElement) {
                blzElement.element.classList.add("active");
            }
            this.activeTab = tab;
        });
        if (this.activeCb && fireCallback)
            this.activeCb(tab);
    }
}
//# sourceMappingURL=tabBar.js.map