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

More refactoring, stuff kindoff works

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-12 02:58:32 +02:00
parent 62f471df1e
commit 3943100e54
52 changed files with 635 additions and 1010 deletions
Download patch file Download diff file Expand all files Collapse all files

102
UI/Input/Checkboxes.ts
View file

@ -1,7 +1,6 @@
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import {UIElement} from "../UIElement";
import BaseUIElement from "../BaseUIElement";
/**
@ -10,20 +9,57 @@ import BaseUIElement from "../BaseUIElement";
export default class CheckBoxes extends InputElement<number[]> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>;
private readonly _elements: BaseUIElement[]
private readonly _element : HTMLElement
constructor(elements: BaseUIElement[]) {
private static _nextId = 0;
private readonly value: UIEventSource<number[]>
constructor(elements: BaseUIElement[], value =new UIEventSource<number[]>([])) {
super();
this._elements = Utils.NoNull(elements);
this.value = new UIEventSource<number[]>([])
this.value = value;
elements = Utils.NoNull(elements);
const el = document.createElement()
this._element = el;
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
input.type = "checkbox"
const label = document.createElement("label")
label.htmlFor = input.id
label.appendChild(inputI.ConstructElement())
value.addCallbackAndRun(selectedValues =>{
if(selectedValues === undefined){
return;
}
if(selectedValues.indexOf(i) >= 0){
input.checked = true;
}
})
input.onchange = () => {
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();
}
}
el.appendChild(input)
el.appendChild(document.createElement("br"))
}
}
@ -42,50 +78,6 @@ private readonly _element : HTMLElement
}
private IdFor(i) {
return 'checkmark-' + this.id + '-' + i;
}
InnerRender(): string {
let body = "";
for (let i = 0; i < this._elements.length; i++) {
let el = this._elements[i];
const htmlElement =
`<input type="checkbox" id="${this.IdFor(i)}"><label for="${this.IdFor(i)}">${el.Render()}</label><br/>`;
body += htmlElement;
}
return `<form id='${this.id}'>${body}</form>`;
}
protected InnerUpdate(htmlElement: HTMLElement) {
const self = this;
for (let i = 0; i < this._elements.length; i++) {
const el = document.getElementById(this.IdFor(i));
if(this.value.data.indexOf(i) >= 0){
// @ts-ignore
el.checked = true;
}
el.onchange = () => {
const index = self.value.data.indexOf(i);
// @ts-ignore
if(el.checked && index < 0){
self.value.data.push(i);
self.value.ping();
}else if(index >= 0){
self.value.data.splice(index,1);
self.value.ping();
}
}
}
}
}

14
UI/Input/DropDown.ts
View file

@ -21,7 +21,7 @@ export class DropDown<T> extends InputElement<T> {
}
) {
super();
this._values = values;
this._values = values;
if (values.length <= 1) {
return;
}
@ -36,9 +36,11 @@ this._values = values;
{
const labelEl = Translations.W(label).ConstructElement()
const labelHtml = document.createElement("label")
labelHtml.appendChild(labelEl)
labelHtml.htmlFor = el.id;
if (labelEl !== undefined) {
const labelHtml = document.createElement("label")
labelHtml.appendChild(labelEl)
labelHtml.htmlFor = el.id;
}
}
@ -56,14 +58,14 @@ this._values = values;
var index = select.selectedIndex;
value.setData(values[index].value);
});
value.addCallbackAndRun(selected => {
for (let i = 0; i < values.length; i++) {
const value = values[i].value;
if (value === selected) {
select.selectedIndex = i;
}
}
}
})
}

62
UI/Input/FileSelectorButton.ts Normal file
View file

@ -0,0 +1,62 @@
import BaseUIElement from "../BaseUIElement";
import {InputElement} from "../Input/InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class FileSelectorButton extends InputElement<FileList> {
IsSelected: UIEventSource<boolean>;
private readonly _value = new UIEventSource(undefined);
private readonly _label: BaseUIElement;
private readonly _acceptType: string;
constructor(label: BaseUIElement, acceptType: string = "image/*") {
super();
this._label = label;
this._acceptType = acceptType;
}
GetValue(): UIEventSource<FileList> {
return this._value;
}
IsValid(t: FileList): boolean {
return true;
}
protected InnerConstructElement(): HTMLElement {
const self = this;
const el = document.createElement("form")
{
const label = document.createElement("label")
label.appendChild(this._label.ConstructElement())
el.appendChild(label)
}
{
const actualInputElement = document.createElement("input");
actualInputElement.style.cssText = "display:none";
actualInputElement.type = "file";
actualInputElement.accept = this._acceptType;
actualInputElement.name = "picField";
actualInputElement.multiple = true;
actualInputElement.onchange = () => {
if (actualInputElement.files !== null) {
self._value.setData(actualInputElement.files)
}
}
el.addEventListener('submit', e => {
if (actualInputElement.files !== null) {
self._value.setData(actualInputElement.files)
}
e.preventDefault()
})
el.appendChild(actualInputElement)
}
return undefined;
}
}

66
UI/Input/TextField.ts
View file

@ -4,10 +4,9 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
export class TextField extends InputElement<string> {
private readonly value: UIEventSource<string>;
public readonly enterPressed = new UIEventSource<string>(undefined);
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<string>;
private _element: HTMLElement;
private readonly _isValid: (s: string, country?: () => string) => boolean;
@ -19,6 +18,7 @@ export class TextField extends InputElement<string> {
inputMode?: string,
label?: BaseUIElement,
textAreaRows?: number,
inputStyle?: string,
isValid?: ((s: string, country?: () => string) => boolean)
}) {
super();
@ -26,39 +26,40 @@ export class TextField extends InputElement<string> {
options = options ?? {};
this.value = options?.value ?? new UIEventSource<string>(undefined);
this._isValid = options.isValid ?? (_ => true);
this.onClick(() => {
self.IsSelected.setData(true)
});
const placeholder = Translations.W(options.placeholder ?? "").ConstructElement().innerText.replace("'", "&#39");
const placeholder = Translations.W(options. placeholder ?? "").ConstructElement().innerText.replace("'", "&#39");
this.SetClass("form-text-field")
let inputEl : HTMLElement
if(options.htmlType === "area"){
let inputEl: HTMLElement
if (options.htmlType === "area") {
const el = document.createElement("textarea")
el.placeholder = placeholder
el.rows = options.textAreaRows
el.cols = 50
el.style.cssText = "max-width: 100%; width: 100%; box-sizing: border-box"
inputEl = el;
}else{
} else {
const el = document.createElement("input")
el.type = options.htmlType
el.inputMode = options.inputMode
el.type = options.htmlType ?? "text"
el.inputMode = options.inputMode
el.placeholder = placeholder
el.style.cssText = options.inputStyle
inputEl = el
}
const form = document.createElement("form")
form.appendChild(inputEl)
form.onsubmit = () => false;
if(options.label){
form.appendChild(options.label.ConstructElement())
}
if (options.label) {
form.appendChild(options.label.ConstructElement())
}
this._element = form;
const field = inputEl;
@ -70,9 +71,9 @@ export class TextField extends InputElement<string> {
}
// @ts-ignore
field.value = value;
if(self.IsValid(value)){
if (self.IsValid(value)) {
self.RemoveClass("invalid")
}else{
} else {
self.SetClass("invalid")
}
@ -82,7 +83,7 @@ export class TextField extends InputElement<string> {
// How much characters are on the right, not including spaces?
// @ts-ignore
const endDistance = field.value.substring(field.selectionEnd).replace(/ /g,'').length;
const endDistance = field.value.substring(field.selectionEnd).replace(/ /g, '').length;
// @ts-ignore
let val: string = field.value;
if (!self.IsValid(val)) {
@ -97,18 +98,18 @@ export class TextField extends InputElement<string> {
// @ts-ignore
val = field.value;
let newCursorPos = val.length - endDistance;
while(newCursorPos >= 0 &&
while (newCursorPos >= 0 &&
// We count the number of _actual_ characters (non-space characters) on the right of the new value
// This count should become bigger then the end distance
val.substr(newCursorPos).replace(/ /g, '').length < endDistance
){
newCursorPos --;
) {
newCursorPos--;
}
// @ts-ignore
TextField.SetCursorPosition(newCursorPos);
};
field.addEventListener("focusin", () => self.IsSelected.setData(true));
field.addEventListener("focusout", () => self.IsSelected.setData(false));
@ -118,22 +119,13 @@ export class TextField extends InputElement<string> {
// @ts-ignore
self.enterPressed.setData(field.value);
}
});
}
});
GetValue(): UIEventSource<string> {
return this.value;
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
private static SetCursorPosition(textfield: HTMLElement, i: number) {
if(textfield === undefined || textfield === null){
if (textfield === undefined || textfield === null) {
return;
}
if (i === -1) {
@ -146,6 +138,10 @@ export class TextField extends InputElement<string> {
}
GetValue(): UIEventSource<string> {
return this.value;
}
IsValid(t: string): boolean {
if (t === undefined || t === null) {
return false
@ -153,4 +149,8 @@ export class TextField extends InputElement<string> {
return this._isValid(t, undefined);
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
}

7
UI/Input/Toggle.ts
View file

@ -10,12 +10,13 @@ export default class Toggle extends VariableUiElement{
public readonly isEnabled: UIEventSource<boolean>;
constructor(showEnabled: string | BaseUIElement, showDisabled: string | BaseUIElement, data: UIEventSource<boolean> = new UIEventSource<boolean>(false)) {
constructor(showEnabled: string | BaseUIElement, showDisabled: string | BaseUIElement, isEnabled: UIEventSource<boolean> = new UIEventSource<boolean>(false)) {
super(
data.map(isEnabled => isEnabled ? showEnabled : showDisabled)
isEnabled.map(isEnabled => isEnabled ? showEnabled : showDisabled)
);
this.isEnabled = isEnabled
this.onClick(() => {
data.setData(!data.data);
isEnabled.setData(!isEnabled.data);
})
}