mapcomplete/UI/Base/VariableUIElement.ts

import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";

export class VariableUiElement extends BaseUIElement {

    private _element : HTMLElement;
    
    constructor(contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>) {
        super();
        
        this._element = document.createElement("span")
        const el = this._element
        contents.addCallbackAndRun(contents => {
            while (el.firstChild) {
                el.removeChild(
                    el.lastChild
                )
            }

            if (contents === undefined) {
                return el;
            }
            if (typeof contents === "string") {
                el.innerHTML = contents
            } else if (contents instanceof Array) {
                for (const content of contents) {
                    const c = content.ConstructElement();
                    if (c !== undefined && c !== null) {
                        el.appendChild(c)  
                    }

                }
            } else {
                const c = contents.ConstructElement();
                if (c !== undefined && c !== null) {
                    el.appendChild(c)
                }
            }
        })
    }

    protected InnerConstructElement(): HTMLElement {
        return this._element;
    }

}