ui-lib/lib/ui/checkbox.js

import { createIcon } from "./icon";

function fillCheckbox(container, type, label) {
    const layer = document.createElement('layer');
    layer.className = 'check-box-inner';
    layer.appendChild(createIcon(type, 'check'));
    container.appendChild(layer);
    if (label instanceof HTMLElement) {
        container.appendChild(label);
    } else if (label?.length > 0) {
        const span = document.createElement('span');
        span.innerText = label;
        container.appendChild(span);
    }
}

function createCheckbox(opts = {}) {
    const container = document.createElement('label');
    container.className = 'checkbox-wrapper';
    const input = document.createElement('input');
    input.setAttribute('type', 'checkbox');
    if (opts.checked === true) {
        input.checked = true;
    }
    if (opts.customerAttributes != null) {
        for (let entry of Object.entries(opts.customerAttributes)) {
            input.setAttribute(entry[0], entry[1]);
        }
    }
    if (typeof opts.onchange === 'function') {
        input.addEventListener('change', opts.onchange);
    }
    container.appendChild(input);
    if (opts.isImage) {
        container.classList.add('checkbox-image');
        let height = opts.imageHeight;
        if (isNaN(height) || height <= 0) {
            height = 14;
        }
        if (opts.checkedNode != null) {
            if (!opts.checkedNode.classList.contains('checked')) {
                opts.checkedNode.classList.add('checked');
            }
            container.appendChild(opts.checkedNode);
        }
        if (opts.uncheckedNode != null) {
            if (!opts.uncheckedNode.classList.contains('unchecked')) {
                opts.uncheckedNode.classList.add('unchecked');
            }
            container.appendChild(opts.uncheckedNode);
        }
    } else {
        fillCheckbox(container, opts.type || 'fa-regular', opts.label);
    }
    return container;
}

function resolveCheckbox(container = document.body, legacy) {
    if (legacy) {
        const checks = container.querySelectorAll('input[type="checkbox"]');
        for (let chk of checks) {
            if (chk.parentElement.classList.contains('checkbox-wrapper')) {
                // skip
                continue;
            }
            const id = chk.id;
            let label, text;
            if (id != null) {
                label = container.querySelector(`label[for="${id}"]`);
            }
            if (label == null) {
                const e = chk.nextElementSibling;
                if (e != null) {
                    if (e.tagName === 'LABEL') {
                        label = e;
                    } else if (e.tagName === 'SPAN' && e.dataset.lgid != null) {
                        text = e.innerText;
                        e.style.display = 'none';
                    }
                }
            }
            if (label == null) {
                const e = chk.previousElementSibling;
                if (e != null) {
                    if (e.tagName === 'LABEL') {
                        label = e;
                    } else if (text == null && e.tagName === 'SPAN' && e.dataset.lgid != null) {
                        text = e.innerText;
                        e.style.display = 'none';
                    }
                }
            }
            if (label == null) {
                label = document.createElement('label');
                chk.parentElement.insertBefore(label, chk);
            } else {
                text = label.innerText;
            }
            label.className = 'checkbox-wrapper';
            label.replaceChildren();
            fillCheckbox(label, 'fa-regular', text);
            label.insertBefore(chk, label.firstChild);
        }
    }
    const boxes = container.querySelectorAll('label[data-checkbox]');
    for (let box of boxes) {
        if (!box.classList.contains('checkbox-wrapper')) {
            box.classList.add('checkbox-wrapper');
        }
        if (box.hasChildNodes()) {
            if (!box.classList.contains('checkbox-image')) {
                box.classList.add('checkbox-image');
            }
        } else {
            const type = box.dataset.type || 'fa-regular';
            const label = box.dataset.label;
            fillCheckbox(box, type, label)
            box.removeAttribute('data-type');
            box.removeAttribute('data-label');
        }
        const input = document.createElement('input');
        const id = box.dataset.id;
        if (id?.length > 0) {
            input.id = id;
        }
        if (box.dataset.checked != null) {
            input.checked = true;
        }
        input.setAttribute('type', 'checkbox');
        box.insertBefore(input, box.firstChild);
    }
    return container;
}

export {
    createCheckbox,
    resolveCheckbox
}