Feature(grb): add popup feature to validate e.g. a user profile

assets/themes/grb/grb.json

@@ -19,6 +19,50 @@
   "shortDescription": {
     "nl": "Grb import helper tool"
   },
+  "popup": [
+    {
+      "id": "wikilink-needed",
+      "condition": "_description!~.*https://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Building_and_address_import.*",
+      "dismissable": false,
+      "title": {
+        "render": {
+          "en": "Profile mention obligated",
+          "nl": "Link op profiel verplicht"
+        }
+      },
+      "body": [
+        {
+          "render": {
+            "special": {
+              "type": "link",
+              "href": "https://www.openstreetmap.org/profile/edit",
+              "text": {
+                "en": "Edit your user profile",
+                "nl": "Pas je profiel aan"
+              }
+            },
+            "after": {
+              "en": "to include the link <span class='literal-code'>https://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Building_and_address_import</code>",
+              "nl": " en voeg deze link toe: <span class='literal-code'>https://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Building_and_address_import</code>"
+            }
+          }
+        },
+        {
+          "id": "reload_profile",
+          "render": {
+            "special": {
+              "type": "login_button",
+              "force": "yes",
+              "message": {
+                "en": "Reload your profile",
+                "nl": "Herlaad je profiel"
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
   "icon": "./assets/themes/grb/logo.svg",
   "startZoom": 9,
   "startLat": 51.0249,

langs/themes/en.json

@@ -623,6 +623,30 @@
                     }
                 }
             }
+        },
+        "popup": {
+            "0": {
+                "body": {
+                    "0": {
+                        "render": {
+                            "special": {
+                                "after": "to include the link <span class='literal-code'>https://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Building_and_address_import</code>",
+                                "text": "Edit your user profile"
+                            }
+                        }
+                    },
+                    "1": {
+                        "render": {
+                            "special": {
+                                "msg": "Reload your profile"
+                            }
+                        }
+                    }
+                },
+                "title": {
+                    "render": "Profile mention obligated"
+                }
+            }
         }
     },
     "guideposts": {

langs/themes/nl.json

@@ -669,6 +669,30 @@
                 }
             }
         },
+        "popup": {
+            "0": {
+                "body": {
+                    "0": {
+                        "render": {
+                            "special": {
+                                "after": " en voeg deze link toe: <span class='literal-code'>https://wiki.openstreetmap.org/wiki/WikiProject_Belgium/Building_and_address_import</code>",
+                                "text": "Pas je profiel aan"
+                            }
+                        }
+                    },
+                    "1": {
+                        "render": {
+                            "special": {
+                                "msg": "Herlaad je profiel"
+                            }
+                        }
+                    }
+                },
+                "title": {
+                    "render": "Link op profiel verplicht"
+                }
+            }
+        },
         "shortDescription": "Grb import helper tool",
         "title": "GRB import helper"
     },

src/Models/ThemeConfig/Conversion/PrepareTheme.ts

@@ -1,16 +1,6 @@
-import {
+import { Concat, Conversion, DesugaringContext, DesugaringStep, Each, Fuse, On, Pass, SetDefault } from "./Conversion"
-    Concat,
-    Conversion,
-    DesugaringContext,
-    DesugaringStep,
-    Each,
-    Fuse,
-    On,
-    Pass,
-    SetDefault,
-} from "./Conversion"
 import { ThemeConfigJson } from "../Json/ThemeConfigJson"
-import { PrepareLayer } from "./PrepareLayer"
+import { PrepareLayer, RewriteSpecial } from "./PrepareLayer"
 import { LayerConfigJson } from "../Json/LayerConfigJson"
 import { Utils } from "../../../Utils"
 import Constants from "../../Constants"
@@ -40,7 +30,7 @@ class SubstituteLayer extends Conversion<string | LayerConfigJson, LayerConfigJs
             const knownLayers = Array.from(state.sharedLayers.keys())
             const withDistance: [string, number][] = knownLayers.map((lname) => [
                 lname,
-                Utils.levenshteinDistance(name, lname),
+                Utils.levenshteinDistance(name, lname)
             ])
             withDistance.sort((a, b) => a[1] - b[1])
             const ids = withDistance.map((n) => n[0])
@@ -385,7 +375,7 @@ class AddDependencyLayersToTheme extends DesugaringStep<ThemeConfigJson> {
                         themeId +
                         " nor as builtin layer.",
                         reason,
-                        "Loaded layers are: " + alreadyLoaded.map((l) => l.id).join(","),
+                        "Loaded layers are: " + alreadyLoaded.map((l) => l.id).join(",")
                     ]
                     throw message.join("\n\t")
                 }
