@teipublisher/pb-components/src/pb-tabs.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import '@polymer/paper-tabs';
import '@polymer/iron-pages';
import { pbMixin, waitOnce } from './pb-mixin.js';
import { registry } from "./urls.js";


/**
 * Combines a row of tabs with associated content.
 * 
 * @slot tab - tab area
 * @slot page - page area
 * @csspart pages - wrapper around the tab pages
 * @fires pb-tab - fired if selected tab changes. Details contain number of 
 * selected tab in propery `selected`.
 */
export class PbTabs extends pbMixin(LitElement) {
    static get properties() {
        return {
            ...super.properties,
            selected: {
                type: Number,
                reflect: true
            }
        };
    }

    constructor() {
        super();

        this.selected = 0;
        this._initialized = false;
    }
    
    connectedCallback() {
        super.connectedCallback();

        waitOnce('pb-page-ready', () => {
            this.selected = registry.state.tab || 0;

            registry.subscribe(this, (state) => {
                this.selected = state.tab;
            });

        });
    }

    firstUpdated() {
        super.firstUpdated();
        this.emitTo('pb-tab', { selected: this.selected });
    }

    _switchTab(ev) {
        const current = parseInt(ev.detail.value, 10);
        if (this.selected === current) {
            return;
        }

        this.emitTo('pb-tab', { selected: current });

        this.selected = current;
        if (this._initialized) {
            registry.commit(this, { tab: this.selected });
        } else {
            registry.replace(this, { tab: this.selected });
        }
        this._initialized = true;
    }

    render() {
        return html`
            <paper-tabs id="tabs" selected="${this.selected || 0 }" @selected-changed="${this._switchTab}">
                <slot name="tab"></slot>
            </paper-tabs>
            <iron-pages part="pages" selected="${this.selected}">
                <slot name="page"></slot>
            </iron-pages>
        `;
    }

    static get styles() {
        return css`
            :host {
                display: block;
            }
        `;
    }
}
customElements.define('pb-tabs', PbTabs);