@n8d/htwoo-core/lib/js/main.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

import { HOODialog, DialogType } from './dialog.js';
import { ariaSelect } from './select.js';
/** Table Helper */
import { initTables } from './table.js';
/** Pivot Helpers */
import { initPivot } from './pivot.js';
/** Menu Helpers */
import { initMenu } from './nav.js';
import { FileUploadHandler } from './file.js';
/** Overflow */
import * as overflow from './overflow.js';
/**
 * Register event handlers for button elements matching a selector
 * @param classSelector - CSS selector for the buttons
 * @param handleWith - Event handler function
 */
const splitButtonReg = (classSelector, handleWith) => {
    const allSplitButtons = document.querySelectorAll(classSelector);
    allSplitButtons.forEach(element => {
        element.addEventListener('click', ((event) => {
            handleWith(event);
        }));
    });
};
/**
 * Handle button flyout toggle
 * @param curSplitButton - The button that was clicked
 * @param parentElement - Parent element of the button
 */
const _btnFlyOut = (curSplitButton, parentElement) => {
    // Set aria values
    let ariaPressed = curSplitButton.getAttribute('aria-pressed');
    if (ariaPressed === null) {
        curSplitButton.setAttribute('aria-pressed', 'true');
    }
    else {
        curSplitButton.setAttribute('aria-pressed', ariaPressed === 'true' ? 'false' : 'true');
    }
    parentElement.classList.toggle('show-flyout');
};
/**
 * Handle button click events
 * @param event - Click event
 */
const buttonClick = (event) => {
    const curSplitButton = event.target;
    const parentElement = curSplitButton.parentElement;
    _btnFlyOut(curSplitButton, parentElement);
};
/**
 * Handle split button click events
 * @param event - Click event
 */
const splitButtonClick = (event) => {
    console.log("\nEVENT: splitButtonClick");
    const curSplitButton = event.target;
    const parentElement = curSplitButton.parentElement;
    _btnFlyOut(curSplitButton, parentElement);
};
/**
 * Handle delete and slide animation
 * @param event - Click event
 */
const animateDeleteAndSlide = (event) => {
    const eventTarget = event.target;
    if (!eventTarget.parentElement?.dataset.animation)
        return;
    const animationClass = eventTarget.parentElement.dataset.animation;
    // Add class
    eventTarget.classList.add(animationClass);
    const computedStyles = window.getComputedStyle(eventTarget);
    const animationDuration = parseFloat(computedStyles.getPropertyValue('animation-duration')) * 1000;
    console.log(computedStyles, computedStyles.getPropertyValue('animation-duration'), animationDuration);
    setTimeout(() => {
        eventTarget.remove();
    }, animationDuration);
};
/**
 * Handle add and slide animation
 * @param event - Click event
 */
const animateAddAndSlide = (event) => {
    const eventTarget = event.target;
    if (!eventTarget.parentElement?.dataset.animation)
        return;
    const animationClass = eventTarget.parentElement.dataset.animation;
    // Add class
    eventTarget.classList.add(animationClass);
    const newDomElement = document.importNode(eventTarget, true);
    newDomElement.classList.add(animationClass);
    const computedStyles = window.getComputedStyle(newDomElement);
    const animationDuration = parseFloat(computedStyles.getPropertyValue('animation-duration')) * 1000;
    eventTarget.parentElement.appendChild(newDomElement);
    newDomElement.addEventListener('click', animateAddAndSlide);
    console.log(computedStyles, computedStyles.getPropertyValue('animation-duration'), animationDuration);
    setTimeout(() => {
        newDomElement.classList.remove('anim-add-slide');
    }, animationDuration);
};
/**
 * Register animation handlers for elements
 * @param classname - CSS class selector
 * @param handleWith - Event handler function
 */
const registerAnimation = (classname, handleWith) => {
    const animationBlocks = document.querySelectorAll(`${classname} > .sg-anim-block`);
    animationBlocks.forEach(element => {
        element.addEventListener('click', handleWith);
    });
};
/**
 * Register file input handlers
 * @param classname - CSS class selector for file inputs
 */
const registerInputHandler = (classname) => {
    const allFileHandlers = document.querySelectorAll(classname);
    allFileHandlers.forEach(fileHandler => {
        new FileUploadHandler(fileHandler);
    });
};
/**
 * Register ARIA select elements
 */
const registerAriaSelect = () => {
    const selects = document.querySelectorAll('.hoo-select');
    console.debug('ALL SELECTED', selects);
    if (selects) {
        selects.forEach((item) => {
            console.debug(item);
            ariaSelect(item);
        });
    }
};
/**
 * Register dialog elements
 */
const registerDialog = () => {
    try {
        const dialog1 = new HOODialog('#btn-dialog', '#myDialog', DialogType.DIALOG, {
            closer: '#closer-dlg',
            backdropCloser: true,
            escCloser: true
        });
        const dialog2 = new HOODialog('#btn-modal-dialog', '#myDialog-1', DialogType.MODAL, {
            closer: '#closer-mdl',
            backdropCloser: true,
            escCloser: true
        });
    }
    catch (e) {
        void e; // Suppress errors
    }
};
/**
 * Main initialization function to run after DOM is loaded
 */
const afterLoaded = () => {
    registerDialog();
    splitButtonReg('.hoo-buttonsplit > .hoo-buttonsplit-carret', splitButtonClick);
    splitButtonReg('.hoo-buttonsplit-primary > .hoo-buttonsplit-carret', splitButtonClick);
    splitButtonReg('button.hoo-buttonicon-overflow', buttonClick);
    splitButtonReg('button.hoo-buttoncmd', buttonClick);
    splitButtonReg('button.hoo-buttoncmdbar', buttonClick);
    splitButtonReg('button.hoo-buttonicon-flyout', buttonClick);
    splitButtonReg('button.hoo-buttoncontext', buttonClick);
    registerAnimation('.anim-deleteNslide', animateDeleteAndSlide);
    registerAnimation('.anim-addNslide', animateAddAndSlide);
    registerInputHandler('.hoo-input-file');
    registerAriaSelect();
    /** Init Table Helper */
    initTables();
    /** Init Pivot Bars */
    initPivot();
    /** Init Menu Bars */
    initMenu();
    overflow.init();
    setTimeout(() => {
        const tmpHidden = document.querySelectorAll('.tmp-hidden');
        console.log(tmpHidden);
        tmpHidden.forEach(item => {
            item.addEventListener("focus", ((event) => {
                const target = event.target;
                target.classList.remove('.tmp-hidden');
                console.log(tmpHidden);
            }));
        });
    }, 1000);
};
// Initialize the application when the window loads
window.onload = afterLoaded;
// Public API of the package entry (lib/js/main.d.ts, the htwoo UMD global)
export { HOODialog, DialogType, FileUploadHandler, ariaSelect, initTables, initPivot, initMenu, overflow };
//# sourceMappingURL=main.js.map