@ithaka/bonsai/js/bonsai.tabs.js

ITHAKA core styling

"use strict";

import $ from "jquery";
import { BonsaiBase } from "./bonsai.base";
import { Tabs } from "foundation-sites/js/foundation.tabs";

/** Tab module
 * @class
 * @param {jQuery} elements - The jQuery object for what needs to be created as a Tab
 * @param {Object} options - The options to be passed to Foundation {@link http://foundation.zurb.com/sites/docs/tabs.html#js-options}
 *
 * @example
 * var tabs = new BonsaiTabs($(".tabs"));
 *
 * @returns initialized Bonsai.Tabs object complete with optional 'id's
 */
class BonsaiTabs extends BonsaiBase {
    constructor(elements, options = {}) {
        super(elements, options);

        Bonsai.Tabs = Bonsai.hasOwnProperty("Tabs") ? Bonsai.Tabs : {members: {}, reflow: this.reflow};

        this._initializeTabs();
    }

    /**
     * Iterates through all elements of the jQuery selector and creates a Tab object. If the tab element has an ID, it
     * is added to the global Bonsai.Tabs Object for global event listening
     *
     * @private
     */
    _initializeTabs() {
        this.elements.each((index, element) => {
            let $element = $(element),
                elementID = $element.attr("id"),
                theTab = new Tabs($element, this.options),
                tabEvents = this._globalTabEvents(elementID);

            theTab.$element.on(tabEvents);

            if(elementID) {
                Bonsai.Tabs.members[elementID] = theTab.$element;
            }

            $element.find("li > a.disabled").attr("aria-disabled", "true");
        });
    }

    /**
     * Events that are meant to be registered against the Tab
     *
     * @param elementID - the ID of the modal div
     * @returns an object of functions that triggers custom bonsai events
     *
     * @private
     */
    _globalTabEvents(elementID) {
        return {
            "change.zf.tabs": (event, $target, $targetContent) => {
                Bonsai.Tabs.members[elementID].trigger("bonsai.tab.change", [$target, $targetContent]);
            }
        };
    }

    /**
     * Reflow method to re-bind jQuery element to a Tab object
     *
     * @public
     */
    reflow() {
        $.each(Bonsai.Tabs.members, (elementID, theTab) => {
            Bonsai.Tabs.members[elementID] = new Tabs($(`#${elementID}`)).$element;
        });
    }
}

export { BonsaiTabs };