tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

business logic, customer communication.

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-06 17:35:09 +08:00
parent 7c5a9214a1
commit 6157f994a9
23 changed files with 717 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
lib/ui/checkbox.js
View File

@ -1,54 +1,51 @@
import { createElement, createElementInit } from "../functions";
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);
container.appendChild(
createElement('layer', 'check-box-inner', createIcon(type, 'check'))
);
if (label instanceof HTMLElement) {
container.appendChild(label);
} else if (label?.length > 0) {
const span = document.createElement('span');
span.innerText = label;
container.appendChild(span);
container.appendChild(
createElementInit('span', span => span.innerText = label)
);
}
}
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;
const container = createElement('label', 'checkbox-wrapper',
createElementInit('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.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) {
if (opts.checkedNode != null && opts.uncheckedNode != null) {
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);
}
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);
}
@ -91,7 +88,7 @@ function resolveCheckbox(container = document.body, legacy) {
}
}
if (label == null) {
label = document.createElement('label');
label = createElement('label');
chk.parentElement.insertBefore(label, chk);
} else {
text = label.innerText;
@ -118,7 +115,7 @@ function resolveCheckbox(container = document.body, legacy) {
box.removeAttribute('data-type');
box.removeAttribute('data-label');
}
const input = document.createElement('input');
const input = createElement('input');
const id = box.dataset.id;
if (id?.length > 0) {
input.id = id;