mapcomplete/UI/UIElement.ts

225 lines
6.3 KiB
TypeScript
Raw Normal View History

import {UIEventSource} from "../Logic/UIEventSource";
2020-06-24 00:35:19 +02:00
2020-09-02 11:37:34 +02:00
export abstract class UIElement extends UIEventSource<string> {
2020-06-24 00:35:19 +02:00
private static nextId: number = 0;
public readonly id: string;
public readonly _source: UIEventSource<any>;
private clss: string[] = []
2020-09-02 11:37:34 +02:00
private style: string;
private _hideIfEmpty = false;
2020-09-02 11:37:34 +02:00
public dumbMode = false;
2020-09-09 18:42:13 +02:00
private lastInnerRender: string;
2020-09-02 11:37:34 +02:00
/**
* In the 'deploy'-step, some code needs to be run by ts-node.
* However, ts-node crashes when it sees 'document'. When running from console, we flag this and disable all code where document is needed.
* This is a workaround and yet another hack
*/
public static runningFromConsole = false;
2020-06-24 00:35:19 +02:00
protected constructor(source: UIEventSource<any> = undefined) {
2020-07-27 01:19:38 +02:00
super("");
2020-06-24 00:35:19 +02:00
this.id = "ui-element-" + UIElement.nextId;
this._source = source;
UIElement.nextId++;
this.ListenTo(source);
}
2020-07-08 13:12:23 +02:00
public ListenTo(source: UIEventSource<any>) {
2020-07-01 02:12:33 +02:00
if (source === undefined) {
2020-07-21 01:37:48 +02:00
return this;
2020-06-24 00:35:19 +02:00
}
2020-09-02 11:37:34 +02:00
this.dumbMode = false;
2020-06-24 00:35:19 +02:00
const self = this;
source.addCallback(() => {
2020-09-09 18:42:13 +02:00
self.lastInnerRender = undefined;
2020-06-24 00:35:19 +02:00
self.Update();
})
2020-07-21 01:37:48 +02:00
return this;
2020-06-24 00:35:19 +02:00
}
2020-07-01 02:12:33 +02:00
private _onClick: () => void;
public onClick(f: (() => void)) {
2020-09-02 11:37:34 +02:00
this.dumbMode = false;
2020-07-01 02:12:33 +02:00
this._onClick = f;
this.SetClass("clickable")
2020-07-01 02:12:33 +02:00
this.Update();
return this;
2020-07-01 02:12:33 +02:00
}
2020-09-02 11:37:34 +02:00
private _onHover: UIEventSource<boolean>;
public IsHovered(): UIEventSource<boolean> {
this.dumbMode = false;
if (this._onHover !== undefined) {
return this._onHover;
}
// Note: we just save it. 'Update' will register that an eventsource exist and install the necessary hooks
this._onHover = new UIEventSource<boolean>(false);
return this._onHover;
}
2020-06-24 00:35:19 +02:00
Update(): void {
2020-09-02 11:37:34 +02:00
if (UIElement.runningFromConsole) {
return;
2020-07-25 18:00:08 +02:00
}
2020-07-01 02:12:33 +02:00
let element = document.getElementById(this.id);
2020-07-21 00:07:04 +02:00
if (element === undefined || element === null) {
2020-06-24 00:35:19 +02:00
// The element is not painted
2020-09-02 11:37:34 +02:00
if (this.dumbMode) {
// We update all the children anyway
for (const i in this) {
const child = this[i];
if (child instanceof UIElement) {
child.Update();
} else if (child instanceof Array) {
for (const ch of child) {
if (ch instanceof UIElement) {
ch.Update();
}
}
}
}
}
2020-06-24 00:35:19 +02:00
return;
}
2020-09-10 21:06:56 +02:00
const newRender = this.InnerRender();
if (newRender !== this.lastInnerRender) {
this.setData(this.InnerRender());
element.innerHTML = this.data;
this.lastInnerRender = newRender;
}
2020-09-02 11:37:34 +02:00
2020-07-01 02:12:33 +02:00
if (this._hideIfEmpty) {
if (element.innerHTML === "") {
element.parentElement.style.display = "none";
2020-07-01 02:12:33 +02:00
} else {
element.parentElement.style.display = "block";
}
}
2020-07-01 02:12:33 +02:00
if (this._onClick !== undefined) {
const self = this;
2020-07-22 12:17:06 +02:00
element.onclick = (e) => {
2020-07-24 15:22:28 +02:00
// @ts-ignore
2020-09-02 11:37:34 +02:00
if (e.consumed) {
2020-07-22 12:17:06 +02:00
return;
}
2020-07-01 02:12:33 +02:00
self._onClick();
2020-07-24 15:22:28 +02:00
// @ts-ignore
2020-07-22 12:17:06 +02:00
e.consumed = true;
2020-07-01 02:12:33 +02:00
}
2020-07-01 21:21:29 +02:00
element.style.pointerEvents = "all";
2020-07-01 02:12:33 +02:00
element.style.cursor = "pointer";
}
2020-09-02 11:37:34 +02:00
if (this._onHover !== undefined) {
const self = this;
element.addEventListener('mouseover', () => self._onHover.setData(true));
element.addEventListener('mouseout', () => self._onHover.setData(false));
}
2020-06-24 00:35:19 +02:00
this.InnerUpdate(element);
2020-07-20 09:57:19 +02:00
for (const i in this) {
const child = this[i];
if (child instanceof UIElement) {
child.Update();
} else if (child instanceof Array) {
for (const ch of child) {
if (ch instanceof UIElement) {
ch.Update();
}
}
}
}
2020-06-24 00:35:19 +02:00
}
HideOnEmpty(hide : boolean){
this._hideIfEmpty = hide;
this.Update();
return this;
}
2020-06-24 00:35:19 +02:00
// Called after the HTML has been replaced. Can be used for css tricks
2020-07-20 21:39:07 +02:00
protected InnerUpdate(htmlElement: HTMLElement) {
}
2020-06-24 00:35:19 +02:00
Render(): string {
2020-09-09 18:42:13 +02:00
this.lastInnerRender = this.lastInnerRender ?? this.InnerRender();
2020-09-02 11:37:34 +02:00
if (this.dumbMode) {
2020-09-09 18:42:13 +02:00
return this.lastInnerRender;
2020-09-02 11:37:34 +02:00
}
let style = "";
if (this.style !== undefined && this.style !== "") {
style = `style="${this.style}"`;
}
2020-09-09 18:42:13 +02:00
return `<span class='uielement ${this.clss.join(" ")}' ${style} id='${this.id}'>${this.lastInnerRender}</span>`
2020-06-24 00:35:19 +02:00
}
AttachTo(divId: string) {
2020-09-02 11:37:34 +02:00
this.dumbMode = false;
2020-06-24 00:35:19 +02:00
let element = document.getElementById(divId);
2020-07-20 09:57:19 +02:00
if (element === null) {
throw "SEVERE: could not attach UIElement to " + divId;
}
2020-06-24 00:35:19 +02:00
element.innerHTML = this.Render();
this.Update();
return this;
2020-06-24 00:35:19 +02:00
}
2020-07-20 18:24:00 +02:00
public abstract InnerRender(): string;
2020-07-20 09:57:19 +02:00
public Activate(): UIElement {
2020-07-20 09:57:19 +02:00
for (const i in this) {
const child = this[i];
if (child instanceof UIElement) {
child.Activate();
} else if (child instanceof Array) {
for (const ch of child) {
if (ch instanceof UIElement) {
ch.Activate();
}
}
}
}
return this;
2020-07-20 09:57:19 +02:00
};
2020-06-24 00:35:19 +02:00
public IsEmpty(): boolean {
return this.InnerRender() === "";
}
public SetClass(clss: string): UIElement {
2020-09-02 11:37:34 +02:00
this.dumbMode = false;
if (this.clss.indexOf(clss) < 0) {
this.clss.push(clss);
}
this.Update();
return this;
}
2020-09-02 11:37:34 +02:00
public SetStyle(style: string): UIElement {
this.dumbMode = false;
this.style = style;
this.Update();
return this;
}
2020-07-20 15:54:50 +02:00
}
2020-06-24 00:35:19 +02:00
2020-07-29 15:05:19 +02:00