Add share button (supported browsers only), refactoring of fullscreenmessage, fancier scrolling

InitUiElements.ts

@@ -299,7 +299,7 @@ export class InitUiElements {
         ]
 
         if (State.state.featureSwitchShareScreen.data) {
-            tabs.push({header: Svg.share, content: new ShareScreen()});
+            tabs.push({header: Svg.share_img, content: new ShareScreen()});
         }
 
         if (State.state.featureSwitchMoreQuests.data) {

State.ts

@@ -23,7 +23,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
 
-    public static vNumber = "0.2.1e";
+    public static vNumber = "0.2.2";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

Svg.ts

@@ -194,7 +194,7 @@ export default class Svg {
     public static search_svg() { return new FixedUiElement(Svg.search);}
     public static search_ui() { return new FixedUiElement(Svg.search_img);}
 
-    public static share = " <!-- Created with Inkscape (http://www.inkscape.org/) -->  <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"    xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"    width=\"100\"    height=\"100\"    viewBox=\"0 0 26.458333 26.458334\"    version=\"1.1\"    id=\"svg8\"    inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"    sodipodi:docname=\"share.svg\">   <defs      id=\"defs2\" />   <sodipodi:namedview      id=\"base\"      pagecolor=\"#ffffff\"      bordercolor=\"#666666\"      borderopacity=\"1.0\"      inkscape:pageopacity=\"0.0\"      inkscape:pageshadow=\"2\"      inkscape:zoom=\"4\"      inkscape:cx=\"-15.237738\"      inkscape:cy=\"36.323203\"      inkscape:document-units=\"px\"      inkscape:current-layer=\"layer1\"      showgrid=\"false\"      units=\"px\"      showguides=\"true\"      inkscape:guide-bbox=\"true\"      inkscape:window-width=\"1920\"      inkscape:window-height=\"1001\"      inkscape:window-x=\"0\"      inkscape:window-y=\"1050\"      inkscape:window-maximized=\"1\">     <sodipodi:guide        position=\"13.229167,23.859748\"        orientation=\"1,0\"        id=\"guide815\"        inkscape:locked=\"false\" />     <sodipodi:guide        position=\"14.944824,13.229167\"        orientation=\"0,1\"        id=\"guide817\"        inkscape:locked=\"false\" />     <sodipodi:guide        position=\"19.182291,3.4395834\"        orientation=\"1,0\"        id=\"guide852\"        inkscape:locked=\"false\" />   </sodipodi:namedview>   <metadata      id=\"metadata5\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />         <dc:title />       </cc:Work>     </rdf:RDF>   </metadata>   <g      inkscape:label=\"Layer 1\"      inkscape:groupmode=\"layer\"      id=\"layer1\"      transform=\"translate(0,-270.54165)\">     <path        style=\"fill: none !important;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"        d=\"m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669\"        id=\"path819\"        inkscape:connector-curvature=\"0\"        sodipodi:nodetypes=\"ccc\" />     <circle        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\"        id=\"path820\"        cx=\"7.2434282\"        cy=\"283.69574\"        r=\"3.9119694\" />     <circle        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\"        id=\"path820-3\"        cx=\"19.48818\"        cy=\"289.22873\"        r=\"3.9119689\" />     <circle        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\"        id=\"path820-3-6\"        cx=\"19.48818\"        cy=\"277.56281\"        r=\"3.9119689\" />   </g> </svg> "
+    public static share = " <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    id=\"svg8\"    version=\"1.1\"    viewBox=\"0 0 20.06869 19.489862\"    height=\"73.662468\"    width=\"75.850166\">   <defs      id=\"defs2\" />   <metadata      id=\"metadata5\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />         <dc:title></dc:title>       </cc:Work>     </rdf:RDF>   </metadata>   <g      transform=\"translate(-3.3314588,-273.65084)\"      id=\"layer1\">     <path        id=\"path819\"        d=\"m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669\"        style=\"fill: none !important;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke:#000000\" />     <circle        r=\"3.9119694\"        cy=\"283.69574\"        cx=\"7.2434282\"        id=\"path820\"        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" />     <circle        r=\"3.9119689\"        cy=\"289.22873\"        cx=\"19.48818\"        id=\"path820-3\"        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926\" />     <circle        r=\"3.9119689\"        cy=\"277.56281\"        cx=\"19.48818\"        id=\"path820-3-6\"        style=\"fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" />   </g> </svg> "
     public static share_img = Img.AsImageElement(Svg.share)
     public static share_svg() { return new FixedUiElement(Svg.share);}
     public static share_ui() { return new FixedUiElement(Svg.share_img);}

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")])
+            new Combine([
-                .SetStyle("background:var(--catch-detail-color);" +
+                // Wrapped another time to prevent the value of 'em' to fluctuate
-                    "position: fixed;" +
+                Translations.t.general.returnToTheMap.Clone()
-                    "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();
-            });
+                })
+                .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(
+        const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")
-            "display: block;" +
+
-            "padding: 1em;" +
+        return new Combine([innerWrap, this.returnToTheMap])
-            "padding-bottom: 6em; "
+            .SetStyle("display:block; height: 100%;")
-        );
-        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])
             .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/FeatureInfoBox.ts

