Formatting, remove old, unused code
This commit is contained in:
parent
a365172e0c
commit
89df28ae06
1 changed files with 62 additions and 62 deletions
|
@ -8,20 +8,16 @@ import {UIEventSource} from "../Logic/UIEventSource";
|
|||
*/
|
||||
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);
|
||||
|
@ -75,13 +72,13 @@ 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;
|
||||
|
@ -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();
|
||||
const el = this.InnerConstructElement();
|
||||
|
||||
if(el === undefined){
|
||||
return undefined;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
Loading…
Reference in a new issue