mapcomplete/UI/MessageBoxHandler.ts

/**
 * Keeps 'messagebox' and 'messageboxmobile' in sync, shows a 'close' button on the latter one
 */
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "./UIElement";
import {VariableUiElement} from "./Base/VariableUIElement";

export class MessageBoxHandler {
    private _uielement: UIEventSource<UIElement>;

    constructor(uielement: UIEventSource<UIElement>,
                onClear: (() => void)) {
        this._uielement = uielement;
        this.listenTo(uielement);
        this.update();

        window.onhashchange = function () {
            if (location.hash === "") {
                // No more element: back to the map!
                uielement.setData(undefined);
                onClear();
            }
        }

        new VariableUiElement(new UIEventSource<string>("<h2>Return to the map</h2>"))
            .onClick(() => {
                console.log("Clicked 'return to the map'")
                uielement.setData(undefined);
                onClear();
            })
            .AttachTo("to-the-map");


    }

    listenTo(uiEventSource: UIEventSource<any>) {
        const self = this;
        uiEventSource.addCallback(function () {
            self.update();
        })
    }


    update() {
        const wrapper = document.getElementById("messagesboxmobilewrapper");
        const gen = this._uielement.data;
        if (gen === undefined) {
            wrapper.classList.add("hidden")
            if (location.hash !== "") {
                location.hash = ""
            }
            return;
        }
        location.hash = "#element"
        wrapper.classList.remove("hidden");

        gen
            ?.HideOnEmpty(true)
            ?.AttachTo("messagesboxmobile")
            ?.Activate();


    }

}