Merge branch 'develop' into feature/nsi

src/UI/BigComponents/ExtraLinkButton.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig"
+  import Locale from "../i18n/Locale"
+  import { Utils } from "../../Utils"
+  import Translations from "../i18n/Translations"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import Pop_out from "../../assets/svg/Pop_out.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Icon from "../Map/Icon.svelte"
+
+
+  export let state: SpecialVisualizationState
+  let theme = state.layout?.id ?? ""
+  let config: ExtraLinkConfig = state.layout.extraLink
+  const isIframe = window !== window.top
+  let basepath = window.location.host
+  let showWelcomeMessageSwitch = state.featureSwitches.featureSwitchWelcomeMessage
+
+  const t = Translations.t.general
+  const href = state.mapProperties.location.map(
+    (loc) => {
+      const subs = {
+        ...loc,
+        theme: theme,
+        basepath,
+        language: Locale.language.data
+      }
+      return Utils.SubstituteKeys(config.href, subs)
+    },
+    [state.mapProperties.zoom]
+  )
+</script>
+
+
+{#if config !== undefined &&
+!(config.requirements.has("iframe") && !isIframe) &&
+!(config.requirements.has("no-iframe") && isIframe) &&
+!(config.requirements.has("welcome-message") && !$showWelcomeMessageSwitch) &&
+!(config.requirements.has("no-welcome-message") && $showWelcomeMessageSwitch)}
+<div class="links-as-button">
+
+  <a href={$href} target={config.newTab ? "_blank" : ""} rel="noopener"
+     class="flex pointer-events-auto rounded-full border-black">
+
+    <Icon icon={config.icon} clss="w-6 h-6 m-2"/>
+
+    {#if config.text}
+      <Tr t={config.text} />
+    {:else}
+      <Tr t={t.screenToSmall.Subs({theme: state.layout.title})} />
+    {/if}
+
+  </a>
+</div>
+{/if}

src/UI/BigComponents/ExtraLinkButton.ts

@@ -1,101 +0,0 @@
-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
-    }
-}