chill-bundles/Resources/public/modules/tabs/tabs.js

/*
 * Remove active class on both elements: link and content
 */
let resetActive = function(links, contents)
{
    for (items of [links, contents]) {
        items.forEach(function(item) {
            if (item.classList.contains('active')) {
                item.classList.remove('active');
            }
        });
    }
}

/*
 * Count links array and return rank of given link
 */
let countNewActive = function(links, link)
{
    let rank = 0;
    for (let i = 0; i < links.length; ++i) {
        rank++;
        if(links[i] == link) {
            return rank;
        }
    }
}

/*
 * Set class active on both new elements: link and content
 */
let setNewActive = function(links, contents, rank)
{
    if (! links[rank-1]) { rank = 1; }
    link = links[rank-1];

    link.classList.add('active');

    count = 0;
    contents.forEach(function(pane) {
        count++;
        if (rank == count) {
            pane.classList.add('active');
        }
    });
}

/*
 * Set height of content pane
 */
let setPaneHeight = function(contents) 
{
    contents.forEach(function(pane) {

        // let computedStyle = getComputedStyle(pane);
        // console.log(computedStyle.height);
        // comment prendre la hauteur d'une div masquée avec display:none
    });
}

/*
 * Check if links are defined in controller
 * If true, disable javascript listener
 */
let isLinkRef = function(link) {

    if (link.getAttribute('href') == "#") {

        return false;
    }
    return true;

}

/*
 * Main function
 */
window.addEventListener('load', function()
{
    tabParams.forEach(function(unit) {

        let
            tabPanel = document.querySelector('#'+ unit.id ),
            nav = tabPanel.querySelector('nav'),
            tabs = nav.querySelectorAll('ul.nav-tabs li.nav-item'),
            links = nav.querySelectorAll('ul.nav-tabs li.nav-item a.nav-link'),
            contents = tabPanel.querySelectorAll('div.tab-content div.tab-pane')
        ;

        if (unit.type == 'pill') {
            tabPanel.classList.add('pills');
        }

        if (! unit.startPanel) {
            unit.startPanel = 1;
        }

        setPaneHeight(contents);

        // initial position
        setNewActive(links, contents, unit.startPanel);

        // listen
        links.forEach(function(link) {
            if (isLinkRef(link) == false) {
                link.addEventListener('click', function()
                {
                    resetActive(links, contents);
                    setNewActive(links, contents, countNewActive(links, link));
                });
            }
        });

    });
});