@@ -395,7 +385,7 @@ class AddDependencyLayersToTheme extends DesugaringStep<ThemeConfigJson> {
                 dep.description = reason
                 dependenciesToAdd.unshift({
                     config: dep,
-                    reason,
+                    reason
                 })
                 loadedLayerIds.add(dep.id)
                 unmetDependencies = unmetDependencies.filter(
@@ -440,7 +430,7 @@ class AddDependencyLayersToTheme extends DesugaringStep<ThemeConfigJson> {
 
         return {
             ...theme,
-            layers: layers,
+            layers: layers
         }
     }
 }
@@ -618,6 +608,13 @@ export class PrepareTheme extends Fuse<ThemeConfigJson> {
             new SetDefault("socialImage", "assets/SocialImage.png", true),
             // We expand all tagrenderings first...
             new On("layers", new Each(new PrepareLayer(state))),
+            new On("popup", new Each(
+                new Fuse("Prepare popups",
+                    new On("body", new Each(new RewriteSpecial())),
+                    new On("title", new RewriteSpecial())
+                )
+            )),
+
             // Then we apply the override all. We must first expand everything in case that we override something in an expanded tag
             // Note that it'll cheat with tagRenderings+
             new ApplyOverrideAll(),

src/Models/ThemeConfig/Json/ThemeConfigJson.ts

@@ -3,6 +3,8 @@ import ExtraLinkConfigJson from "./ExtraLinkConfigJson"
 
 import { RasterLayerProperties } from "../../RasterLayerProperties"
 import { Translatable } from "./Translatable"
+import { TagConfigJson } from "./TagConfigJson"
+import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
 
 /**
  * Defines the entire theme.
@@ -468,4 +470,24 @@ export interface ThemeConfigJson {
      * group: hidden
      */
     _usedImages?: string[]
+
+    /**
+     * If set, an _additional_ popup will be shown under the theme introduction page.
+     *
+     * The embedded tagRenderingConfigs will be run against the settings-state of the contributor.
+     * If multiple popups are set, the first popup of the list will be rendered on top (and thus be seen first).
+     */
+    popup?: {
+        /**
+         * ifset: the user can dismiss this message
+         */
+        dismissible?: boolean
+        condition?: TagConfigJson
+        title: TagRenderingConfigJson,
+        body: TagRenderingConfigJson[],
+        /**
+         * id of the popup, mostly to keep the translations in check
+         */
+        id: string,
+    }[]
 }

src/Models/ThemeConfig/ThemeConfig.ts

@@ -9,6 +9,10 @@ import LanguageUtils from "../../Utils/LanguageUtils"
 
 import { RasterLayerProperties } from "../RasterLayerProperties"
 import { Translatable } from "./Json/Translatable"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import TagRenderingConfig from "./TagRenderingConfig"
+import { TagUtils } from "../../Logic/Tags/TagUtils"
+import { TagRenderingConfigJson } from "./Json/TagRenderingConfigJson"
 
 /**
  * Minimal information about a theme
@@ -93,6 +97,14 @@ export default class ThemeConfig implements ThemeInformation {
     public readonly source: ThemeConfigJson
     public readonly enableCache: boolean
 
+    public readonly popups: Readonly<{
+        id: string,
+        dismissible?: boolean,
+        condition: TagsFilter,
+        title: TagRenderingConfig,
+        body: TagRenderingConfig[]
+    }>[]
+
     constructor(
         json: ThemeConfigJson,
         official = true,
@@ -193,11 +205,26 @@ export default class ThemeConfig implements ThemeInformation {
                 icon: "./assets/svg/pop-out.svg",
                 href: "https://{basepath}/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}",
                 newTab: true,
-                requirements: ["iframe", "no-welcome-message"],
+                requirements: ["iframe", "no-welcome-message"]
             },
             context + ".extraLink"
         )
 
+        this.popups = (json.popup ?? []).map((p, i) => {
+            const ctx = context + ".popup." + i
+            if (!p.id) {
+                throw (ctx + ": an id is required")
+            }
+            const body: TagRenderingConfigJson[] = Array.isArray(p.body) ? p.body : [p.body]
+            return {
+                id: p.id,
+                dismissible: p.dismissible ?? false,
+                condition: TagUtils.Tag(p.condition),
+                title: new TagRenderingConfig(p.title, ctx + ".title"),
+                body: body.map((body, i) => new TagRenderingConfig(body, ctx + ".body." + i))
+            }
+        })
+
         this.hideFromOverview = json.hideFromOverview ?? false
         this.lockLocation = <[[number, number], [number, number]]>json.lockLocation ?? undefined
         this.enableUserBadge = json.enableUserBadge ?? true
@@ -351,7 +378,7 @@ export default class ThemeConfig implements ThemeInformation {
         // The 'favourite'-layer contains pretty much all images as it bundles all layers, so we exclude it
         const jsonNoFavourites = {
             ...json,
-            layers: json.layers.filter((l) => l["id"] !== "favourite"),
+            layers: json.layers.filter((l) => l["id"] !== "favourite")
         }
         const usedImages = jsonNoFavourites._usedImages
         usedImages.sort()

src/Models/ThemeConfig/WithContextLoader.ts

@@ -12,7 +12,7 @@ export default class WithContextLoader {
         this._context = context
     }
 
-    /** Given a key, gets the corresponding property from the json (or the default if not found
+    /** Given a key, gets the corresponding property from the json (or the default if not found)
      *
      * The found value is interpreted as a tagrendering and fetched/parsed
      * */

src/UI/Base/LoginButton.svelte

@@ -6,18 +6,26 @@
 
   export let osmConnection: OsmConnection
   export let clss: string | undefined = undefined
-
+  /**
+   * Show the button, even though we are logged in
+   */
+  export let forceShow: boolean = false
+  export let msg: String = undefined
   if (osmConnection === undefined) {
     console.error("No osmConnection passed into loginButton")
   }
   let isLoggedIn = osmConnection.isLoggedIn
 </script>
 
-{#if !$isLoggedIn}
+{#if !$isLoggedIn || forceShow}
   <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
     <ArrowLeftOnRectangle class="m-1 w-12" />
     <slot>
+      {#if msg}
+        {msg}
+      {:else}
         <Tr t={Translations.t.general.loginWithOpenStreetMap} />
+      {/if}
     </slot>
   </button>
 {/if}

src/UI/Base/Popup.svelte

@@ -42,8 +42,8 @@
 
 <Modal
   open={_shown}
-  on:close={() => shown.set(false)}
+  on:close={() =>shown.set(false)}
-  outsideclose
+  outsideclose={dismissable}
   size="xl"
   {dismissable}
   {defaultClass}

src/UI/SpecialVisualisations/SettingsVisualisations.ts

@@ -111,12 +111,27 @@ export class SettingsVisualisations {
             },
             {
                 funcName: "login_button",
-                args: [],
+                args: [{
+                    name: "force",
+                    doc: "Always show this button, even if logged in"
+                }, {
+                    name: "message",
+                    doc: "Message to display on the button"
+                }],
                 docs: "Show a login button",
                 needsUrls: [],
                 group: "settings",
-                constr(state: SpecialVisualizationState): SvelteUIElement {
+                constr(state: SpecialVisualizationState, _, args): SvelteUIElement {
-                    return new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection })
+                    const force = args[0].toLowerCase()
+                    let msg = args[1]
+                    if (msg === "") {
+                        msg = undefined
+                    }
+                    return new SvelteUIElement(LoginButton, {
+                        osmConnection: state.osmConnection,
+                        msg,
+                        forceShow: force === "yes" || force === "true"
+                    })
                 },
             },
 

src/UI/ThemeViewGUI.svelte

@@ -49,6 +49,8 @@
   import Loading from "./Base/Loading.svelte"
   import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
   import TitleHandler from "../Logic/Actors/TitleHandler"
+  import Popup from "./Base/Popup.svelte"
+  import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
 
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
@@ -76,6 +78,7 @@
   let mapproperties: MapProperties = state.mapProperties
   let searchOpened = state.searchState.showSearchDrawer
 
+  let metatags = state.userRelatedState.preferencesAsTags
   Orientation.singleton.startMeasurements()
 
   let slideDuration = 150 // ms
@@ -148,7 +151,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat],
+      [bottomRight.lng, bottomRight.lat]
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -500,5 +503,24 @@
     {/if}
   {/if}
 
+  {#each theme.popups as popup}
+    {#if popup.condition.matchesProperties($metatags)}
+      <Popup shown={new UIEventSource(true)} dismissable={popup.dismissible}>
+        <TagRenderingAnswer slot="header" config={popup.title} {state}
+                            tags={metatags}
+                            layer={undefined}
+                            selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+        <div class="flex flex-col">
+          {#each popup.body as body}
+            <TagRenderingAnswer config={body} {state}
+                                tags={metatags}
+                                layer={undefined}
+                                selectedElement={({type: "Feature", properties: $metatags, geometry: {type: "Point", coordinates: [0,0]}})} />
+          {/each}
+          <span class="subtle">{popup.id}</span>
+        </div>
+      </Popup>
+    {/if}
+  {/each}
   <MenuDrawer onlyLink={false} {state} />
 </main>