midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

temporary formatting

Browse source
This commit is contained in:
Ward 2021-07-26 17:59:15 +02:00
parent 263cef5750
commit e3102f728d
2 changed files with 113 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.prettierrc Normal file
View file

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

208
UI/Input/Checkboxes.ts
View file

@ -1,110 +1,116 @@
import { InputElement } from "./InputElement";
import { UIEventSource } from "../../Logic/UIEventSource";
import { Utils } from "../../Utils";
import BaseUIElement from "../BaseUIElement";
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 styleWrapperOverride = "";
private styleInputOverride = "";
private styleLabelOverride = "";
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[]>([]),
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;
}
GetValue(): UIEventSource<number[]> {
return this.value;
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("form");
const value = this.value;
const elements = this._elements;
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");
input.style.cssText = this.styleInputOverride;
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");
}
});
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();
}
};
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
}
return el;
}
IsValid(ts: number[]): boolean {
return ts !== undefined
}
GetValue(): UIEventSource<number[]> {
return this.value
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement('form')
const value = this.value
const elements = this._elements
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')
input.style.cssText = this.styleInputOverride
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')
}
})
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
}
}