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

Formatting, remove old, unused code

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-23 02:14:15 +02:00
parent a365172e0c
commit 89df28ae06
1 changed files with 62 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
UI/BaseUIElement.ts
View file

@ -3,25 +3,21 @@ import {UIEventSource} from "../Logic/UIEventSource";
/** /**
* A thin wrapper around a html element, which allows to generate a HTML-element. * A thin wrapper around a html element, which allows to generate a HTML-element.
* *
* Assumes a read-only configuration, so it has no 'ListenTo' * Assumes a read-only configuration, so it has no 'ListenTo'
*/ */
export default abstract class BaseUIElement { export default abstract class BaseUIElement {
protected _constructedHtmlElement: HTMLElement;
private clss: Set<string> = new Set<string>(); private clss: Set<string> = new Set<string>();
private style: string; private style: string;
private _onClick: () => void; private _onClick: () => void;
private _onHover: UIEventSource<boolean>; private _onHover: UIEventSource<boolean>;
protected _constructedHtmlElement: HTMLElement;
protected abstract InnerConstructElement(): HTMLElement;
public onClick(f: (() => void)) { public onClick(f: (() => void)) {
this._onClick = f; this._onClick = f;
this.SetClass("clickable") this.SetClass("clickable")
if(this._constructedHtmlElement !== undefined){ if (this._constructedHtmlElement !== undefined) {
this._constructedHtmlElement.onclick = f; this._constructedHtmlElement.onclick = f;
} }
return this; return this;
@ -38,12 +34,13 @@ export default abstract class BaseUIElement {
element.removeChild(element.firstChild); element.removeChild(element.firstChild);
} }
const el = this.ConstructElement(); const el = this.ConstructElement();
if(el !== undefined){ if (el !== undefined) {
element.appendChild(el) element.appendChild(el)
} }
return this; return this;
} }
/** /**
* Adds all the relevant classes, space seperated * Adds all the relevant classes, space seperated
*/ */
@ -55,7 +52,7 @@ export default abstract class BaseUIElement {
if (this.clss.has(clss)) { if (this.clss.has(clss)) {
continue; continue;
} }
if(c === undefined || c === ""){ if (c === undefined || c === "") {
continue; continue;
} }
this.clss.add(c); this.clss.add(c);
@ -74,19 +71,19 @@ export default abstract class BaseUIElement {
} }
return this; return this;
} }
public HasClass(clss: string): boolean{ public HasClass(clss: string): boolean {
return this.clss.has(clss) return this.clss.has(clss)
} }
public SetStyle(style: string): BaseUIElement { public SetStyle(style: string): BaseUIElement {
this.style = style; this.style = style;
if(this._constructedHtmlElement !== undefined){ if (this._constructedHtmlElement !== undefined) {
this._constructedHtmlElement.style.cssText = style; this._constructedHtmlElement.style.cssText = style;
} }
return this; return this;
} }
/** /**
* The same as 'Render', but creates a HTML element instead of the HTML representation * The same as 'Render', but creates a HTML element instead of the HTML representation
*/ */
@ -99,68 +96,71 @@ export default abstract class BaseUIElement {
return this._constructedHtmlElement return this._constructedHtmlElement
} }
if(this.InnerConstructElement === undefined){ if (this.InnerConstructElement === undefined) {
throw "ERROR! This is not a correct baseUIElement: "+this.constructor.name throw "ERROR! This is not a correct baseUIElement: " + this.constructor.name
} }
try{ try {
const el = this.InnerConstructElement();
if(el === undefined){ const el = this.InnerConstructElement();
return undefined;
}
this._constructedHtmlElement = el; if (el === undefined) {
const style = this.style return undefined;
if (style !== undefined && style !== "") {
el.style.cssText = style
}
if (this.clss.size > 0) {
try{
el.classList.add(...Array.from(this.clss))
}catch(e){
console.error("Invalid class name detected in:", Array.from(this.clss).join(" "),"\nErr msg is ",e)
} }
}
if (this._onClick !== undefined) { this._constructedHtmlElement = el;
const self = this; const style = this.style
el.onclick = (e) => { if (style !== undefined && style !== "") {
// @ts-ignore el.style.cssText = style
if (e.consumed) { }
return; if (this.clss.size > 0) {
try {
el.classList.add(...Array.from(this.clss))
} catch (e) {
console.error("Invalid class name detected in:", Array.from(this.clss).join(" "), "\nErr msg is ", e)
} }
self._onClick();
// @ts-ignore
e.consumed = true;
} }
el.style.pointerEvents = "all";
el.style.cursor = "pointer";
}
if (this._onHover !== undefined) { if (this._onClick !== undefined) {
const self = this; const self = this;
el.addEventListener('mouseover', () => self._onHover.setData(true)); el.onclick = (e) => {
el.addEventListener('mouseout', () => self._onHover.setData(false)); // @ts-ignore
} if (e.consumed) {
return;
}
self._onClick();
// @ts-ignore
e.consumed = true;
}
el.style.pointerEvents = "all";
el.style.cursor = "pointer";
}
if (this._onHover !== undefined) { if (this._onHover !== undefined) {
const self = this; const self = this;
el.addEventListener('mouseover', () => self._onHover.setData(true)); el.addEventListener('mouseover', () => self._onHover.setData(true));
el.addEventListener('mouseout', () => self._onHover.setData(false)); el.addEventListener('mouseout', () => self._onHover.setData(false));
} }
return el}catch(e){ if (this._onHover !== undefined) {
const self = this;
el.addEventListener('mouseover', () => self._onHover.setData(true));
el.addEventListener('mouseout', () => self._onHover.setData(false));
}
return el
} catch (e) {
const domExc = e as DOMException; const domExc = e as DOMException;
if(domExc){ if (domExc) {
console.log("An exception occured", domExc.code, domExc.message, domExc.name ) console.log("An exception occured", domExc.code, domExc.message, domExc.name)
} }
console.error(e) console.error(e)
} }
} }
public AsMarkdown(): string{ public AsMarkdown(): string {
throw "AsMarkdown is not implemented by "+this.constructor.name throw "AsMarkdown is not implemented by " + this.constructor.name
} }
protected abstract InnerConstructElement(): HTMLElement;
} }