@siberiaweb/components/lib/tab-control/TabControl.ts

Веб-компоненты.

import CSS from "./CSS";
import Tab from "./Tab";
import TabPanel from "./TabPanel";
import TabPanelItem from "./TabPanelItem";
import WebComponent from "@siberiaweb/webcomponent/lib/WebComponent";

import "./TabControl.css";


/**
 * Контроллер вкладок.
 */
export default class TabControl extends WebComponent {

    /**
     * Наименование компонента.
     */
    public static readonly COMPONENT_NAME = "sw-tab-control";

    /**
     * Активная вкладка.
     */
    public static readonly ATTR_ACTIVE_TAB = "active-tab";


    /**
     * Наблюдаемые атрибуты.
     */
    public static get observedAttributes(): string[] {
        return WebComponent.observedAttributes.concat( [
            TabControl.ATTR_ACTIVE_TAB
        ] );
    }


    /**
     * Инициализация панели вкладок.
     */
    private initTabPanel(): void {
        let tabPanel: TabPanel | null = this.querySelector( TabPanel.COMPONENT_NAME );
        if ( tabPanel === null ) {
            return;
        }

        let items: TabPanelItem[] = Array.from( tabPanel.querySelectorAll( TabPanelItem.COMPONENT_NAME ) );
        for ( const item of items ) {
            item.addEventListener( "click", (
                event
            ) => {
                if ( ( event.button === 0 ) && !( event.altKey || event.ctrlKey || event.shiftKey ) ) {
                    this.activeTab = item.tab;
                }
            } );
        }
    }


    /**
     * Обработка изменения атрибута "active-tab".
     */
    protected attrActiveTabChange(): void {
        let item: TabPanelItem | null = this.querySelector(
            `${ TabPanelItem.COMPONENT_NAME }[tab="${ this.activeTab }"]` );
        if ( item === null ) {
            return;
        }

        let tab: Tab | null = this.querySelector( `${ Tab.COMPONENT_NAME }[name="${ this.activeTab }"]` );
        if ( tab === null ) {
            return;
        }

        let items: TabPanelItem[] = Array.from( this.querySelectorAll( TabPanelItem.COMPONENT_NAME ) );
        for ( const i of items ) {
            i.active = false;
        }

        let tabs: Tab[] = Array.from( this.querySelectorAll( Tab.COMPONENT_NAME ) );
        for ( const i of tabs ) {
            i.active = false;
        }

        item.active = true;
        tab.active = true;
    }


    /**
     * @override
     */
    protected attributeChangedCallback(
        name: string,
        oldValue: string | null,
        newValue: string | null
    ) {
        super.attributeChangedCallback( name, oldValue, newValue );

        switch ( name ) {
            case TabControl.ATTR_ACTIVE_TAB:
                this.attrActiveTabChange();
                break;
        }
    }


    /**
     * @override
     */
    protected firstConnectedCallback() {
        super.firstConnectedCallback();

        this.classList.add( CSS.TAB_CONTROL );

        this.initTabPanel();
    }


    /**
     * Получение активной вкладки.
     */
    public get activeTab(): string {
        return this.getAttributeOrDefault( TabControl.ATTR_ACTIVE_TAB, "" );
    }


    /**
     * Установка активной вкладки.
     *
     * @param value Значение.
     */
    public set activeTab(
        value: string
    ) {
        this.setAttribute( TabControl.ATTR_ACTIVE_TAB, value );
    }


    /**
     * Конструктор.
     */
    constructor() {
        super();
    }


}


TabControl.define( TabPanel );
TabControl.define( TabPanelItem );
TabControl.define( Tab );