admin.table.js

(function (global, doc) {
    const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox';
    const ibexaTables = doc.querySelectorAll('.ibexa-table');
    const setMainCheckboxState = (mainCheckbox, subCheckboxes, event) => {
        const isFromJS = event?.detail?.isFromJS ?? false;

        if (isFromJS) {
            return;
        }

        const isTableEmpty = subCheckboxes.length === 0;

        if (isTableEmpty) {
            mainCheckbox.checked = false;
            mainCheckbox.disabled = true;

            return;
        }

        const areAllSubCheckboxesDisabled = subCheckboxes.every((checkbox) => checkbox.disabled);
        const subCheckboxesStatesConsidered = areAllSubCheckboxesDisabled
            ? subCheckboxes
            : subCheckboxes.filter((checkbox) => !checkbox.disabled);
        const areAllSubCheckboxesChecked = subCheckboxesStatesConsidered.every((checkbox) => checkbox.checked);
        const areAllSubCheckboxesUnchecked = subCheckboxesStatesConsidered.every((checkbox) => !checkbox.checked);

        mainCheckbox.disabled = areAllSubCheckboxesDisabled;

        if (areAllSubCheckboxesChecked) {
            mainCheckbox.checked = true;
            mainCheckbox.indeterminate = false;
        } else if (areAllSubCheckboxesUnchecked) {
            mainCheckbox.checked = false;
            mainCheckbox.indeterminate = false;
        } else {
            mainCheckbox.checked = false;
            mainCheckbox.indeterminate = true;
        }
    };
    const setSubCheckboxesStates = (mainCheckbox, subCheckboxes) => {
        subCheckboxes.forEach((subCheckbox) => {
            if (!subCheckbox.disabled) {
                subCheckbox.checked = mainCheckbox.checked;
                subCheckbox.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { isFromJS: true } }));
            }
        });
    };
    const tablesCheckboxesChangeListeners = new Map();
    const addTableCheckboxesListeners = (table) => {
        const tableBody = table.querySelector('.ibexa-table__body');
        const headCells = table.querySelectorAll('.ibexa-table__header-cell');
        const headCellsWithCheckbox = table.querySelectorAll('.ibexa-table__header-cell--checkbox');

        const checkboxesChangeListeners = new Map();
        headCellsWithCheckbox.forEach((headCellWithCheckbox) => {
            const isCustomInit = !!headCellWithCheckbox.querySelector(
                '.ibexa-table__header-cell-checkbox.ibexa-table__header-cell-checkbox--custom-init',
            );

            if (isCustomInit) {
                return;
            }

            const mainCheckboxIndex = [...headCells].indexOf(headCellWithCheckbox);
            const mainCheckbox = headCellWithCheckbox.querySelector(SELECTOR_TABLE_CHECKBOX);
            const subCheckboxes = tableBody.querySelectorAll(
                `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) ${SELECTOR_TABLE_CHECKBOX}`,
            );

            if (!mainCheckbox) {
                return;
            }

            setMainCheckboxState(mainCheckbox, [...subCheckboxes]);

            const hadleSubCheckboxesChange = setMainCheckboxState.bind(null, mainCheckbox, [...subCheckboxes]);
            const hadleMainCheckboxChange = setSubCheckboxesStates.bind(null, mainCheckbox, subCheckboxes);

            subCheckboxes.forEach((subCheckbox) => {
                subCheckbox.addEventListener('change', hadleSubCheckboxesChange, false);
                checkboxesChangeListeners.set(subCheckbox, hadleSubCheckboxesChange);
            });

            mainCheckbox.addEventListener('change', hadleMainCheckboxChange, false);
            checkboxesChangeListeners.set(mainCheckbox, hadleMainCheckboxChange);

            tablesCheckboxesChangeListeners.set(table, checkboxesChangeListeners);
        });
    };
    const removeTableCheckboxesListeners = (table) => {
        const checkboxesChangeListeners = tablesCheckboxesChangeListeners.get(table);

        checkboxesChangeListeners.forEach((changeListener, checkbox) => {
            if (checkbox) {
                checkbox.removeEventListener('change', changeListener, false);
            }
        });

        tablesCheckboxesChangeListeners.delete(table);
    };
    const toggleLastColumnShadow = (table, scroller) => {
        const offsetRoudingCompensator = 0.5;
        const shouldShowRightColumnShadow =
            scroller.scrollLeft < scroller.scrollWidth - scroller.offsetWidth - 2 * offsetRoudingCompensator;

        table.classList.toggle('ibexa-table--last-column-shadow', shouldShowRightColumnShadow);
    };
    const initStickyTables = () => {
        const stickyTables = doc.querySelectorAll('.ibexa-table.ibexa-table--last-column-sticky');

        stickyTables.forEach((table) => {
            const scrollableWrapper = table.closest('.ibexa-scrollable-wrapper');

            scrollableWrapper.addEventListener('scroll', (event) => toggleLastColumnShadow(table, event.currentTarget), false);
            toggleLastColumnShadow(table, scrollableWrapper);
        });
    };

    const initTableCheckboxesListeners = (table) => {
        const tableHasBulkCheckbox = !!table.querySelector(
            '.ibexa-table__header-cell-checkbox:not(.ibexa-table__header-cell-checkbox--custom-init)',
        );

        if (!tableHasBulkCheckbox) {
            return;
        }

        addTableCheckboxesListeners(table);

        table.addEventListener(
            'ibexa-refresh-main-table-checkbox',
            () => {
                removeTableCheckboxesListeners(table);
                addTableCheckboxesListeners(table);
            },
            false,
        );
    };

    const uncheckCheckboxes = (table) => {
        const mainCheckbox = table.querySelector('.ibexa-table__header-cell-checkbox');
        const subCheckboxes = [...table.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)];

        mainCheckbox.checked = false;
        mainCheckbox.indeterminate = false;
        subCheckboxes.forEach((subCheckbox) => {
            subCheckbox.checked = false;
        });
    };

    ibexaTables.forEach(initTableCheckboxesListeners);
    initStickyTables();

    doc.body.addEventListener(
        'ibexa-init-main-table-checkboxes-listeners',
        (event) => {
            initTableCheckboxesListeners(event.detail.table);
        },
        false,
    );

    doc.body.addEventListener(
        'ibexa-uncheck-checkboxes',
        (event) => {
            uncheckCheckboxes(event.detail.table);
        },
        false,
    );
})(window, window.document);