Simplify and fix sharescreen: fix typos in iframe code, use state injection via constructor, remove UI-elements which are broken anyway

Models/Constants.ts

@@ -2,7 +2,7 @@ import {Utils} from "../Utils";
 
 export default class Constants {
 
-    public static vNumber = "0.11.2";
+    public static vNumber = "0.11.3";
     public static ImgurApiKey = '7070e7167f0a25a'
     public static readonly mapillary_client_token_v3 = 'TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2'
     public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -56,7 +56,7 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
         ]
 
         if (state.featureSwitchShareScreen.data) {
-            tabs.push({header: Svg.share_img, content: new ShareScreen()});
+            tabs.push({header: Svg.share_img, content: new ShareScreen(state)});
         }
 
         if (state.featureSwitchMoreQuests.data) {

UI/BigComponents/ShareScreen.ts

@@ -2,23 +2,18 @@ import {VariableUiElement} from "../Base/VariableUIElement";
 import {Translation} from "../i18n/Translation";
 import Svg from "../../Svg";
 import Combine from "../Base/Combine";
-import {SubtleButton} from "../Base/SubtleButton";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {Utils} from "../../Utils";
-import State from "../../State";
 import Toggle from "../Input/Toggle";
-import {FixedUiElement} from "../Base/FixedUiElement";
 import Translations from "../i18n/Translations";
-import Constants from "../../Models/Constants";
 import BaseUIElement from "../BaseUIElement";
-import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
+import MapState from "../../Logic/State/MapState";
 
 export default class ShareScreen extends Combine {
 
-    constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) {
+    constructor(state: MapState) {
-        layout = layout ?? State.state?.layoutToUse;
+        const layout = state?.layoutToUse;
-        layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
         const tr = Translations.t.general.sharescreen;
 
         const optionCheckboxes: BaseUIElement[] = []
@@ -39,7 +34,7 @@ export default class ShareScreen extends Combine {
         ).ToggleOnClick()
         optionCheckboxes.push(includeLocation);
 
-        const currentLocation = State.state?.locationControl;
+        const currentLocation = state.locationControl;
 
         optionParts.push(includeLocation.isEnabled.map((includeL) => {
             if (currentLocation === undefined) {
@@ -64,9 +59,8 @@ export default class ShareScreen extends Combine {
         }
 
 
-        if (State.state !== undefined) {
 
-            const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = State.state.backgroundLayer;
+            const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = state.backgroundLayer;
             const currentBackground = new VariableUiElement(currentLayer.map(layer => {
                 return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""});
             }));
@@ -94,13 +88,12 @@ export default class ShareScreen extends Combine {
 
             optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
                 if (includeLayerSelection) {
-                    return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
+                    return Utils.NoNull(state.filteredLayers.data.map(fLayerToParam)).join("&")
                 } else {
                     return null
                 }
-            }, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
+            }, state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
 
-        }
 
         const switches = [
             {urlName: "fs-userbadge", human: tr.fsUserbadge},
@@ -148,56 +141,22 @@ export default class ShareScreen extends Combine {
             let literalText = `https://${host}${path}/${layout.id.toLowerCase()}`
 
             const parts = Utils.NoEmpty(Utils.NoNull(optionParts.map((eventSource) => eventSource.data)));
-
-            let hash = "";
-            if (layoutDefinition !== undefined) {
-                literalText = `https://${host}${path}/`
-                if (layout.id.startsWith("http")) {
-                    parts.push("userlayout=" + encodeURIComponent(layout.id))
-                } else {
-                    hash = ("#" + layoutDefinition)
-                    parts.push("userlayout=true");
-                }
-            }
-
-
             if (parts.length === 0) {
-                return literalText + hash;
+                return literalText;
             }
-
+            return literalText + "?" + parts.join("&");
-            return literalText + "?" + parts.join("&") + hash;
         }, optionParts);
 
 
         const iframeCode = new VariableUiElement(
             url.map((url) => {
                 return `<span class='literal-code iframe-code-block'>
-                         &lt;iframe src="${url}" allow="geolocation" width="100%" height="100%" style="min-width: 25Opx; min-height: 250ox" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt 
+                         &lt;iframe src="${url}" allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt 
                     </span>`
             })
         );
 
 
-        let editLayout: BaseUIElement = new FixedUiElement("");
-        if ((layoutDefinition !== undefined && State.state?.osmConnection !== undefined)) {
-            editLayout =
-                new VariableUiElement(
-                    State.state.osmConnection.userDetails.map(
-                        userDetails => {
-                            if (userDetails.csCount <= Constants.userJourney.themeGeneratorReadOnlyUnlock) {
-                                return "";
-                            }
-
-                            return new SubtleButton(Svg.pencil_ui(),
-                                new Combine([tr.editThisTheme.Clone().SetClass("bold"), "<br/>",
-                                    tr.editThemeDescription.Clone()]),
-                                {url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true});
-
-                        }
-                    ));
-
-        }
-
         const linkStatus = new UIEventSource<string | Translation>("");
         const link = new VariableUiElement(
             url.map((url) => `<input type="text" value=" ${url}" id="code-link--copyable" style="width:90%">`)
@@ -239,7 +198,6 @@ export default class ShareScreen extends Combine {
 
 
         super([
-            editLayout,
             tr.intro.Clone(),
             link,
             new VariableUiElement(linkStatus),