jsOMS/UI/Component/Tab.js

/**
 * Tab manager class.
 *
 * @copyright  Dennis Eichhorn
 * @license    OMS License 1.0
 * @version    1.0.0
 * @since      1.0.0
 */
(function (jsOMS)
{
    "use strict";

    jsOMS.Autoloader.defineNamespace('jsOMS.UI.Component');

    jsOMS.UI.Component.Tab = class {
        /**
         * @constructor
         *
         * @since 1.0.0
         */
        constructor (app)
        {
            this.app = app;
        };

        /**
         * Bind & rebind UI elements.
         *
         * @param {string} [id] Element id
         *
         * @return {void}
         *
         * @since  1.0.0
         */
        bind (id)
        {
            if (typeof id !== 'undefined') {
                const e = document.getElementById(id);

                if (e) {
                    this.bindElement(e);
                }
            } else {
                const tabs = document.querySelectorAll('.tabview'),
                length = !tabs ? 0 : tabs.length;

                for (let i = 0; i < length; ++i) {
                    this.bindElement(tabs[i]);
                }
            }
        };

        /**
         * Bind & rebind UI element.
         *
         * @param {Object} e Element
         *
         * @return {void}
         *
         * @since  1.0.0
         */
        bindElement (e)
        {
            this.activateTabUri(e);

            const nodes = e.querySelectorAll('.tab-links li'),
                length = nodes.length;

            for (let i = 0; i < length; ++i) {
                nodes[i].addEventListener('click', function (evt)
                {
                    let fragmentString = window.location.href.includes('#') ? jsOMS.Uri.Http.parseUrl(window.location.href).fragment : '';

                    /* Change Tab */
                    /* Remove selected tab */
                    fragmentString = jsOMS.ltrim(fragmentString.replace(this.parentNode.getElementsByClassName('active')[0].getElementsByTagName('label')[0].getAttribute('for'), ''), ',');
                    jsOMS.removeClass(this.parentNode.getElementsByClassName('active')[0], 'active');
                    jsOMS.addClass(this, 'active');

                    /* Add selected tab */
                    window.history.pushState(null,'',
                        jsOMS.Uri.UriFactory.build(
                            '{%}#' + (fragmentString === '' ? '' : fragmentString + ',') + this.getElementsByTagName('label')[0].getAttribute('for')
                        )
                    );
                });
            }
        };

        /**
         * Activates the correct tab based on URI fragment.
         *
         * This allows to link a specific open tab to a user or make it a bookmark
         *
         * @param {Object} e Element
         *
         * @return {void}
         *
         * @since  1.0.0
         */
        activateTabUri(e)
        {
            const fragmentString = window.location.href.includes('#') ? jsOMS.Uri.Http.parseUrl(window.location.href).fragment : '';
            const fragments      = fragmentString.split(','),
                fragLength = fragments.length;

            for (let i = 0; i < fragLength; ++i) {
                let label = e.querySelectorAll('label[for="' + fragments[i] + '"]')[0];
                if (typeof label !== 'undefined') {
                    label.click();
                }
            }
        };
    }
}(window.jsOMS = window.jsOMS || {}));