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 static readonly _toTheMap_height : string = "5em"; private _uielement: UIElement; private readonly returnToTheMap: UIElement; constructor(onClear: (() => void)) { super(State.state.fullScreenMessage); const self = this; State.state.fullScreenMessage.addCallbackAndRun(uiElement => { this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle( "display:block;"+ "padding: 1em;"+ "padding-bottom:6em;"+ `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+ "box-sizing:border-box;"+ `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+ "overflow-y: auto;" + "max-width:100vw;" + "overflow-x:hidden;" + "background:white;" ); }); this.HideOnEmpty(true); State.state.fullScreenMessage.addCallback(latestData => { if (latestData === undefined) { location.hash = ""; } else { // The 'hash' makes sure a new piece of history is added. This makes the 'back-button' on android remove the popup location.hash = "#element"; } this.Update(); }) if (window !== undefined) { window.onhashchange = function () { if (location.hash === "") { // No more element: back to the map! console.log("Clearing full screen message"); State.state.fullScreenMessage.setData(undefined); onClear(); } } } this.returnToTheMap = new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")]) .SetStyle("background:#7ebc6f;" + "position: fixed;" + "z-index: 10000;" + "bottom: 0;" + "left: 0;" + `height: ${FullScreenMessageBox._toTheMap_height};` + "width: 100vw;" + "color: white;" + "font-weight: bold;" + "pointer-events: all;" + "cursor: pointer;" + "padding-top: 1.2em;" + "text-align: center;" + "padding-bottom: 1.2em;" + "box-sizing:border-box") .onClick(() => { console.log("Returning...") State.state.fullScreenMessage.setData(undefined); onClear(); self.Update(); }); } InnerRender(): string { if (State.state.fullScreenMessage.data === undefined) { return ""; } return new Combine([this._uielement, this.returnToTheMap]) .Render(); } }