ignite-html-tabs/ignite-html-tabs.js

import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteCallback } from "../ignite-html/ignite-html.js";
import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";

IgniteTemplate.prototype.tab = function(name, active = false) {
    //Set the starting class based on whether or not the tab is active.
    if (active) {
        this.class("tab-active");
    } else {
        this.class("tab-inactive");
    }

    //What we do is create an IgniteCallback that will get called when
    //the tabchange event is raised. Upon disconnecting the callback we remove
    //the event listener.
    var callback = new IgniteCallback(e => {
        if (this.element) {
            if (e.tabName == name) {
                this.element.classList.remove("tab-inactive");

                if (!this.element.classList.contains("tab-active")) {
                    this.element.classList.add("tab-active");
                }
            } else {
                this.element.classList.remove("tab-active");

                if (!this.element.classList.contains("tab-inactive")) {
                    this.element.classList.add("tab-inactive");
                }
            }
        }
    }, () => {
        window.removeEventListener("tabchange", callback.callback);
    });

    //Register our callback to the tabchange event.
    window.addEventListener("tabchange", callback.callback);

    //Add this callback to our template so that upon deconstruction our callback is destroyed correctly.
    this._callbacks.push(callback);

    return this;
};

class TabLink extends IgniteElement {
    constructor() {
        super();

        this.tabChangeListener = e => this.update(e);
        window.addEventListener("tabchange", this.tabChangeListener);
    }

    get properties() {
        return {
            active: false,
            tabs: [],
            target: null
        };
    }

    render() {
        return this.template
            .onClick((event) => this.onClick(event))
            .class(this.active, value => value ? "active" : null)
            .child(new slot(this).class(this.active, value => value ? "active" : null));
    }

    update(event) {
        if (event.tabName == this.target) {
            this.active = true;
            return;
        }

        for(var i = 0; i < this.tabs.length; i++) {
            if (this.tabs[i] == e.tabName) {
                this.active = true;
                return;
            }
        }
        
        this.active = false;
        return;
    }

    onClick(event) {
        event.preventDefault();

        var changeEvent = new Event("tabchange");
        changeEvent.tabName = this.target;

        window.dispatchEvent(changeEvent);
    }

    cleanup() {
        window.removeEventListener("tabchange", this.tabChangeListener);
    }
}

class TabLinkTemplate extends IgniteTemplate {
    /**
     * Initializes a new tab link template.
     * @param {String} target The target tab to active when this is clicked.
     * @param {String|String[]} routes Optional tabs that also set this link to active if active.
     * @param  {...any} elements Elements to render within the link.
     */
    constructor(target, tabs, ...elements) {
        super("tab-link", elements);

        if (!tabs) {
            tabs = [];
        }

        if (!Array.isArray(tabs)) {
            tabs = [tabs];
        }

        this.property("target", target);
        this.property("tabs", tabs);
    }
}

customElements.define("tab-link", TabLink);

export {
    TabLinkTemplate as TabLink
}