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";

/**
 * Makes this IgniteTemplate a tab that will become active or inactive based on the state of the tab.
 * @param {String} name The name of the tab.
 * @param {String} group The tab group to put this tab under, by default this is null.
 * @param {Boolean} active Whether or not this tab is active by default.
 * @returns {IgniteTemplate} This ignite template.
 */
function tab(name, group = null, 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(event => {
        if (this.element) {
            if (event.name == name && event.group == group) {
                this.element.classList.remove("tab-inactive");

                if (!this.element.classList.contains("tab-active")) {
                    this.element.classList.add("tab-active");
                }
            } else if (event.group == group) {
                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;
}

IgniteTemplate.prototype.tab = tab;

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

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

    get properties() {
        return {
            active: false,
            name: null,
            group: null,
            secondary: 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 the name and group match, set this tab link to active.
        if (this.name == event.name && this.group == event.group) {
            this.active = true;
            return;
        }

        //See if this event matched any of the secondary tabs.
        for(var i = 0; i < this.secondary.length; i++) {
            if (this.secondary[i] == event.name && this.group == event.group) {
                this.active = true;
                return;
            }
        }
        
        //Otherwise set this tab to inactive if it's active and the group matches.
        if (event.group == this.group && this.active) {
            this.active = false;
        }
    }

    onClick(event) {
        event.preventDefault();

        var changeEvent = new Event("tabchange");
        changeEvent.name = this.name;
        changeEvent.group = this.group;

        window.dispatchEvent(changeEvent);
    }

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

class TabLinkTemplate extends IgniteTemplate {
    /**
     * Initializes a new tab link template.
     * @param {String} name The name of the tab this link is for and will set active to.
     * @param {String} group The name of the group this link belongs to, this is optional.
     * @param {String|String[]} secondary Optional tabs that also set this link to active if active.
     * @param  {...any} elements Elements to render within the link.
     */
    constructor(name, group, secondary, ...elements) {
        super("tab-link", elements);

        //If the secondary tabs is null, set it to an empty array.
        if (!secondary) {
            secondary = [];
        }

        //If the secondary tabs is not an array then wrap it in one.
        if (!Array.isArray(secondary)) {
            secondary = [secondary];
        }

        this.property("name", name);
        this.property("group", group);
        this.property("secondary", secondary);
    }
}

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

export {
    TabLinkTemplate as TabLink
}