midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More refactoring, still very broken

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-11 22:51:45 +02:00
parent d5d90afc74
commit 62f471df1e
23 changed files with 428 additions and 356 deletions
Download patch file Download diff file Expand all files Collapse all files

22
UI/Input/Checkboxes.ts
View file

@ -2,6 +2,7 @@ import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import {UIElement} from "../UIElement";
import BaseUIElement from "../BaseUIElement";
/**
* Supports multi-input
@ -10,15 +11,24 @@ export default class CheckBoxes extends InputElement<number[]> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>;
private readonly _elements: UIElement[]
private readonly _elements: BaseUIElement[]
private readonly _element : HTMLElement
constructor(elements: UIElement[]) {
super(undefined);
constructor(elements: BaseUIElement[]) {
super();
this._elements = Utils.NoNull(elements);
this.value = new UIEventSource<number[]>([])
this.ListenTo(this.value);
const el = document.createElement()
this._element = el;
}
protected InnerConstructElement(): HTMLElement {
return this._element
}

47
UI/Input/ColorPicker.ts
View file

@ -4,46 +4,33 @@ import {UIEventSource} from "../../Logic/UIEventSource";
export default class ColorPicker extends InputElement<string> {
private readonly value: UIEventSource<string>
private readonly _element : HTMLElement
constructor(
value?: UIEventSource<string>
value: UIEventSource<string> = new UIEventSource<string>(undefined)
) {
super();
this.value = value ?? new UIEventSource<string>(undefined);
const self = this;
this.value = value ;
const el = document.createElement("input")
this._element = el;
el.type = "color"
this.value.addCallbackAndRun(v => {
if(v === undefined){
return;
}
self.SetValue(v);
el.value =v
});
el.oninput = () => {
const hex = el.value;
value.setData(hex);
}
}
InnerRender(): string {
return `<span id="${this.id}"><input type='color' id='color-${this.id}'></span>`;
}
private SetValue(color: string){
const field = document.getElementById("color-" + this.id);
if (field === undefined || field === null) {
return;
}
// @ts-ignore
field.value = color;
}
protected InnerUpdate() {
const field = document.getElementById("color-" + this.id);
if (field === undefined || field === null) {
return;
}
const self = this;
field.oninput = () => {
const hex = field["value"];
self.value.setData(hex);
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
GetValue(): UIEventSource<string> {