@@ -53,4 +53,5 @@ export class FeatureInfoBox extends UIElement {
             .Render();
     }
 
+
 }

UI/SpecialVisualizations.ts

@@ -193,8 +193,7 @@ export default class SpecialVisualizations {
                 args: [
                     {
                         name: "url",
-                        doc: "The url to share",
+                        doc: "The url to share (defualt: current URL)",
-                        defaultValue: "{current_url()}"
                     }
                 ],
                 constr: (tagSource: UIEventSource<any>, args) => {
@@ -202,7 +201,7 @@ export default class SpecialVisualizations {
                         const title = State.state.layoutToUse.data.title.txt;
                         let name = tagSource.data.name;
                         if(name){
-                            name += `${name} (${title})`
+                            name = `${name} (${title})`
                         }else{
                             name = title;
                         }
@@ -212,7 +211,7 @@ export default class SpecialVisualizations {
                          text: State.state.layoutToUse.data.shortDescription.txt
                      })
                     } else {
-                        return new Combine(["<button type='button' class='share-button' style='background:red;'>",  Svg.share_svg() ,"</button>"])
+                        return new FixedUiElement("")
                     }
 
                 }

assets/svg/share.svg

@@ -1,60 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100"
-   height="100"
-   viewBox="0 0 26.458333 26.458334"
-   version="1.1"
    id="svg8"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   version="1.1"
-   sodipodi:docname="share.svg">
+   viewBox="0 0 20.06869 19.489862"
+   height="73.662468"
+   width="75.850166">
   <defs
      id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="4"
-     inkscape:cx="-15.237738"
-     inkscape:cy="36.323203"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1001"
-     inkscape:window-x="0"
-     inkscape:window-y="1050"
-     inkscape:window-maximized="1">
-    <sodipodi:guide
-       position="13.229167,23.859748"
-       orientation="1,0"
-       id="guide815"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="14.944824,13.229167"
-       orientation="0,1"
-       id="guide817"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="19.182291,3.4395834"
-       orientation="1,0"
-       id="guide852"
-       inkscape:locked="false" />
-  </sodipodi:namedview>
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -63,38 +20,34 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:label="Layer 1"
+     transform="translate(-3.3314588,-273.65084)"
-     inkscape:groupmode="layer"
+     id="layer1">
-     id="layer1"
-     transform="translate(0,-270.54165)">
     <path
-       style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
        id="path819"
-       inkscape:connector-curvature="0"
+       d="m 19.212364,278.17517 -11.9689358,5.52059 11.9388628,5.50669"
-       sodipodi:nodetypes="ccc" />
+       style="fill:none;stroke-width:2.43863511;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke:#000000" />
     <circle
-       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
+       r="3.9119694"
-       id="path820"
-       cx="7.2434282"
        cy="283.69574"
-       r="3.9119694" />
+       cx="7.2434282"
+       id="path820"
+       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
     <circle
