import { UIElement } from "../UIElement" import BaseUIElement from "../BaseUIElement" import { Store } from "../../Logic/UIEventSource" import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig" import Img from "../Base/Img" import { SubtleButton } from "../Base/SubtleButton" import Toggle from "../Input/Toggle" import Locale from "../i18n/Locale" import { Utils } from "../../Utils" import Svg from "../../Svg" import Translations from "../i18n/Translations" import { Translation } from "../i18n/Translation" interface ExtraLinkButtonState { layout: { id: string; title: Translation } featureSwitches: { featureSwitchWelcomeMessage: Store } mapProperties: { location: Store<{ lon: number; lat: number }> zoom: Store } } export default class ExtraLinkButton extends UIElement { private readonly _config: ExtraLinkConfig private readonly state: ExtraLinkButtonState constructor(state: ExtraLinkButtonState, config: ExtraLinkConfig) { super() this.state = state this._config = config } protected InnerRender(): BaseUIElement { if (this._config === undefined) { return undefined } const c = this._config const isIframe = window !== window.top if (c.requirements?.has("iframe") && !isIframe) { return undefined } if (c.requirements?.has("no-iframe") && isIframe) { return undefined } let link: BaseUIElement const theme = this.state.layout?.id ?? "" const basepath = window.location.host const href = this.state.mapProperties.location.map( (loc) => { const subs = { ...loc, theme: theme, basepath, language: Locale.language.data, } return Utils.SubstituteKeys(c.href, subs) }, [this.state.mapProperties.zoom] ) let img: BaseUIElement = Svg.pop_out_svg() if (c.icon !== undefined) { img = new Img(c.icon).SetClass("h-6") } let text: Translation if (c.text === undefined) { text = Translations.t.general.screenToSmall.Subs({ theme: this.state.layout.title, }) } else { text = c.text.Clone() } link = new SubtleButton(img, text, { url: href, newTab: c.newTab, }) if (c.requirements?.has("no-welcome-message")) { link = new Toggle( undefined, link, this.state.featureSwitches.featureSwitchWelcomeMessage ) } if (c.requirements?.has("welcome-message")) { link = new Toggle( link, undefined, this.state.featureSwitches.featureSwitchWelcomeMessage ) } return link } }