midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Formatting, remove old, unused code

Browse source
This commit is contained in:
pietervdvn 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.
*
*
* Assumes a read-only configuration, so it has no 'ListenTo'
*/
export default abstract class BaseUIElement {
protected _constructedHtmlElement: HTMLElement;
private clss: Set<string> = new Set<string>();
private style: string;
private _onClick: () => void;
private _onHover: UIEventSource<boolean>;
protected _constructedHtmlElement: HTMLElement;
protected abstract InnerConstructElement(): HTMLElement;
public onClick(f: (() => void)) {
this._onClick = f;
this.SetClass("clickable")
if(this._constructedHtmlElement !== undefined){
if (this._constructedHtmlElement !== undefined) {
this._constructedHtmlElement.onclick = f;
}
return this;
@ -38,12 +34,13 @@ export default abstract class BaseUIElement {
element.removeChild(element.firstChild);
}
const el = this.ConstructElement();
if(el !== undefined){
if (el !== undefined) {
element.appendChild(el)
}
return this;
}
/**
* Adds all the relevant classes, space seperated
*/
@ -55,7 +52,7 @@ export default abstract class BaseUIElement {
if (this.clss.has(clss)) {
continue;
}
if(c === undefined || c === ""){
if (c === undefined || c === "") {
continue;
}
this.clss.add(c);
@ -74,19 +71,19 @@ export default abstract class BaseUIElement {
}
return this;
}
public HasClass(clss: string): boolean{
public HasClass(clss: string): boolean {
return this.clss.has(clss)
}
public SetStyle(style: string): BaseUIElement {
this.style = style;
if(this._constructedHtmlElement !== undefined){
if (this._constructedHtmlElement !== undefined) {
this._constructedHtmlElement.style.cssText = style;
}
return this;
}
/**
* 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
}
if(this.InnerConstructElement === undefined){
throw "ERROR! This is not a correct baseUIElement: "+this.constructor.name
if (this.InnerConstructElement === undefined) {
throw "ERROR! This is not a correct baseUIElement: " + this.constructor.name
}
try{
try {
const el = this.InnerConstructElement();
if(el === undefined){
return undefined;
}
const el = this.InnerConstructElement();
this._constructedHtmlElement = el;
const style = this.style
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 (el === undefined) {
return undefined;
}
}
if (this._onClick !== undefined) {
const self = this;
el.onclick = (e) => {
// @ts-ignore
if (e.consumed) {
return;
this._constructedHtmlElement = el;
const style = this.style
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)
}
self._onClick();
// @ts-ignore
e.consumed = true;
}
el.style.pointerEvents = "all";
el.style.cursor = "pointer";
}
if (this._onHover !== undefined) {
const self = this;
el.addEventListener('mouseover', () => self._onHover.setData(true));
el.addEventListener('mouseout', () => self._onHover.setData(false));
}
if (this._onClick !== undefined) {
const self = this;
el.onclick = (e) => {
// @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) {
const self = this;
el.addEventListener('mouseover', () => self._onHover.setData(true));
el.addEventListener('mouseout', () => self._onHover.setData(false));
}
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){
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;
if(domExc){
console.log("An exception occured", domExc.code, domExc.message, domExc.name )
if (domExc) {
console.log("An exception occured", domExc.code, domExc.message, domExc.name)
}
console.error(e)
}
}
}
public AsMarkdown(): string{
throw "AsMarkdown is not implemented by "+this.constructor.name
public AsMarkdown(): string {
throw "AsMarkdown is not implemented by " + this.constructor.name
}
protected abstract InnerConstructElement(): HTMLElement;
}