mapcomplete/UI/BigComponents/ExtraLinkButton.ts

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<boolean> },
    mapProperties: {
        location: Store<{ lon: number, lat: number }>;
        zoom: Store<number>
    }
}
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
    }
}