ui-lib/lib/ui/checkbox.js

import { createElement } from "../functions";
import { createIcon } from "./icon";

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

function createRadiobox(opts = {}) {
    const container = createElement('label', 'checkbox-wrapper radiobox-wrapper',
        createElement('input', input => {
            input.setAttribute('type', 'radio');
            input.name = opts.name;
            if (opts.checked === true) {
                input.checked = true;
            }
            if (opts.enabled === false) {
                input.disabled = 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);
            }
        }));
    if (opts.className) {
        container.classList.add(opts.className);
    }
    fillCheckbox(container, opts.type || 'fa-regular', opts.label, 'circle');
    return container;
}

function createCheckbox(opts = {}) {
    const container = createElement('label', 'checkbox-wrapper',
        createElement('input', input => {
            input.setAttribute('type', 'checkbox');
            if (opts.checked === true) {
                input.checked = true;
            }
            if (opts.enabled === false) {
                input.disabled = 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);
            }
        }));
    if (opts.className) {
        container.classList.add(opts.className);
    }
    if (opts.checkedNode != null && opts.uncheckedNode != null) {
        container.classList.add('checkbox-image');
        let height = opts.imageHeight;
        if (isNaN(height) || height <= 0) {
            height = 14;
        }
        opts.checkedNode.classList.add('checked');
        container.appendChild(opts.checkedNode);
        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 = 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 = 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,
    createRadiobox
}