134 lines
4.6 KiB
JavaScript
134 lines
4.6 KiB
JavaScript
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 != null && label.length > 0) {
|
|
const span = document.createElement('span');
|
|
span.innerText = label;
|
|
container.appendChild(span);
|
|
}
|
|
}
|
|
|
|
function createCheckbox(opts) {
|
|
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 (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, legacy) {
|
|
if (container == null) {
|
|
container = document.body;
|
|
}
|
|
if (legacy) {
|
|
const checks = container.querySelectorAll('input[type="checkbox"]');
|
|
for (let chk of checks) {
|
|
if (chk.parentElement.querySelector('layer.check-box-inner') != null) {
|
|
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.getAttribute('data-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.getAttribute('data-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.getAttribute('data-type') || 'fa-regular';
|
|
const label = box.getAttribute('data-label');
|
|
fillCheckbox(box, type, label)
|
|
box.removeAttribute('data-type');
|
|
box.removeAttribute('data-label');
|
|
}
|
|
const input = document.createElement('input');
|
|
const id = box.getAttribute('data-id');
|
|
if (id != null && id.length > 0) {
|
|
input.id = id;
|
|
}
|
|
if (box.getAttribute('data-checked') != null) {
|
|
input.checked = true;
|
|
}
|
|
input.setAttribute('type', 'checkbox');
|
|
box.insertBefore(input, box.firstChild);
|
|
}
|
|
return container;
|
|
}
|
|
|
|
export {
|
|
createCheckbox,
|
|
resolveCheckbox
|
|
} |