Chore: port 'extraLinkButton' to svelte

public/css/index-tailwind-output.css

@@ -785,6 +785,10 @@ video {
   margin: 1rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-3 {
   margin: 0.75rem;
 }
@@ -797,10 +801,6 @@ video {
   margin: 2rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
@@ -944,10 +944,6 @@ video {
   margin-left: 0.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -964,6 +960,10 @@ video {
   margin-left: 1rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
@@ -1163,10 +1163,6 @@ video {
   height: 20rem;
 }
 
-.h-1\/6 {
-  height: 16.666667%;
-}
-
 .h-56 {
   height: 14rem;
 }
@@ -1203,6 +1199,10 @@ video {
   width: 8rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1806,14 +1806,14 @@ video {
   background-repeat: repeat;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .p-0 {
   padding: 0px;
 }

src/UI/BigComponents/ExtraLinkButton.svelte

@@ -0,0 +1,56 @@
+<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
+  console.log(">>>",config)
+  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
-    }
-}

src/UI/Map/Icon.svelte

@@ -34,6 +34,7 @@
   import { LinkIcon } from "@babeard/svelte-heroicons/mini"
   import Square_rounded from "../../assets/svg/Square_rounded.svelte"
   import Bug from "../../assets/svg/Bug.svelte"
+  import Pop_out from "../../assets/svg/Pop_out.svelte"
 
   /**
    * Renders a single icon.
@@ -123,6 +124,9 @@
     <AddSmall {color} class={clss} />
   {:else if icon === "link"}
     <LinkIcon style="--svg-color: {color}" class={twMerge(clss, "apply-fill")} />
+  {:else if icon === "popout"}
+    <LinkIcon style="--svg-color: {color}" />
+
   {:else}
     <img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true" alt="" />
   {/if}

src/UI/ThemeViewGUI.svelte

@@ -34,7 +34,6 @@
   import { Utils } from "../Utils"
   import Hotkeys from "./Base/Hotkeys"
   import LevelSelector from "./BigComponents/LevelSelector.svelte"
-  import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
   import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
   import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
   import type { RasterLayerPolygon } from "../Models/RasterLayers"
@@ -73,6 +72,7 @@
   import PrivacyPolicy from "./BigComponents/PrivacyPolicy.svelte"
   import { BBox } from "../Logic/BBox"
   import ReviewsOverview from "./Reviews/ReviewsOverview.svelte"
+  import ExtraLinkButton from "./BigComponents/ExtraLinkButton.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -260,9 +260,7 @@
         />
       </MapControlButton>
     {/if}
-    <ToSvelte
-      construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
-    />
+    <ExtraLinkButton {state} />
     <UploadingImageCounter featureId="*" showThankYou={false} {state} />
     <PendingChangesIndicator {state} />
     <If condition={state.featureSwitchIsTesting}>