Merge branch 'feature/climbing-layer' into kletterspots-develop

UI/FullScreenMessageBoxHandler.ts

@@ -16,26 +16,15 @@ export class FullScreenMessageBox extends UIElement {
         this.HideOnEmpty(true);
 
         this.returnToTheMap =
-            new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
-                .SetStyle("background:var(--catch-detail-color);" +
-                    "position: fixed;" +
-                    "z-index: 10000;" +
-                    "bottom: 0;" +
-                    "left: 0;" +
-                    `height: var(--return-to-the-map-height);` +
-                "width: 100vw;" +
-                "color: var(--catch-detail-color-contrast);" +
-                "font-weight: bold;" +
-                "pointer-events: all;" +
-                "cursor: pointer;" +
-                "padding-top: 1.2em;" +
-                "text-align: center;" +
-                "padding-bottom: 1.2em;" +
-                "box-sizing:border-box")
-            .onClick(() => {
-                State.state.fullScreenMessage.setData(undefined);
-                onClear();
-            });
+            new Combine([
+                // Wrapped another time to prevent the value of 'em' to fluctuate
+                Translations.t.general.returnToTheMap.Clone()
+            ])
+                .onClick(() => {
+                    State.state.fullScreenMessage.setData(undefined);
+                    onClear();
+                })
+                .SetClass("to-the-map")
 
     }
 
@@ -45,25 +34,18 @@ export class FullScreenMessageBox extends UIElement {
             return "";
         }
         this._content = State.state.fullScreenMessage.data;
-        const innerWrap = new Combine([this._content]).SetStyle(
-            "display: block;" +
-            "padding: 1em;" +
-            "padding-bottom: 6em; "
-        );
-        const uielement = new Combine([innerWrap]).SetStyle(
-            "display:block;" +
-            `margin-bottom: var(--return-to-the-map-height);` +
-            "box-sizing:border-box;" +
-            `height:calc(100vh - var(--return-to-the-map-height));` +
-            "overflow-y: auto;" +
-            "max-width:100vw;" +
-            "overflow-x:hidden;" +
-            "background:var(--background-color);" +
-            "color: var(--foreground-color);"
-        );
-        return new Combine([uielement, this.returnToTheMap])
+        const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")
+
+        return new Combine([innerWrap, this.returnToTheMap])
+            .SetStyle("display:block; height: 100%;")
             .Render();
     }
 
+    protected InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
+        htmlElement.style.setProperty("--variable-title-height", height+"px")
+    }
+
 
 }

UI/Popup/EditableTagRendering.ts

@@ -33,7 +33,7 @@ export default class EditableTagRendering extends UIElement {
         this.dumbMode = false;
 
         if (this._configuration.question !== undefined) {
-            if (State.state.featureSwitchUserbadge.data) {
+            if (State.state?.featureSwitchUserbadge?.data) {
                 // 2.3em total width
                 const self = this;
                 this._editButton =

UI/Popup/FeatureInfoBox.ts

@@ -44,9 +44,14 @@ export class FeatureInfoBox extends UIElement {
         return new Combine([
             new Combine([this._title, this._titleIcons])
                 .SetClass("featureinfobox-titlebar"),
-            ...this._renderings,
-            this._questionBox,
-        ]).Render();
+            new Combine([
+                    ...this._renderings,
+                    this._questionBox
+                ]
+            ).SetClass("featureinfobox-content"),
+        ]).SetClass("featureinfobox")
+            .Render();
     }
 
+
 }

UI/ShareButton.ts

@@ -0,0 +1,41 @@
+import {UIElement} from "./UIElement";
+
+export default class ShareButton extends UIElement{
+    private _embedded: UIElement;
+    private _shareData: { text: string; title: string; url: string };
+    
+    constructor(embedded: UIElement, shareData: {
+        text: string,
+        title: string,
+        url: string
+    }) {
+        super();
+        this._embedded = embedded;
+        this._shareData = shareData;
+        if(this._shareData.url.indexOf("#")> 0){
+            this._shareData.url = this._shareData.url.replace("#","&hash_content=");
+        }
+    }
+    
+    InnerRender(): string {
+        return `<button type="button" class="share-button" id="${this.id}">${this._embedded.Render()}</button>`
+    }
+
+    protected InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const self= this;
+        htmlElement.addEventListener('click', () => {
+            if (navigator.share) {
+                navigator.share(self._shareData).then(() => {
+                    console.log('Thanks for sharing!');
+                })
+                    .catch(err => {
+                        console.log(`Couldn't share because of`, err.message);
+                    });
+            } else {
+                console.log('web share not supported');
+            }
+        });
+    }
+
+}

UI/SpecialVisualizations.ts

@@ -9,6 +9,9 @@ import {FixedUiElement} from "./Base/FixedUiElement";
 import Locale from "../UI/i18n/Locale";
 import {ImageUploadFlow} from "./Image/ImageUploadFlow";
 import {Translation} from "./i18n/Translation";
+import State from "../State";
+import ShareButton from "./ShareButton";
+import Svg from "../Svg";
 
 export class SubstitutedTranslation extends UIElement {
     private readonly tags: UIEventSource<any>;
@@ -183,7 +186,36 @@ export default class SpecialVisualizations {
                     return new VariableUiElement(source.map(data => data[neededValue] ?? "Loading..."));
                 }
             },
+            {
+                funcName: "share_link",
+                docs: "Creates a link that (attempts to) open the native 'share'-screen",
+                example: "{share_link()} to share the current page, {share_link(<some_url>)} to share the given url",
+                args: [
+                    {
+                        name: "url",
+                        doc: "The url to share (defualt: current URL)",
+                    }
+                ],
+                constr: (tagSource: UIEventSource<any>, args) => {
+                    if (window.navigator.share) {
+                        const title = State.state.layoutToUse.data.title.txt;
+                        let name = tagSource.data.name;
+                        if(name){
+                            name = `${name} (${title})`
+                        }else{
+                            name = title;
+                        }
+                     return new ShareButton(Svg.share_svg(), {
+                         title: name,
+                         url: args[0] ?? window.location.href,
+                         text: State.state.layoutToUse.data.shortDescription.txt
+                     })
+                    } else {
+                        return new FixedUiElement("")
+                    }
 
+                }
+            }
 
         ]
     static HelpMessage: UIElement = SpecialVisualizations.GenHelpMessage();