Add extraLink button which replaced the iframePopout button, fix #654

Models/ThemeConfig/ExtraLinkConfig.ts

@@ -0,0 +1,31 @@
+import ExtraLinkConfigJson from "./Json/ExtraLinkConfigJson";
+import {Translation} from "../../UI/i18n/Translation";
+import Translations from "../../UI/i18n/Translations";
+
+export default class ExtraLinkConfig {
+    public readonly icon?: string
+    public readonly text?: Translation
+    public readonly href: string
+    public readonly newTab?: false | boolean
+    public readonly requirements?: Set<("iframe" | "no-iframe" | "welcome-message" | "no-welcome-message")>
+
+    constructor(configJson: ExtraLinkConfigJson, context) {
+        this.icon = configJson.icon
+        this.text = Translations.T(configJson.text)
+        this.href = configJson.href
+        this.newTab = configJson.newTab
+        this.requirements = new Set(configJson.requirements)
+
+        for (let requirement of configJson.requirements) {
+
+            if (this.requirements.has(<any>("no-" + requirement))) {
+                throw "Conflicting requirements found for " + context + ".extraLink: both '" + requirement + "' and 'no-" + requirement + "' found"
+            }
+        }
+
+        if (this.icon === undefined && this.text === undefined) {
+            throw "At " + context + ".extraLink: define at least an icon or a text to show. Both are undefined, this is not allowed"
+        }
+    }
+
+}

Models/ThemeConfig/Json/ExtraLinkConfigJson.ts

@@ -0,0 +1,7 @@
+export default interface ExtraLinkConfigJson {
+    icon?: string,
+    text?: string | any,
+    href: string,
+    newTab?: false | boolean,
+    requirements?: ("iframe" | "no-iframe" | "welcome-message" | "no-welcome-message")[]
+}

Models/ThemeConfig/Json/LayoutConfigJson.ts

@@ -1,5 +1,6 @@
 import {LayerConfigJson} from "./LayerConfigJson";
 import TilesourceConfigJson from "./TilesourceConfigJson";
+import ExtraLinkConfigJson from "./ExtraLinkConfigJson";
 
 /**
  * Defines the entire theme.
@@ -244,18 +245,70 @@ export interface LayoutConfigJson {
      */
     lockLocation?: [[number, number], [number, number]] | number[][];
 
