mapcomplete/UI/FullScreenMessageBoxHandler.ts

51 lines
1.6 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 readonly returnToTheMap: UIElement;
2020-11-15 14:56:20 +01:00
private _content: UIElement;
constructor(onClear: (() => void)) {
2020-11-16 01:59:30 +01:00
super(State.state.fullScreenMessage);
this.HideOnEmpty(true);
2020-06-29 03:12:44 +02:00
2020-09-12 23:15:17 +02:00
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")
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-11-15 14:56:20 +01:00
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%;")
2020-09-12 23:15:17 +02:00
.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")
}
}