mapcomplete/UI/FullScreenMessageBoxHandler.ts

96 lines
3 KiB
TypeScript
Raw Normal View History

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 {
2020-09-12 23:15:17 +02:00
private static readonly _toTheMap_height : string = "5em";
private _uielement: UIElement;
2020-09-12 23:15:17 +02:00
private readonly returnToTheMap: UIElement;
constructor(onClear: (() => void)) {
super(undefined);
const self = this;
2020-09-12 23:15:17 +02:00
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
"display:block;"+
"padding: 1em;"+
"padding-bottom:5em;"+
`margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
"box-sizing:border-box;"+
`height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
"overflow-y: auto;" +
"background:white;"
);
});
2020-09-12 23:15:17 +02:00
this.ListenTo(State.state.fullScreenMessage);
2020-09-12 23:15:17 +02:00
this.HideOnEmpty(true);
State.state.fullScreenMessage.addCallback(latestData => {
if (latestData === undefined) {
location.hash = "";
} else {
2020-09-12 23:15:17 +02:00
// 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();
})
2020-07-25 18:00:08 +02:00
if (window !== undefined) {
window.onhashchange = function () {
if (location.hash === "") {
// No more element: back to the map!
2020-09-05 01:40:43 +02:00
self._uielement?.setData(undefined);
2020-07-25 18:00:08 +02:00
onClear();
}
2020-06-29 03:12:44 +02:00
}
}
2020-09-12 23:15:17 +02:00
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")
2020-07-21 00:07:04 +02:00
.onClick(() => {
console.log("Returning...")
State.state.fullScreenMessage.setData(undefined);
2020-07-21 00:07:04 +02:00
onClear();
self.Update();
});
2020-06-29 03:12:44 +02:00
}
2020-06-29 03:12:44 +02:00
InnerRender(): string {
2020-09-12 23:15:17 +02:00
if (State.state.fullScreenMessage.data === undefined) {
return "";
}
2020-09-12 23:15:17 +02:00
return new Combine([this._uielement, this.returnToTheMap])
.Render();
}
}