@n8d/htwoo-core/dist/js/amd/htwoo.pivot.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

define(['exports'], (function (exports) { 'use strict';

    const elemPivotBar = '.hoo-pivotbar';
    const elemPivotButton = '.hoo-button-pivot';
    const dropDownPivotButton = '.hoo-navitem-text';
    const stateIsActive = 'is-active';
    /**
     * Handle pivot button click events
     * @param event - Click event
     */
    const changePivot = (event) => {
        event.preventDefault();
        const target = event.target;
        console.log(target);
        let currentButton;
        if (target.classList.contains(elemPivotButton.substr(1))) {
            currentButton = target;
        }
        else {
            currentButton = target.closest(elemPivotButton);
        }
        if (!currentButton) {
            if (target.classList.contains(dropDownPivotButton.substr(1))) {
                currentButton = target;
            }
            else {
                currentButton = target.closest(dropDownPivotButton);
            }
        }
        if (!currentButton)
            return;
        const currentPivotBar = target.closest(elemPivotBar);
        if (!currentPivotBar)
            return;
        const allButtons = currentPivotBar.querySelectorAll(elemPivotButton);
        allButtons.forEach(item => {
            item.classList.remove(stateIsActive);
        });
        currentButton.classList.add(stateIsActive);
    };
    /**
     * Initialize pivot bar functionality
     */
    const initPivot = () => {
        // register event on regular buttons
        const pivotBarsButtons = document.querySelectorAll(`${elemPivotBar} ${elemPivotButton}`);
        pivotBarsButtons.forEach(pivotButton => {
            const button = pivotButton;
            button.dataset.ref = button.textContent?.trim() || '';
            button.addEventListener('click', changePivot);
        });
    };

    exports.initPivot = initPivot;

}));