-    enableUserBadge?: boolean;
-    enableShareScreen?: boolean;
-    enableMoreQuests?: boolean;
-    enableLayers?: boolean;
-    enableSearch?: boolean;
-    enableAddNewPoints?: boolean;
-    enableGeolocation?: boolean;
-    enableBackgroundLayerSelection?: boolean;
-    enableShowAllQuestions?: boolean;
-    enableDownload?: boolean;
-    enablePdfDownload?: boolean;
-    enableIframePopout?: true | boolean;
+    /**
+     * Adds an additional button on the top-left of the application.
+     * This can link to an arbitrary location.
+     * 
+     * Note that {lat},{lon},{zoom}, {language} and {theme} will be replaced
+     * 
+     * Default: {icon: "./assets/svg/pop-out.svg", href: 'https://mapcomplete.osm.be/{theme}.html?lat={lat}&lon={lon}&z={zoom}, requirements: ["iframe","no-welcome-message]}, 
+     * 
+     */
+    extraLink?: ExtraLinkConfigJson
+    
+    /**
+     * If set to false, disables logging in.
+     * The userbadge will be hidden, all login-buttons will be hidden and editing will be disabled
+     */
+    enableUserBadge?: true | boolean;
+    /**
+     * If false, hides the tab 'share'-tab in the welcomeMessage
+     */
+    enableShareScreen?: true | boolean;
+    /**
+     * Hides the tab with more themes in the welcomeMessage
+     */
+    enableMoreQuests?: true | boolean;
+    /**
+     * If false, the layer selection/filter view will be hidden
+     * The corresponding URL-parameter is 'fs-filters' instead of 'fs-layers'
+     */
+    enableLayers?: true | boolean;
+    /**
+     * If set to false, hides the search bar
+     */
+    enableSearch?: true | boolean;
+    /**
+     * If set to false, the ability to add new points or nodes will be disabled.
+     * Editing already existing features will still be possible
+     */
+    enableAddNewPoints?: true | boolean;
+    /**
+     * If set to false, the 'geolocation'-button will be hidden.
+     */
+    enableGeolocation?: true | boolean;
+    /**
+     * Enable switching the backgroundlayer.
+     * If false, the quickswitch-buttons are removed (bottom left) and the dropdown in the layer selection is removed as well 
+     */
+    enableBackgroundLayerSelection?: true | boolean;
+    /**
+     * If set to true, will show _all_ unanswered questions in a popup instead of just the next one
+     */
+    enableShowAllQuestions?: false | boolean;
+    /**
+     * If set to true, download button for the data will be shown (offers downloading as geojson and csv)
+     */
+    enableDownload?: false | boolean;
+    /**
+     * If set to true, exporting a pdf is enabled
+     */
+    enablePdfDownload?: false | boolean;
+
+    /**
+     * If true, notes will be loaded and parsed. If a note is an import (as created by the import_helper.html-tool from mapcomplete),
+     * these notes will be shown if a relevant layer is present.
+     */
     enableNoteImports?: true | boolean;
 
     /**

Models/ThemeConfig/LayoutConfig.ts

@@ -5,6 +5,7 @@ import {LayerConfigJson} from "./Json/LayerConfigJson";
 import Constants from "../Constants";
 import TilesourceConfig from "./TilesourceConfig";
 import {ExtractImages} from "./Conversion/FixImages";
+import ExtraLinkConfig from "./ExtraLinkConfig";
 
 export default class LayoutConfig {
     public readonly id: string;
@@ -42,7 +43,6 @@ export default class LayoutConfig {
     public readonly enableShowAllQuestions: boolean;
     public readonly enableExportButton: boolean;
     public readonly enablePdfDownload: boolean;
-    public readonly enableIframePopout: boolean;
 
     public readonly customCss?: string;
 
@@ -51,8 +51,9 @@ export default class LayoutConfig {
     public readonly overpassMaxZoom: number
     public readonly osmApiTileSize: number
     public readonly official: boolean;
-    
-    public readonly usedImages : string[]
+
+    public readonly usedImages: string[]
+    public readonly extraLink?: ExtraLinkConfig
 
     constructor(json: LayoutConfigJson, official = true, context?: string) {
         this.official = official;
@@ -70,7 +71,7 @@ export default class LayoutConfig {
         this.credits = json.credits;
         this.version = json.version;
         this.language = json.mustHaveLanguage ?? Array.from(Object.keys(json.title));
-        this.usedImages =Array.from( new ExtractImages().convertStrict(json, "while extracting the images of "+json.id+" "+context??"")).sort()
+        this.usedImages = Array.from(new ExtractImages().convertStrict(json, "while extracting the images of " + json.id + " " + context ?? "")).sort()
         {
             if (typeof json.title === "string") {
                 throw `The title of a theme should always be a translation, as it sets the corresponding languages (${context}.title). The themenID is ${this.id}; the offending object is ${JSON.stringify(json.title)} which is a ${typeof json.title})`
@@ -118,6 +119,13 @@ export default class LayoutConfig {
         // At this point, layers should be expanded and validated either by the generateScript or the LegacyJsonConvert
         this.layers = json.layers.map(lyrJson => new LayerConfig(<LayerConfigJson>lyrJson, json.id + ".layers." + lyrJson["id"], official));
 
+        this.extraLink =  new ExtraLinkConfig(json.extraLink ?? {
+            icon: "./assets/svg/pop-out.svg",
+            href: "https://mapcomplete.osm.be/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}",
+            newTab: true,
+            requirements: ["iframe","no-welcome-message"]
+        }, context)
+    
 
         this.clustering = {
             maxZoom: 16,
@@ -148,7 +156,6 @@ export default class LayoutConfig {
         this.enableShowAllQuestions = json.enableShowAllQuestions ?? false;
         this.enableExportButton = json.enableDownload ?? false;
         this.enablePdfDownload = json.enablePdfDownload ?? false;
-        this.enableIframePopout = json.enableIframePopout ?? true
         this.customCss = json.customCss;
         this.overpassUrl = Constants.defaultOverpassUrls
         if (json.overpassUrl !== undefined) {