Documentation updates

Docs/SpecialInputElements.md

@@ -1,4 +1,8 @@
-# Available types for text fields
+
+ Available types for text fields 
+=================================
+
+
 
 The listed types here trigger a special input element. Use them in `tagrendering.freeform.type` of your tagrendering to activate them
 

Docs/SpecialRenderings.md

@@ -1,13 +1,39 @@
 
 ### Special tag renderings 
 
- In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's. General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_fcs need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args 
+
+
+In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's.
+
+General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_ need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args
+
+
+
+  - [all_tags](#all_tags)
+  - [image_carousel](#image_carousel)
+  - [image_upload](#image_upload)
+  - [wikipedia](#wikipedia)
+  - [minimap](#minimap)
+  - [sided_minimap](#sided_minimap)
+  - [reviews](#reviews)
+  - [opening_hours_table](#opening_hours_table)
+  - [live](#live)
+  - [histogram](#histogram)
+  - [share_link](#share_link)
+  - [canonical](#canonical)
+  - [import_button](#import_button)
+  - [multi_apply](#multi_apply)
+
+
+
 ### all_tags 
 
  Prints all key-value pairs of the object - used for debugging 
 #### Example usage 
 
  `{all_tags()}`
+
+
 ### image_carousel 
 
  Creates an image carousel for the given sources. An attempt will be made to guess what source is used. Supported: Wikidata identifiers, Wikipedia pages, Wikimedia categories, IMGUR (with attribution, direct links) 
@@ -19,6 +45,8 @@ image key/prefix (multiple values allowed if comma-seperated) | image,mapillary,
 #### Example usage 
 
  `{image_carousel(image,mapillary,image,wikidata,wikimedia_commons,image,image)}`
+
+
 ### image_upload 
 
  Creates a button where a user can upload an image to IMGUR 
@@ -31,6 +59,8 @@ label | Add image | The text to show on the button
 #### Example usage 
 
  `{image_upload(image,Add image)}`
+
+
 ### wikipedia 
 
  A box showing the corresponding wikipedia article - based on the wikidata tag 
@@ -42,6 +72,8 @@ keyToShowWikipediaFor | wikidata | Use the wikidata entry from this key to show
 #### Example usage 
 
  `{wikipedia()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the wikipedia page of whom the feature was named after. Also remember that these can be styled, e.g. `{wikipedia():max-height: 10rem}` to limit the height
+
+
 ### minimap 
 
  A small map showing the selected feature. 
@@ -54,17 +86,21 @@ idKey | id | (Matches all resting arguments) This argument should be the key of
 #### Example usage 
 
  `{minimap()}`, `{minimap(17, id, _list_of_embedded_feature_ids_calculated_by_calculated_tag):height:10rem; border: 2px solid black}`
+
+
 ### sided_minimap 
 
  A small map showing _only one side_ the selected feature. *This features requires to have linerenderings with offset* as only linerenderings with a postive or negative offset will be shown. Note: in most cases, this map will be automatically introduced 
 
 name | default | description
 ------ | --------- | -------------
-side | undefined | The side to show, either `left` or `right`
+side | _undefined_ | The side to show, either `left` or `right`
  
 #### Example usage 
 
  `{sided_minimap(left)}`
+
+
 ### reviews 
 
  Adds an overview of the mangrove-reviews of this object. Mangrove.Reviews needs - in order to identify the reviewed object - a coordinate and a name. By default, the name of the object is given, but this can be overwritten 
@@ -72,11 +108,13 @@ side | undefined | The side to show, either `left` or `right`
 name | default | description
 ------ | --------- | -------------
 subjectKey | name | The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>
-fallback | undefined | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value
+fallback | _undefined_ | The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value
  
 #### Example usage 
 
  `{reviews()}` for a vanilla review, `{reviews(name, play_forest)}` to review a play forest. If a name is known, the name will be used as identifier, otherwise 'play_forest' is used
+
+
 ### opening_hours_table 
 
  Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'. 
@@ -84,61 +122,71 @@ fallback | undefined | The identifier to use, if <i>tags[subjectKey]</i> as spec
 name | default | description
 ------ | --------- | -------------
 key | opening_hours | The tagkey from which the table is constructed.
-prefix |  | Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__
+prefix | _empty string_ | Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__
-postfix |  | Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__
+postfix | _empty string_ | Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__
  
 #### Example usage 
 
  A normal opening hours table can be invoked with `{opening_hours_table()}`. A table for e.g. conditional access with opening hours can be `{opening_hours_table(access:conditional, no @ &LPARENS, &RPARENS)}`
+
+
 ### live 
 
  Downloads a JSON from the given URL, e.g. '{live(example.org/data.json, shorthand:x.y.z, other:a.b.c, shorthand)}' will download the given file, will create an object {shorthand: json[x][y][z], other: json[a][b][c] out of it and will return 'other' or 'json[a][b][c]. This is made to use in combination with tags, e.g. {live({url}, {url:format}, needed_value)} 
 
 name | default | description
 ------ | --------- | -------------
-Url | undefined | The URL to load
+Url | _undefined_ | The URL to load
-Shorthands | undefined | A list of shorthands, of the format 'shorthandname:path.path.path'. separated by ;
+Shorthands | _undefined_ | A list of shorthands, of the format 'shorthandname:path.path.path'. separated by ;
-path | undefined | The path (or shorthand) that should be returned
+path | _undefined_ | The path (or shorthand) that should be returned
  
 #### Example usage 
 
  {live({url},{url:format},hour)} {live(https://data.mobility.brussels/bike/api/counts/?request=live&featureID=CB2105,hour:data.hour_cnt;day:data.day_cnt;year:data.year_cnt,hour)}
+
+
 ### histogram 
 
  Create a histogram for a list of given values, read from the properties. 
 
 name | default | description
 ------ | --------- | -------------
-key | undefined | The key to be read and to generate a histogram from
+key | _undefined_ | The key to be read and to generate a histogram from
-title |  | The text to put above the given values column
+title | _empty string_ | The text to put above the given values column
-countHeader |  | The text to put above the counts
+countHeader | _empty string_ | The text to put above the counts
-colors* | undefined | (Matches all resting arguments - optional) Matches a regex onto a color value, e.g. `3[a-zA-Z+-]*:#33cc33`
+colors* | _undefined_ | (Matches all resting arguments - optional) Matches a regex onto a color value, e.g. `3[a-zA-Z+-]*:#33cc33`
  
 #### Example usage 
 
  `{histogram('some_key')}` with properties being `{some_key: ['a','b','a','c']} to create a histogram
+
+
 ### share_link 
 
  Creates a link that (attempts to) open the native 'share'-screen 
 
 name | default | description
 ------ | --------- | -------------
-url | undefined | The url to share (default: current URL)
+url | _undefined_ | The url to share (default: current URL)
  
 #### Example usage 
 
  {share_link()} to share the current page, {share_link(<some_url>)} to share the given url
+
+
 ### canonical 
 
  Converts a short, canonical value into the long, translated text 
 
 name | default | description
 ------ | --------- | -------------
-key | undefined | The key of the tag to give the canonical text for
+key | _undefined_ | The key of the tag to give the canonical text for
  
 #### Example usage 
 
  {canonical(length)} will give 42 metre (in french)
+
+
 ### import_button 
 
  This button will copy the data from an external dataset into OpenStreetMap. It is only functional in official themes but can be tested in unofficial themes.
@@ -161,7 +209,7 @@ There are also some technicalities in your theme to keep in mind:
 
 name | default | description
 ------ | --------- | -------------
-tags | undefined | Tags to copy-specification. This contains one or more pairs (seperated by a `;`), e.g. `amenity=fast_food; addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature. (Hint: prepare these values, e.g. with calculatedTags)
+tags | _undefined_ | Tags to copy-specification. This contains one or more pairs (seperated by a `;`), e.g. `amenity=fast_food; addr:housenumber=$number`. This new point will then have the tags `amenity=fast_food` and `addr:housenumber` with the value that was saved in `number` in the original feature. (Hint: prepare these values, e.g. with calculatedTags)
 text | Import this data into OpenStreetMap | The text to show on the button
 icon | ./assets/svg/addSmall.svg | A nice icon to show in the button
 minzoom | 18 | How far the contributor must zoom in before being able to import the point
@@ -169,17 +217,19 @@ minzoom | 18 | How far the contributor must zoom in before being able to import
 #### Example usage 
 
  `{import_button(,Import this data into OpenStreetMap,./assets/svg/addSmall.svg,18)}`
+
+
 ### multi_apply 
 
  A button to apply the tagging of this object onto a list of other features. This is an advanced feature for which you'll need calculatedTags 
 
 name | default | description
 ------ | --------- | -------------
-feature_ids | undefined | A JSOn-serialized list of IDs of features to apply the tagging on
+feature_ids | _undefined_ | A JSOn-serialized list of IDs of features to apply the tagging on
-keys | undefined | One key (or multiple keys, seperated by ';') of the attribute that should be copied onto the other features.
+keys | _undefined_ | One key (or multiple keys, seperated by ';') of the attribute that should be copied onto the other features.
-text | undefined | The text to show on the button
+text | _undefined_ | The text to show on the button
-autoapply | undefined | A boolean indicating wether this tagging should be applied automatically if the relevant tags on this object are changed. A visual element indicating the multi_apply is still shown
+autoapply | _undefined_ | A boolean indicating wether this tagging should be applied automatically if the relevant tags on this object are changed. A visual element indicating the multi_apply is still shown
-overwrite | undefined | If set to 'true', the tags on the other objects will always be overwritten. The default behaviour will be to only change the tags on other objects if they are either undefined or had the same value before the change
+overwrite | _undefined_ | If set to 'true', the tags on the other objects will always be overwritten. The default behaviour will be to only change the tags on other objects if they are either undefined or had the same value before the change
  
 #### Example usage 
 

UI/Input/ValidatedTextField.ts

@@ -552,7 +552,11 @@ export default class ValidatedTextField {
 
     public static HelpText(): string {
         const explanations = ValidatedTextField.tpList.map(type => ["## " + type.name, "", type.explanation].join("\n")).join("\n\n")
-        return "# Available types for text fields\n\nThe listed types here trigger a special input element. Use them in `tagrendering.freeform.type` of your tagrendering to activate them\n\n" + explanations
+        return new Combine([
+            new Title("Available types for text fields", 1),
+            "The listed types here trigger a special input element. Use them in `tagrendering.freeform.type` of your tagrendering to activate them",
+            explanations
+        ]).SetClass("flex flex-col").AsMarkdown()
     }
 
     private static tp(name: string,

UI/SpecialVisualizations.ts

@@ -31,6 +31,8 @@ import SimpleMetaTagger from "../Logic/SimpleMetaTagger";
 import MultiApply from "./Popup/MultiApply";
 import AllKnownLayers from "../Customizations/AllKnownLayers";
 import ShowDataLayer from "./ShowDataLayer/ShowDataLayer";
+import Link from "./Base/Link";
+import List from "./Base/List";
 
 export interface SpecialVisualization {
     funcName: string,
@@ -611,7 +613,13 @@ There are also some technicalities in your theme to keep in mind:
                     new Title(viz.funcName, 3),
                     viz.docs,
                     viz.args.length > 0 ? new Table(["name", "default", "description"],
-                        viz.args.map(arg => [arg.name, arg.defaultValue ?? "undefined", arg.doc])
+                        viz.args.map(arg => {
+                            let defaultArg = arg.defaultValue ?? "_undefined_"
+                            if(defaultArg == ""){
+                                defaultArg = "_empty string_"
+                            }
+                            return [arg.name, defaultArg, arg.doc];
+                        })
                     ) : undefined,
                     new Title("Example usage", 4),
                     new FixedUiElement(
@@ -622,12 +630,17 @@ There are also some technicalities in your theme to keep in mind:
             ));
 
         
+        const toc = new List(
+            SpecialVisualizations.specialVisualizations.map(viz => new Link(viz.funcName, "#"+viz.funcName))
+        )
+
         return new Combine([
                 new Title("Special tag renderings", 3),
                 "In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's.",
-                "General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_fcs need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args",
+                "General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_ need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args",
+                toc,
                 ...helpTexts
             ]
-        );
+        ).SetClass("flex flex-col");
     }
 }

assets/themes/grb_import/grb.json

@@ -573,6 +573,9 @@
         "_imported_osm_still_fresh= feat.properties['_osm_obj:source:date'] == feat.properties._grb_date"
       ],
       "tagRenderings": [
+        {
+          "render": "{import_button(Upload this geometry to OpenStreetMap)}"
+        },
         "all_tags"
       ],
       "isShown": {