Merge master

src/UI/BigComponents/ShareScreen.svelte

@@ -1,108 +1,105 @@
-<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
- */
+<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";
+  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;
+  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 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);
+  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,
+    })
+  }
 
-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;
-}
+  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}>
+      <button class="h-8 w-8 shrink-0 p-1" 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}>
+      <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
         <DocumentDuplicateIcon />
       </button>
     {/if}
-    <div class="literal-code" on:click={e => Utils.selectTextIn(e.target)}>
+    <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} />
 
-  <Tr t={ tr.embedIntro} />
-
-
-  <div class="flex flex-col my-1 link-underline">
-
+  <div class="link-underline my-1 flex flex-col">
     <label>
       <input bind:checked={showWelcomeMessage} type="checkbox" />
       <Tr t={tr.fsWelcomeMessage} />
     </label>
 
-
     <label>
       <input bind:checked={enableLogin} type="checkbox" />
       <Tr t={tr.fsUserbadge} />
@@ -111,11 +108,15 @@ async function copyCurrentLink() {
 
   <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;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"/>
+  <Tr t={tr.documentation} cls="link-underline" />
 </div>

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -45,7 +45,7 @@
     <Tr t={layout.description} />
     <Tr t={Translations.t.general.welcomeExplanation.general} />
     {#if layout.layers.some((l) => l.presets?.length > 0)}
-        <Tr t={Translations.t.general.welcomeExplanation.addNew} />
+      <Tr t={Translations.t.general.welcomeExplanation.addNew} />
     {/if}
 
     <Tr t={layout.descriptionTail} />

src/UI/InputElement/Validators.ts

@@ -18,7 +18,7 @@ import ColorValidator from "./Validators/ColorValidator"
 import BaseUIElement from "../BaseUIElement"
 import Combine from "../Base/Combine"
 import Title from "../Base/Title"
-import FediverseValidator from "./Validators/FediverseValidator";
+import FediverseValidator from "./Validators/FediverseValidator"
 
 export type ValidatorType = (typeof Validators.availableTypes)[number]
 
@@ -40,7 +40,7 @@ export default class Validators {
         "phone",
         "opening_hours",
         "color",
-        "fediverse"
+        "fediverse",
     ] as const
 
     public static readonly AllValidators: ReadonlyArray<Validator> = [
@@ -60,7 +60,7 @@ export default class Validators {
         new PhoneValidator(),
         new OpeningHoursValidator(),
         new ColorValidator(),
-        new FediverseValidator()
+        new FediverseValidator(),
     ]
 
     private static _byType = Validators._byTypeConstructor()

src/UI/InputElement/Validators/FediverseValidator.ts

@@ -1,13 +1,15 @@
-import {Validator} from "../Validator"
-import {Translation} from "../../i18n/Translation";
-import Translations from "../../i18n/Translations";
+import { Validator } from "../Validator"
+import { Translation } from "../../i18n/Translation"
+import Translations from "../../i18n/Translations"
 
 export default class FediverseValidator extends Validator {
-
     public static readonly usernameAtServer: RegExp = /^@?(\w+)@((\w|\.)+)$/
 
     constructor() {
-        super("fediverse", "Validates fediverse addresses and normalizes them into `@username@server`-format");
+        super(
+            "fediverse",
+            "Validates fediverse addresses and normalizes them into `@username@server`-format"
+        )
     }
 
     /**
@@ -15,8 +17,8 @@ export default class FediverseValidator extends Validator {
      * @param s
      */
     reformat(s: string): string {
-        if(!s.startsWith("@")){
-            s = "@"+s
+        if (!s.startsWith("@")) {
+            s = "@" + s
         }
         if (s.match(FediverseValidator.usernameAtServer)) {
             return s
@@ -25,39 +27,38 @@ export default class FediverseValidator extends Validator {
             const url = new URL(s)
             const path = url.pathname
             if (path.match(/^\/\w+$/)) {
-                return `@${path.substring(1)}@${url.hostname}`;
+                return `@${path.substring(1)}@${url.hostname}`
             }
         } catch (e) {
             // Nothing to do here
         }
         return undefined
     }
-getFeedback(s: string): Translation | undefined {
-    const match = s.match(FediverseValidator.usernameAtServer)
-    console.log("Match:", match)
-    if (match) {
-        const host = match[2]
+    getFeedback(s: string): Translation | undefined {
+        const match = s.match(FediverseValidator.usernameAtServer)
+        console.log("Match:", match)
+        if (match) {
+            const host = match[2]
+            try {
+                const url = new URL("https://" + host)
+                return undefined
+            } catch (e) {
+                return Translations.t.validation.fediverse.invalidHost.Subs({ host })
+            }
+        }
         try {
-            const url = new URL("https://" + host)
-            return undefined
+            const url = new URL(s)
+            const path = url.pathname
+            if (path.match(/^\/\w+$/)) {
+                return undefined
+            }
         } catch (e) {
-            return Translations.t.validation.fediverse.invalidHost.Subs({host})
+            // Nothing to do here
         }
+        return Translations.t.validation.fediverse.feedback
     }
-    try {
-        const url = new URL(s)
-        const path = url.pathname
-        if (path.match(/^\/\w+$/)) {
-            return undefined
-        }
-    } catch (e) {
-        // Nothing to do here
-    }
-    return Translations.t.validation.fediverse.feedback
-}
 
     isValid(s): boolean {
-      return this.getFeedback(s) === undefined
-
+        return this.getFeedback(s) === undefined
     }
 }

src/UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-  import LoginToggle from "../../Base/LoginToggle.svelte";
-  import type { SpecialVisualizationState } from "../../SpecialVisualization";
-  import Translations from "../../i18n/Translations";
-  import Tr from "../../Base/Tr.svelte";
-  import { TrashIcon } from "@babeard/svelte-heroicons/mini";
-  import type { OsmId, OsmTags } from "../../../Models/OsmFeature";
-  import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig";
-  import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte";
-  import type { Feature } from "geojson";
-  import { UIEventSource } from "../../../Logic/UIEventSource";
-  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
-  import { TagsFilter } from "../../../Logic/Tags/TagsFilter";
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
-  import { TagUtils } from "../../../Logic/Tags/TagUtils";
-  import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction";
-  import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction";
-  import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction";
-  import Loading from "../../Base/Loading.svelte";
-  import { DeleteFlowState } from "./DeleteFlowState";
-  import { twJoin } from "tailwind-merge";
+  import LoginToggle from "../../Base/LoginToggle.svelte"
+  import type { SpecialVisualizationState } from "../../SpecialVisualization"
+  import Translations from "../../i18n/Translations"
+  import Tr from "../../Base/Tr.svelte"
+  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
+  import type { OsmId, OsmTags } from "../../../Models/OsmFeature"
+  import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig"
+  import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte"
+  import type { Feature } from "geojson"
+  import { UIEventSource } from "../../../Logic/UIEventSource"
+  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+  import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
+  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { TagUtils } from "../../../Logic/Tags/TagUtils"
+  import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
+  import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
+  import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
+  import Loading from "../../Base/Loading.svelte"
+  import { DeleteFlowState } from "./DeleteFlowState"
+  import { twJoin } from "tailwind-merge"
 
   export let state: SpecialVisualizationState
   export let deleteConfig: DeleteConfig

src/UI/ThemeViewGUI.svelte

@@ -1,57 +1,57 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../Logic/UIEventSource";
-  import { Map as MlMap } from "maplibre-gl";
-  import MaplibreMap from "./Map/MaplibreMap.svelte";
-  import FeatureSwitchState from "../Logic/State/FeatureSwitchState";
-  import MapControlButton from "./Base/MapControlButton.svelte";
-  import ToSvelte from "./Base/ToSvelte.svelte";
-  import If from "./Base/If.svelte";
-  import { GeolocationControl } from "./BigComponents/GeolocationControl";
-  import type { Feature } from "geojson";
-  import SelectedElementView from "./BigComponents/SelectedElementView.svelte";
-  import LayerConfig from "../Models/ThemeConfig/LayerConfig";
-  import Filterview from "./BigComponents/Filterview.svelte";
-  import ThemeViewState from "../Models/ThemeViewState";
-  import type { MapProperties } from "../Models/MapProperties";
-  import Geosearch from "./BigComponents/Geosearch.svelte";
-  import Translations from "./i18n/Translations";
-  import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+  import { Store, UIEventSource } from "../Logic/UIEventSource"
+  import { Map as MlMap } from "maplibre-gl"
+  import MaplibreMap from "./Map/MaplibreMap.svelte"
+  import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
+  import MapControlButton from "./Base/MapControlButton.svelte"
+  import ToSvelte from "./Base/ToSvelte.svelte"
+  import If from "./Base/If.svelte"
+  import { GeolocationControl } from "./BigComponents/GeolocationControl"
+  import type { Feature } from "geojson"
+  import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
+  import LayerConfig from "../Models/ThemeConfig/LayerConfig"
+  import Filterview from "./BigComponents/Filterview.svelte"
+  import ThemeViewState from "../Models/ThemeViewState"
+  import type { MapProperties } from "../Models/MapProperties"
+  import Geosearch from "./BigComponents/Geosearch.svelte"
+  import Translations from "./i18n/Translations"
+  import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
 
-  import Tr from "./Base/Tr.svelte";
-  import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte";
-  import FloatOver from "./Base/FloatOver.svelte";
-  import PrivacyPolicy from "./BigComponents/PrivacyPolicy";
-  import Constants from "../Models/Constants";
-  import TabbedGroup from "./Base/TabbedGroup.svelte";
-  import UserRelatedState from "../Logic/State/UserRelatedState";
-  import LoginToggle from "./Base/LoginToggle.svelte";
-  import LoginButton from "./Base/LoginButton.svelte";
-  import CopyrightPanel from "./BigComponents/CopyrightPanel";
-  import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte";
-  import ModalRight from "./Base/ModalRight.svelte";
-  import { Utils } from "../Utils";
-  import Hotkeys from "./Base/Hotkeys";
-  import { VariableUiElement } from "./Base/VariableUIElement";
-  import SvelteUIElement from "./Base/SvelteUIElement";
-  import OverlayToggle from "./BigComponents/OverlayToggle.svelte";
-  import LevelSelector from "./BigComponents/LevelSelector.svelte";
-  import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
-  import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
-  import Svg from "../Svg";
-  import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte";
-  import type { RasterLayerPolygon } from "../Models/RasterLayers";
-  import { AvailableRasterLayers } from "../Models/RasterLayers";
-  import RasterLayerOverview from "./Map/RasterLayerOverview.svelte";
-  import IfHidden from "./Base/IfHidden.svelte";
-  import { onDestroy } from "svelte";
-  import { OpenJosm } from "./BigComponents/OpenJosm";
-  import MapillaryLink from "./BigComponents/MapillaryLink.svelte";
-  import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte";
-  import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
-  import StateIndicator from "./BigComponents/StateIndicator.svelte";
-  import LanguagePicker from "./LanguagePicker";
-  import Locale from "./i18n/Locale";
-  import ShareScreen from "./BigComponents/ShareScreen.svelte";
+  import Tr from "./Base/Tr.svelte"
+  import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
+  import FloatOver from "./Base/FloatOver.svelte"
+  import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
+  import Constants from "../Models/Constants"
+  import TabbedGroup from "./Base/TabbedGroup.svelte"
+  import UserRelatedState from "../Logic/State/UserRelatedState"
+  import LoginToggle from "./Base/LoginToggle.svelte"
+  import LoginButton from "./Base/LoginButton.svelte"
+  import CopyrightPanel from "./BigComponents/CopyrightPanel"
+  import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
+  import ModalRight from "./Base/ModalRight.svelte"
+  import { Utils } from "../Utils"
+  import Hotkeys from "./Base/Hotkeys"
+  import { VariableUiElement } from "./Base/VariableUIElement"
+  import SvelteUIElement from "./Base/SvelteUIElement"
+  import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
+  import LevelSelector from "./BigComponents/LevelSelector.svelte"
+  import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
+  import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
+  import Svg from "../Svg"
+  import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
+  import type { RasterLayerPolygon } from "../Models/RasterLayers"
+  import { AvailableRasterLayers } from "../Models/RasterLayers"
+  import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
+  import IfHidden from "./Base/IfHidden.svelte"
+  import { onDestroy } from "svelte"
+  import { OpenJosm } from "./BigComponents/OpenJosm"
+  import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
+  import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
+  import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
+  import StateIndicator from "./BigComponents/StateIndicator.svelte"
+  import LanguagePicker from "./LanguagePicker"
+  import Locale from "./i18n/Locale"
+  import ShareScreen from "./BigComponents/ShareScreen.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -319,7 +319,7 @@
         <Tr t={Translations.t.general.sharescreen.title} />
       </div>
       <div class="m-2" slot="content4">
-        <ShareScreen {state}/>
+        <ShareScreen {state} />
       </div>
     </TabbedGroup>
   </FloatOver>