mapcomplete/UI/FullScreenMessageBoxHandler.ts

import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import State from "../State";
import Combine from "./Base/Combine";

/**
 * Handles the full screen popup on mobile
 */
export class FullScreenMessageBox extends UIElement {

    private readonly returnToTheMap: UIElement;
    private _content: UIElement;

    constructor(onClear: (() => void)) {
        super(State.state.fullScreenMessage);
        this.HideOnEmpty(true);

        this.returnToTheMap =
            new Combine([
                // Wrapped another time to prevent the value of 'em' to fluctuate
                Translations.t.general.returnToTheMap.Clone()
            ])
                .onClick(() => {
                    State.state.fullScreenMessage.setData(undefined);
                    onClear();
                })
                .SetClass("to-the-map")

    }


    InnerRender(): string {
        if (State.state.fullScreenMessage.data === undefined) {
            return "";
        }
        this._content = State.state.fullScreenMessage.data;
        const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")

        return new Combine([innerWrap, this.returnToTheMap])
            .SetStyle("display:block; height: 100%;")
            .Render();
    }

    protected InnerUpdate(htmlElement: HTMLElement) {
        super.InnerUpdate(htmlElement);
        const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
        htmlElement.style.setProperty("--variable-title-height", height+"px")
    }


}