import {UIElement} from "../UIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import LayerConfig from "../../Customizations/JSON/LayerConfig"; import EditableTagRendering from "./EditableTagRendering"; import QuestionBox from "./QuestionBox"; import Combine from "../Base/Combine"; import TagRenderingAnswer from "./TagRenderingAnswer"; import State from "../../State"; import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; import ScrollableFullScreen from "../Base/ScrollableFullScreen"; export default class FeatureInfoBox extends UIElement { private static featureInfoboxCache: Map, FeatureInfoBox>> = new Map, FeatureInfoBox>>(); private _component: ScrollableFullScreen; private constructor( tags: UIEventSource, layerConfig: LayerConfig, onClose: () => void ) { super(); if (layerConfig === undefined) { throw "Undefined layerconfig" } const title = FeatureInfoBox.GenerateTitleBar(tags, layerConfig); const contents = FeatureInfoBox.GenerateContent(tags, layerConfig); this._component = new ScrollableFullScreen(title, contents, onClose); } static construct(tags: UIEventSource, layer: LayerConfig, onClose: () => void) { let innerMap = FeatureInfoBox.featureInfoboxCache.get(layer); if (innerMap === undefined) { innerMap = new Map, FeatureInfoBox>(); FeatureInfoBox.featureInfoboxCache.set(layer, innerMap); } let featureInfoBox = innerMap.get(tags); if (featureInfoBox === undefined) { featureInfoBox = new FeatureInfoBox(tags, layer, onClose); innerMap.set(tags, featureInfoBox); } return featureInfoBox; } private static GenerateTitleBar(tags: UIEventSource, layerConfig: LayerConfig): UIElement { const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) .SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2"); const titleIcons = new Combine( layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon, "block w-8 h-8 align-baseline box-content sm:p-0.5", "width: 2rem !important;") .HideOnEmpty(true) )) .SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2") return new Combine([ new Combine([title, titleIcons]).SetClass("flex flex-col sm:flex-row flex-grow justify-between") ]) } private static GenerateContent(tags: UIEventSource, layerConfig: LayerConfig): UIElement { let questionBox: UIElement = undefined; if (State.state.featureSwitchUserbadge.data) { questionBox = new QuestionBox(tags, layerConfig.tagRenderings); } let questionBoxIsUsed = false; const renderings = layerConfig.tagRenderings.map(tr => { if (tr.question === null) { // This is the question box! questionBoxIsUsed = true; return questionBox; } return new EditableTagRendering(tags, tr); }); if (!questionBoxIsUsed) { renderings.push(questionBox); } const tail = new Combine([]).SetClass("only-on-mobile"); return new Combine([ ...renderings, tail.SetClass("featureinfobox-tail") ] ).SetClass("block") } InnerRender(): string { return this._component.Render(); } }