ui-lib/lib/ui/checkbox.js

import './css/checkbox.scss';
import { createElement } from "../functions";
import { createIcon } from "./icon";

function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check', title) {
    const checkIcon = createIcon(type, charactor);
    checkIcon.classList.add('ui-check-icon');
    const indeterminateIcon = createIcon(type, 'grip-lines');
    indeterminateIcon.classList.add('ui-indeterminate-icon')
    container.appendChild(
        createElement('layer', layer => {
            layer.className = 'ui-check-inner';
            layer.addEventListener('keypress', e => {
                if (e.key === ' ' || e.key === 'Enter') {
                    const input = container.querySelector('input');
                    if (input != null) {
                        input.checked = !input.checked;
                        input.dispatchEvent(new Event('change'));
                    }
                }
            });
            if (tabindex >= 0) {
                layer.tabIndex = tabindex;
            }
        }, checkIcon, indeterminateIcon)
    );
    if (label instanceof Element) {
        container.appendChild(label);
    } else if (label != null && String(label).length > 0) {
        container.appendChild(
            createElement('span', span => {
                span.innerText = label;
                if (title != null) {
                    span.title = title;
                }
            })
        );
    }
}

export function createRadiobox(opts = {}) {
    const container = createElement('label', 'ui-check-wrapper ui-radio-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.customAttributes != null) {
                for (let entry of Object.entries(opts.customAttributes)) {
                    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, opts.label, opts.tabIndex, 'circle', opts.title);
    return container;
}

export function createCheckbox(opts = {}) {
    const container = createElement('label', opts.switch ? 'ui-switch' : 'ui-check-wrapper',
        createElement('input', input => {
            input.setAttribute('type', 'checkbox');
            if (opts.checked === true) {
                input.checked = true;
            }
            if (opts.indeterminate === true) {
                input.indeterminate = true;
            }
            if (opts.enabled === false) {
                input.disabled = true;
            }
            if (opts.customAttributes != null) {
                for (let entry of Object.entries(opts.customAttributes)) {
                    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.enabled === false) {
        container.classList.add('disabled');
    }
    if (opts.switch) {
        const label = opts.label;
        if (label instanceof Element) {
            container.appendChild(label);
        } else {
            container.appendChild(
                createElement('span', span => {
                    if (label != null && String(label).length > 0) {
                        span.innerText = label;
                    }
                    if (opts.title != null) {
                        span.title = opts.title;
                    }
                })
            );
        }
    } else if (opts.checkedNode != null && opts.uncheckedNode != null) {
        container.classList.add('ui-check-image-wrapper');
        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, opts.label, opts.tabIndex, undefined, opts.title);
    }
    return container;
}

export 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('ui-check-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;
            }
            if (chk.disabled) {
                label.className = 'ui-check-wrapper disabled';
            } else {
                label.className = 'ui-check-wrapper';
            }
            label.replaceChildren();
            fillCheckbox(label, 'fa-regular', text, chk.tabIndex, undefined, label.title);
            label.insertBefore(chk, label.firstChild);
        }
    }
    const boxes = container.querySelectorAll('label[data-checkbox]');
    for (let box of boxes) {
        if (!box.classList.contains('ui-check-wrapper')) {
            box.classList.add('ui-check-wrapper');
        }
        if (box.hasChildNodes()) {
            if (!box.classList.contains('ui-check-image-wrapper')) {
                box.classList.add('ui-check-image-wrapper');
            }
        } else {
            fillCheckbox(box,
                box.dataset.type,
                box.dataset.label,
                box.dataset.tabIndex,
                undefined,
                box.title);
            box.removeAttribute('title');
            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;
}