Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

styling checkbox and selection

Browse source
This commit is contained in:
Ward 2021-07-26 17:45:54 +02:00
parent e9160504a6
commit 263cef5750
5 changed files with 304 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

164
UI/Input/Checkboxes.ts
View file

@ -1,96 +1,110 @@
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import { InputElement } from "./InputElement";
import { UIEventSource } from "../../Logic/UIEventSource";
import { Utils } from "../../Utils";
import BaseUIElement from "../BaseUIElement";
/**
* Supports multi-input
*/
export default class CheckBoxes extends InputElement<number[]> {
private static _nextId = 0;
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>
private readonly _elements: BaseUIElement[];
private static _nextId = 0;
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>;
private readonly _elements: BaseUIElement[];
private styleWrapperOverride = "";
private styleInputOverride = "";
private styleLabelOverride = "";
constructor(elements: BaseUIElement[], value = new UIEventSource<number[]>([])) {
super();
this.value = value;
this._elements = Utils.NoNull(elements);
this.SetClass("flex flex-col")
constructor(
elements: BaseUIElement[],
value = new UIEventSource<number[]>([]),
styleFormOverride = "",
styleWrapperOverride = "",
styleInputOverride = "",
styleLabelOverride = ""
) {
super();
this.value = value;
this._elements = Utils.NoNull(elements);
this.SetClass("flex flex-col");
this.SetStyle(styleFormOverride);
this.styleWrapperOverride = styleWrapperOverride;
this.styleInputOverride = styleInputOverride;
this.styleLabelOverride = styleLabelOverride;
}
}
IsValid(ts: number[]): boolean {
return ts !== undefined;
}
IsValid(ts: number[]): boolean {
return ts !== undefined;
GetValue(): UIEventSource<number[]> {
return this.value;
}
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("form");
GetValue(): UIEventSource<number[]> {
return this.value;
}
const value = this.value;
const elements = this._elements;
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("form")
for (let i = 0; i < elements.length; i++) {
let inputI = elements[i];
const input = document.createElement("input");
const id = CheckBoxes._nextId;
CheckBoxes._nextId++;
input.id = "checkbox" + id;
const value = this.value;
const elements = this._elements;
input.type = "checkbox";
input.classList.add("p-1", "cursor-pointer", "m-3", "pl-3", "mr-0");
input.style.cssText = this.styleInputOverride;
for (let i = 0; i < elements.length; i++) {
let inputI = elements[i];
const input = document.createElement("input")
const id = CheckBoxes._nextId
CheckBoxes._nextId++;
input.id = "checkbox" + id
input.type = "checkbox"
input.classList.add("p-1","cursor-pointer","m-3","pl-3","mr-0")
const label = document.createElement("label")
label.htmlFor = input.id
label.appendChild(inputI.ConstructElement())
label.classList.add("block","w-full","p-2","cursor-pointer","bg-red")
const wrapper = document.createElement("span")
wrapper.classList.add("flex","w-full","border", "border-gray-400","m-1")
wrapper.appendChild(input)
wrapper.appendChild(label)
el.appendChild(wrapper)
value.addCallbackAndRunD(selectedValues => {
if (selectedValues.indexOf(i) >= 0) {
input.checked = true;
}
if(input.checked){
wrapper.classList.remove("border-gray-400")
wrapper.classList.add("border-black")
}else{
wrapper.classList.add("border-gray-400")
wrapper.classList.remove("border-black")
}
})
input.onchange = () => {
// Index = index in the list of already checked items
const index = value.data.indexOf(i);
if (input.checked && index < 0) {
value.data.push(i);
value.ping();
} else if (index >= 0) {
value.data.splice(index, 1);
value.ping();
}
}
const label = document.createElement("label");
label.htmlFor = input.id;
label.appendChild(inputI.ConstructElement());
label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red");
label.style.cssText = this.styleLabelOverride;
const wrapper = document.createElement("span");
wrapper.classList.add(
"wrapper",
"flex",
"w-full",
"border",
"border-gray-400",
"m-1"
);
wrapper.style.cssText = this.styleWrapperOverride;
wrapper.appendChild(input);
wrapper.appendChild(label);
el.appendChild(wrapper);
value.addCallbackAndRunD((selectedValues) => {
if (selectedValues.indexOf(i) >= 0) {
input.checked = true;
}
if (input.checked) {
wrapper.classList.remove("border-gray-400");
wrapper.classList.add("border-black");
} else {
wrapper.classList.add("border-gray-400");
wrapper.classList.remove("border-black");
}
});
return el;
input.onchange = () => {
// Index = index in the list of already checked items
const index = value.data.indexOf(i);
if (input.checked && index < 0) {
value.data.push(i);
value.ping();
} else if (index >= 0) {
value.data.splice(index, 1);
value.ping();
}
};
}
}
return el;
}
}