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

hTWOo is a Fluent Design Framework purely in HTML and CSS

'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;