Fix: update and simplification of sharescreen, rename some feature switches, remove some no longer relevant feature switches

src/UI/BigComponents/ShareScreen.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">/**
+ * A screen showing:
+ * - A link to share the current view
+ * - Some query parameters that can be enabled/disabled
+ * - The code to embed MC as IFrame
+ */
+
+import ThemeViewState from "../../Models/ThemeViewState";
+import { QueryParameters } from "../../Logic/Web/QueryParameters";
+import Tr from "../Base/Tr.svelte";
+import Translations from "../i18n/Translations";
+import { Utils } from "../../Utils";
+import Svg from "../../Svg";
+import ToSvelte from "../Base/ToSvelte.svelte";
+import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline";
+
+export let state: ThemeViewState;
+const tr = Translations.t.general.sharescreen;
+
+let url = window.location;
+let linkToShare: string = undefined;
+/**
+ * In some cases (local deploys, custom themes), we need to set the URL to `/theme.html?layout=xyz` instead of `/xyz?...`
+ */
+let needsThemeRedirect = url.port !== "" || url.hostname.match(/^[0-9]/) || !state.layout.official;
+let layoutId = state.layout.id;
+let baseLink = url.protocol + "//" + url.host + "/" + (needsThemeRedirect ? "theme.html?layout=" + layoutId + "&" : layoutId + "?");
+
+let showWelcomeMessage = true;
+let enableLogin = true;
+$: {
+  const layout = state.layout;
+  let excluded = Utils.NoNull([
+    showWelcomeMessage ? undefined : "fs-welcome-message",
+    enableLogin ? undefined : "fs-enable-login"
+  ]);
+  linkToShare = baseLink + QueryParameters.GetParts(new Set(excluded))
+    .concat(excluded.map(k => k + "=" + false))
+    .join("&");
+  if (layout.definitionRaw !== undefined) {
+    linkToShare += "&userlayout=" + (layout.definedAtUrl ?? layout.id);
+  }
+}
+
+
+async function shareCurrentLink() {
+  await navigator.share({
+    title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
+    text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
+    url: linkToShare
+  });
+
+}
+
+
+let isCopied = false;
+
+async function copyCurrentLink() {
+  await navigator.clipboard.writeText(linkToShare);
+  isCopied = true;
+  await Utils.waitFor(5000);
+  isCopied = false;
+}
+
+</script>
+
+
+<div>
+
+  <Tr t={tr.intro} />
+  <div class="flex">
+    {#if typeof navigator?.share === "function"}
+      <button class="w-8 h-8 p-1 shrink-0" on:click={shareCurrentLink}>
+        <ToSvelte construct={Svg.share_svg()} />
+      </button>
+    {/if}
+    {#if navigator.clipboard !== undefined}
+      <button class="w-8 h-8 p-1  shrink-0 no-image-background" on:click={copyCurrentLink}>
+        <DocumentDuplicateIcon />
+      </button>
+    {/if}
+    <div class="literal-code" on:click={e => Utils.selectTextIn(e.target)}>
+      {linkToShare}
+    </div>
+  </div>
+
+  <div class="flex justify-center">
+
+    {#if isCopied}
+      <Tr t={tr.copiedToClipboard} cls="thanks m-2" />
+    {/if}
+  </div>
+
+
+  <Tr t={ tr.embedIntro} />
+
+
+  <div class="flex flex-col my-1 link-underline">
+
+    <label>
+      <input bind:checked={showWelcomeMessage} type="checkbox" />
+      <Tr t={tr.fsWelcomeMessage} />
+    </label>
+
+
+    <label>
+      <input bind:checked={enableLogin} type="checkbox" />
+      <Tr t={tr.fsUserbadge} />
+    </label>
+  </div>
+
+  <div class="literal-code m-1">
+    &lt;span class="literal-code iframe-code-block"&gt; <br />
+    &lt;iframe src="${url}" <br />
+    allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px" <br />
+    title="${state.layout.title?.txt ?? "MapComplete"  } with MapComplete"&gt; <br />
+    &lt;/iframe&gt; <br />
+    &lt;/span&gt;
+  </div>
+  <Tr t={tr.documentation} cls="link-underline"/>
+</div>