76 lines
2.5 KiB
JavaScript
76 lines
2.5 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 (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) {
|
|
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');
|
|
input.setAttribute('type', 'checkbox');
|
|
box.insertBefore(input, box.firstChild);
|
|
}
|
|
return container;
|
|
}
|
|
|
|
export {
|
|
createCheckbox,
|
|
resolveCheckbox
|
|
} |