Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

temporary formatting

Browse source
This commit is contained in:
Ward 2021-07-26 18:00:21 +02:00
parent e3102f728d
commit 4b4ebc7837
2 changed files with 75 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.prettierrc
View file

@ -1,6 +1,6 @@
{ {
"trailingComma": "es5", "trailingComma": "es5",
"tabWidth": 4, "tabWidth": 4,
"semi": false, "semi": true,
"singleQuote": true "singleQuote": false
} }

142
UI/Input/Checkboxes.ts
View file

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