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

More refactoring and fixes

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-14 02:39:23 +02:00
parent d7004cd3dc
commit 9cc721abad
37 changed files with 519 additions and 632 deletions
Download patch file Download diff file Expand all files Collapse all files

38
UI/Input/FixedInputElement.ts
View file

@ -1,44 +1,46 @@
import {InputElement} from "./InputElement";
import {UIElement} from "../UIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
export class FixedInputElement<T> extends InputElement<T> {
private readonly rendering: UIElement;
private readonly value: UIEventSource<T>;
public readonly IsSelected : UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _comparator: (t0: T, t1: T) => boolean;
constructor(rendering: UIElement | string,
private readonly _el : HTMLElement;
constructor(rendering: BaseUIElement | string,
value: T,
comparator: ((t0: T, t1: T) => boolean ) = undefined) {
super(undefined);
super();
this._comparator = comparator ?? ((t0, t1) => t0 == t1);
this.value = new UIEventSource<T>(value);
this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering;
const self = this;
const selected = this.IsSelected;
this._el = document.createElement("span")
this._el.addEventListener("mouseout", () => selected.setData(false))
const e = Translations.W(rendering)?.ConstructElement()
if(e){
this._el.appendChild( e)
}
this.onClick(() => {
self.IsSelected.setData(true)
selected.setData(true)
})
}
protected InnerConstructElement(): HTMLElement {
return undefined;
}
GetValue(): UIEventSource<T> {
return this.value;
}
InnerRender(): string {
return this.rendering.Render();
}
IsValid(t: T): boolean {
return this._comparator(t, this.value.data);
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const self = this;
htmlElement.addEventListener("mouseout", () => self.IsSelected.setData(false))
}
}

135
UI/Input/RadioButton.ts
View file

@ -3,24 +3,19 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
export class RadioButton<T> extends InputElement<T> {
private static _nextId = 0;
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _selectedElementIndex: UIEventSource<number>
= new UIEventSource<number>(null);
private readonly value: UIEventSource<T>;
private readonly _elements: InputElement<T>[]
private readonly _selectFirstAsDefault: boolean;
private _elements: InputElement<T>[];
private readonly _element: HTMLElement;
constructor(elements: InputElement<T>[],
selectFirstAsDefault = true) {
super(undefined);
this._elements = Utils.NoNull(elements);
this._selectFirstAsDefault = selectFirstAsDefault;
const self = this;
this.value =
UIEventSource.flatten(this._selectedElementIndex.map(
super()
elements = Utils.NoNull(elements);
const selectedElementIndex: UIEventSource<number> = new UIEventSource<number>(null);
const value =
UIEventSource.flatten(selectedElementIndex.map(
(selectedIndex) => {
if (selectedIndex !== undefined && selectedIndex !== null) {
return elements[selectedIndex].GetValue()
@ -28,26 +23,63 @@ export class RadioButton<T> extends InputElement<T> {
}
), elements.map(e => e?.GetValue()));
this.value.addCallback((t) => {
self?.ShowValue(t);
})
/*
value.addCallback((t) => {
self?.ShowValue(t);
})*/
for (let i = 0; i < elements.length; i++) {
// If an element is clicked, the radio button corresponding with it should be selected as well
elements[i]?.onClick(() => {
self._selectedElementIndex.setData(i);
selectedElementIndex.setData(i);
});
elements[i].IsSelected.addCallback(isSelected => {
if (isSelected) {
self._selectedElementIndex.setData(i);
selectedElementIndex.setData(i);
}
})
elements[i].GetValue().addCallback(() => {
self._selectedElementIndex.setData(i);
selectedElementIndex.setData(i);
})
}
this.dumbMode = false;
const groupId = "radiogroup" + RadioButton._nextId
RadioButton._nextId++
const form = document.createElement("form")
this._element = form;
for (let i1 = 0; i1 < elements.length; i1++) {
let element = elements[i1];
const labelHtml = element.ConstructElement();
if (labelHtml === undefined) {
continue;
}
const input = document.createElement("input")
input.id = "radio" + groupId + "-" + i1;
input.name = groupId;
input.type = "radio"
const label = document.createElement("label")
label.appendChild(labelHtml)
label.htmlFor = input.id;
input.appendChild(label)
form.appendChild(input)
form.addEventListener("change", () => {
// TODO FIXME
}
);
}
this.value = value;
this._elements = elements;
}
@ -65,25 +97,11 @@ export class RadioButton<T> extends InputElement<T> {
}
private IdFor(i) {
return 'radio-' + this.id + '-' + i;
}
InnerRender(): string {
let body = "";
for (let i = 0; i < this._elements.length; i++){
const el = this._elements[i];
const htmlElement =
`<label for="${this.IdFor(i)}" class="question-option-with-border">` +
`<input type="radio" id="${this.IdFor(i)}" name="radiogroup-${this.id}">` +
el.Render() +
`</label>`;
body += htmlElement;
}
return `<form id='${this.id}-form'>${body}</form>`;
protected InnerConstructElement(): HTMLElement {
return this._element;
}
/*
public ShowValue(t: T): boolean {
if (t === undefined) {
return false;
@ -104,48 +122,7 @@ export class RadioButton<T> extends InputElement<T> {
}
}
}
InnerUpdate(htmlElement: HTMLElement) {
const self = this;
function checkButtons() {
for (let i = 0; i < self._elements.length; i++) {
const el = document.getElementById(self.IdFor(i));
// @ts-ignore
if (el.checked) {
self._selectedElementIndex.setData(i);
}
}
}
const el = document.getElementById(this.id);
el.addEventListener("change",
function () {
checkButtons();
}
);
if (this._selectedElementIndex.data !== null) {
const el = document.getElementById(this.IdFor(this._selectedElementIndex.data));
if (el) {
// @ts-ignore
el.checked = true;
checkButtons();
}
} else if (this._selectFirstAsDefault) {
this.ShowValue(this.value.data);
if (this._selectedElementIndex.data === null || this._selectedElementIndex.data === undefined) {
const el = document.getElementById(this.IdFor(0));
if (el) {
// @ts-ignore
el.checked = true;
checkButtons();
}
}
}
};
}*/
}

8
UI/Input/Toggle.ts
View file

@ -15,9 +15,13 @@ export default class Toggle extends VariableUiElement{
isEnabled.map(isEnabled => isEnabled ? showEnabled : showDisabled)
);
this.isEnabled = isEnabled
}
public ToggleOnClick(): Toggle{
const self = this;
this.onClick(() => {
isEnabled.setData(!isEnabled.data);
self. isEnabled.setData(!self.isEnabled.data);
})
return this;
}
}