way2web-tabs/js/way2web.tabs.core.js

General tabs, store the last open tab.

/**
 *  Way 2 tabs.
 *
 * @param {object} element
 * @param {string} prefix
 *
 * @return {object}
 */
window.W2Tabs = (function(element, prefix) {
    'use strict';

    var version = '0.0.2';

    var globals = {
        id:          null,
        prefix:      'w2w_tab_',
        current:     null,
        activeClass: 'is-active',
        trigger:     'click'
    };

    // Array with the default elements for the tabs.
    var elements = {
        error:   '.has-error',
        tabPage: '.js-tabs-panel',
        tabItem: '.js-tabs-toggle'
    };

    /**
     * Public function.
     * The id wil get the attribute for the name in the localstorage.
     * Listen to the tabs, call a function if you click on a tab.
     *
     * @return {object}
     */
    function init() {
        globals.id = element.data('w2w-tabs');

        if (!globals.id) {
            globals.id = element.attr('id');
        }

        if(prefix) {
            globals.prefix = prefix;
        }

        element.find(elements.tabItem).on(globals.trigger, store);
        reload();

        return this;
    }

    /**
     * Public function.
     * Set the active class.
     *
     * @param {string} newClass
     *
     * @return {object}
     */
    function setClass(newClass) {
        globals.activeClass = newClass;

        return this;
    }

    /**
     * Public function.
     * Set the event trigger.
     *
     * @param {string} newTrigger
     *
     * @return {object}
     */
    function setTrigger(newTrigger) {
        globals.trigger = newTrigger;

        return this;
    }

    /**
     * Public function.
     * Set the storage prefix.
     *
     * @param {string} newPrefix
     *
     * @return {object}
     */
    function setPrefix(newPrefix) {
        globals.prefix = newPrefix;

        return this;
    }

    /**
     * Private function.
     * On a page reload, e.g. if you save the form, switch back to the last tab.
     * If there is an error in a tab, switch to that tab.
     */
    function reload() {
        var tab = localStorage.getItem(globals.prefix + globals.id);
        var errorTabs = errors();

        if (errorTabs.length > 0) {
            tab = '#' + errorTabs[0];
        }

        if(tab) {
            open(tab);
        }
    }

    /**
     * Public function.
     * Get all the tabs with errors.
     *
     * @return {array}
     */
    function errors() {
        var tabs = [];
        var errorElements;

        if (element.find(elements.error).length < 1) {
            return tabs;
        }

        errorElements = element.find(elements.error).closest(elements.tabPage);
        errorElements.each(function() {
            tabs.push($(this).attr('id'));
        });

        return tabs;
    }

    /**
     * Private function.
     * When you click on a tab, call the function to store the tab in the localStorage.
     *
     * @param {object} event
     */
    function store(event) {
        event.preventDefault();

        open($(this).attr('href'));
    }

    /**
     * Private function.
     * Close all tabs.
     */
    function dispose() {
        var $toggles = element.find(elements.tabItem);
        var $panels = element.find(elements.tabPage);

        $toggles.attr('aria-expanded', false);
        $panels.attr('aria-expanded', false);

        $toggles.removeClass(globals.activeClass);
        $panels.removeClass(globals.activeClass);
    }

    /**
     * Public function.
     * Open the tab, and store the tab in the localStorage.
     *
     * @param {string} panelId
     *
     * @return {object}
     */
    function open(panelId) {
        var tab = element.find('a[href="' + panelId + '"]');
        var $panel = element.find(panelId);

        dispose();

        globals.current = panelId;

        tab.attr('aria-expanded', true);
        $panel.attr('aria-expanded', true);

        tab.addClass(globals.activeClass);
        $panel.addClass(globals.activeClass);

        localStorage.setItem(globals.prefix + globals.id, panelId);

        return this;
    }

    return {
        element:    element,
        init:       init,
        setClass:   setClass,
        setTrigger: setTrigger,
        setPrefix:  setPrefix,
        errors:     errors,
        elements:   elements,
        open:       open,
        version:    version,
        globals:    globals
    };
});