noccy/jsl
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement CheckField logic

Browse Source
This commit is contained in:
Chris
2025-09-21 02:34:26 +02:00
parent 76f8fc1c65
commit 0f8747dce7
3 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dialog.css
View File

@@ -95,6 +95,10 @@
margin: 0px 0.25rem; margin: 0px 0.25rem;
background: var(--jsl-dialog-button-normal); background: var(--jsl-dialog-button-normal);
box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff; box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff;
cursor: pointer;
&.disabled {
cursor: default;
}
&.default-action { &.default-action {
outline: solid 1px #666; outline: solid 1px #666;
} }

4
jsonform.css
View File

@@ -78,12 +78,14 @@
padding-left: 0em; padding-left: 0em;
padding-right: 1rem; padding-right: 1rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: #929292; border: solid 1px #444;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292;
color: #dddddd; color: #dddddd;
.-check-thumb { .-check-thumb {
border-radius: 0.25rem; border-radius: 0.25rem;
background-color: #444; background-color: #444;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
} }
&.-check-on { &.-check-on {
padding-left: 1em; padding-left: 1em;

23
jsonform.js
View File

@@ -281,42 +281,37 @@ class SelectField extends FormField {
class CheckField extends FormField { class CheckField extends FormField {
#input = null; #input = null;
#container = null; #container = null;
#thumb = null;
buildField() { buildField() {
if (!this.#input) { if (!this.#input) {
this.#input = el.div({ class: '-field -check-field' }) this.#input = el.div({ class: '-field -check-field' })
this.el.appendChild(this.#input); this.el.appendChild(this.#input);
dom.append(this.#input, [ dom.append(this.#input, [
this.#container = el.span({ class: '-check-box' }, [ this.#container = el.span({ class: '-check-box' }, [
this.#thumb = el.span({ class: '-check-thumb' }, "|||") el.span({ class: '-check-thumb' }, "|||")
]), ]),
]); ]);
this.#input.addEventListener('click', () => this.toggle()); this.#input.addEventListener('click', () => this.toggle());
} }
} }
toggle() { toggle() {
if (this.#container.classList.contains('-check-on')) { this.value = !this.value;
this.#container.classList.remove('-check-on'); console.log("toggle", this.value);
} else {
this.#container.classList.add('-check-on');
}
} }
valueUpdated() { valueUpdated() {
if (!this.#input) return; if (!this.#input) return;
// this.#input.innerText = this.value; if (!!this.value) {
this.#container.classList.add('-check-on');
} else {
this.#container.classList.remove('-check-on');
}
} }
getValue() { getValue() {
// if (this.#input.innerText === '') { return this.value;
// if (this.options.nullable !== false)
// return null;
// }
return false; // this.#input.innerText;
} }
setEditable(state) { setEditable(state) {
if (state) { if (state) {
this.#input.classList.add('editable'); this.#input.classList.add('editable');
} else { } else {
// this.updateValue(this.#input.innerText);
this.#input.classList.remove('editable'); this.#input.classList.remove('editable');
} }
} }