orgasso/assets/controllers/bulma_tabs_controller.js

import { Controller } from '@hotwired/stimulus';

/*
 * Contrôleur Stimulus pour la gestion d’onglets.
 * Affiche le bloc correspondant à l’onglet cliqué et masque les autres.
 * 
 * Les TABS sont présentées par une div avec une liste
 * <div class="tabs is-boxes" {{ stimulus_controller('bulma_tabs') }}>
 *   <ul>
 *     <li class="is-active" data-id="tab-1"><a>Tab 1</a></li>
 *     <li data-id="tab-2"><a>Tab 2</a></li>
 *   </ul>
 * </div>
 * <div id="tabs-content">
 *    <div class="container" id="tab-1">
 *      ---- CONTENU TAB 1 ----
 *    </div>
 *    <div class="container is-hidden" id="tab-2">
 *      ---- CONTENU TAB 2 ----
 *    </div>
 * </div>
 */

export default class extends Controller {
    static targets = ['tab'];

    connect() {
        console.log("Stimulus: contrôleur d’onglets actif");

        this.tabs = this.element.querySelectorAll('[data-id]');
        this.containers = document.querySelectorAll('#tabs-content .container');

        this.tabs.forEach(tab => {
            tab.addEventListener('click', (event) => {
                event.preventDefault();
                this.activateTab(tab);
            });
        });
    }

    activateTab(selectedTab) {
        const targetId = selectedTab.dataset.id;

        // Mise à jour des onglets actifs
        this.tabs.forEach(tab => tab.classList.remove('is-active'));
        selectedTab.classList.add('is-active');

        // Affichage du bon bloc
        this.containers.forEach(container => {
            if (container.id === targetId) {
                container.classList.remove('is-hidden');
            } else {
                container.classList.add('is-hidden');
            }
        });
    }
}