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 );
        if (tabPanel) {

            let
                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.initPane) {
                unit.initPane = 1;
            }

            setPaneHeight(contents);

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

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

        }
    });
});