forked from MapComplete/MapComplete
121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
/**
|
|
* A thin wrapper around a html element, which allows to generate a HTML-element.
|
|
*
|
|
* Assumes a read-only configuration, so it has no 'ListenTo'
|
|
*/
|
|
|
|
/* @deprecated
|
|
*/
|
|
export default abstract class BaseUIElement {
|
|
protected _constructedHtmlElement: HTMLElement
|
|
protected isDestroyed = false
|
|
protected readonly clss: Set<string> = new Set<string>()
|
|
protected style: string
|
|
private _onClick: () => void | Promise<void>
|
|
|
|
/**
|
|
* Adds all the relevant classes, space separated
|
|
*/
|
|
public SetClass(clss: string): this {
|
|
if (clss == undefined) {
|
|
return this
|
|
}
|
|
const all = clss.split(" ").map((clsName) => clsName.trim())
|
|
let recordedChange = false
|
|
for (let c of all) {
|
|
c = c.trim()
|
|
if (this.clss.has(clss)) {
|
|
continue
|
|
}
|
|
if (c === undefined || c === "") {
|
|
continue
|
|
}
|
|
this.clss.add(c)
|
|
recordedChange = true
|
|
}
|
|
if (recordedChange) {
|
|
this._constructedHtmlElement?.classList.add(...Array.from(this.clss))
|
|
}
|
|
return this
|
|
}
|
|
public SetStyle(style: string): this {
|
|
this.style = style
|
|
if (this._constructedHtmlElement !== undefined) {
|
|
this._constructedHtmlElement.style.cssText = style
|
|
}
|
|
return this
|
|
}
|
|
|
|
public ConstructElement(): HTMLElement {
|
|
if (typeof window === undefined) {
|
|
return undefined
|
|
}
|
|
|
|
if (this._constructedHtmlElement !== undefined) {
|
|
return this._constructedHtmlElement
|
|
}
|
|
|
|
try {
|
|
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 (this._onClick !== undefined) {
|
|
const self = this
|
|
el.onclick = async (e) => {
|
|
// @ts-ignore
|
|
if (e.consumed) {
|
|
return
|
|
}
|
|
const v = self._onClick()
|
|
if (typeof v === "object") {
|
|
await v
|
|
}
|
|
// @ts-ignore
|
|
e.consumed = true
|
|
}
|
|
el.classList.add("cursor-pointer")
|
|
}
|
|
|
|
return el
|
|
} catch (e) {
|
|
const domExc = e as DOMException
|
|
if (domExc) {
|
|
console.error(
|
|
"An exception occured",
|
|
domExc.code,
|
|
domExc.message,
|
|
domExc.name,
|
|
domExc
|
|
)
|
|
}
|
|
console.error(e)
|
|
}
|
|
}
|
|
|
|
public Destroy() {
|
|
this.isDestroyed = true
|
|
}
|
|
|
|
protected abstract InnerConstructElement(): HTMLElement
|
|
}
|