-       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
+       r="3.9119689"
-       id="path820-3"
-       cx="19.48818"
        cy="289.22873"
-       r="3.9119689" />
-    <circle
-       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926"
-       id="path820-3-6"
        cx="19.48818"
+       id="path820-3"
+       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.97014926" />
+    <circle
+       r="3.9119689"
        cy="277.56281"
-       r="3.9119689" />
+       cx="19.48818"
+       id="path820-3-6"
+       style="fill-opacity:1;stroke:none;stroke-width:0.53329796;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
   </g>
 </svg>

assets/tagRenderings/icons.json

@@ -13,7 +13,7 @@
     "condition": "wikipedia~*"
   },
   "phonelink": {
-    "render": "<a href='tel:{phone}' target='_blank'><img src='./assets/svg/phone.svg'/></a>",
+    "render": "<a href='tel:{phone}'><img src='./assets/svg/phone.svg'/></a>",
     "condition": "phone~*"
   },
   "sharelink": {

css/fullscreenmessagebox.css

@@ -0,0 +1,57 @@
+.fullscreenmessage-content {
+    max-height: calc(100vh - var(--return-to-the-map-height));
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--background-color);
+    display: block;
+}
+
+.fullscreenmessage-content .featureinfobox {
+    padding: 1em;
+    position: relative;
+}
+
+.fullscreenmessage-content .featureinfobox-content {
+    padding: 1em;
+    top: var(--variable-title-height);
+    /* 2em extra: padding from the title */
+    max-height: calc(100vh - var(--variable-title-height) - var(--return-to-the-map-height) - 2em) !important;
+    display: block;
+    position: absolute;
+    overflow-y: auto;
+}
+
+.fullscreenmessage-content .featureinfobox-titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10001;
+    background-color: var(--background-color);
+    padding: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+    border-bottom: 2px solid var(--foreground-color);
+}
+
+.to-the-map span {
+    font-size: xx-large;
+}
+
+.to-the-map {
+    background: var(--catch-detail-color);
+    height: var(--return-to-the-map-height);
+    position: fixed;
+    z-index: 10000;
+    bottom: 0;
+    left: 0;
+    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;
+}

css/mobile.css

@@ -68,6 +68,7 @@ Contains tweaks for small screens
         position: absolute;
         z-index: 10000;
         width: 100vw;
+        height: 100vh;
     }
 
     #welcomeMessage {

css/tagrendering.css

@@ -16,6 +16,7 @@
 
 .featureinfobox-icons span {
     display: inline-block;
+    padding-right: 0.1em;
 }
 
 .featureinfobox-titlebar{
@@ -29,6 +30,7 @@
     display:block;
     max-height: 75vh;
     overflow-y: auto;
+    overflow-x: hidden;
 }
 @media only screen and (max-width: 600px), only screen and (max-height: 600px) {
     .featureinfobox-content {

index.css

@@ -10,6 +10,7 @@
     --shadow-color: #00000066;
     
     --return-to-the-map-height: 5em;
+    --variable-title-height: 0px; /*Set by javascript dynamically*/
 }
 
 html, body {
@@ -509,15 +510,17 @@ a {
     text-decoration: none;
     display: inline-block;
     border-radius: 3em;
-    width: 4em;
+    height: 2.5em;
-    height: 3em;
+    width: 2.5em;
     box-sizing: border-box;
+    padding:0;
 }
 
 .share-button svg {
-    max-height: 2.0em;
+    height: 1.5em;
-    width: 2.0em;
+    width: 1.5em;
     padding: 0.5em;
+    padding-left: 0.4em;
     fill: var(--subtle-detail-color-contrast);
     stroke: var(--subtle-detail-color-contrast);
 }

index.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="./css/openinghourstable.css"/>
     <link rel="stylesheet" href="./css/tagrendering.css"/>
     <link rel="stylesheet" href="./css/imageUploadFlow.css"/>
+    <link rel="stylesheet" href="./css/fullscreenmessagebox.css"/>
     <!-- $$$CUSTOM-CSS -->
     <link rel="manifest" href="./manifest.manifest">
     <link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">