From 3059d2ed26e65b8280a10c1c0a176f4852eb2ca7 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 31 Dec 2023 20:57:45 +0100 Subject: [PATCH] A11y: more screenreader a11y tweaks, UX tweaks --- .../mapcomplete-changes.json | 87 +++-- langs/layers/en.json | 12 + langs/nl.json | 3 +- src/Models/ThemeConfig/TagRenderingConfig.ts | 5 +- src/UI/Base/ToSvelte.svelte | 1 + src/UI/Popup/DeleteFlow/DeleteWizard.svelte | 7 - src/UI/Popup/ShareLinkViz.ts | 5 +- src/UI/Popup/TagRendering/Questionbox.svelte | 5 +- .../TagRendering/TagRenderingAnswer.svelte | 4 +- .../TagRendering/TagRenderingEditable.svelte | 10 - .../TagRendering/TagRenderingMapping.svelte | 3 +- .../TagRenderingMappingInput.svelte | 2 +- .../TagRendering/TagRenderingQuestion.svelte | 320 +++++++++--------- src/UI/SpecialVisualization.ts | 2 +- src/UI/SpecialVisualizations.ts | 67 ++-- src/Utils.ts | 6 +- 16 files changed, 291 insertions(+), 248 deletions(-) diff --git a/assets/themes/mapcomplete-changes/mapcomplete-changes.json b/assets/themes/mapcomplete-changes/mapcomplete-changes.json index 6c7376596..5c67882b0 100644 --- a/assets/themes/mapcomplete-changes/mapcomplete-changes.json +++ b/assets/themes/mapcomplete-changes/mapcomplete-changes.json @@ -1,13 +1,16 @@ { "id": "mapcomplete-changes", "title": { - "en": "Changes made with MapComplete" + "en": "Changes made with MapComplete", + "de": "Mit MapComplete vorgenommene Änderungen" }, "shortDescription": { - "en": "Shows changes made by MapComplete" + "en": "Shows changes made by MapComplete", + "de": "Zeigt die von MapComplete vorgenommenen Änderungen an" }, "description": { - "en": "This maps shows all the changes made with MapComplete" + "en": "This maps shows all the changes made with MapComplete", + "de": "Diese Karte zeigt alle mit MapComplete vorgenommenen Änderungen" }, "icon": "./assets/svg/logo.svg", "hideFromOverview": true, @@ -20,7 +23,8 @@ { "id": "mapcomplete-changes", "name": { - "en": "Changeset centers" + "en": "Changeset centers", + "de": "Zentrum der Änderungssätze" }, "minzoom": 0, "source": { @@ -31,41 +35,48 @@ }, "title": { "render": { - "en": "Changeset for {theme}" + "en": "Changeset for {theme}", + "de": "Änderungssatz für {theme}" } }, "description": { - "en": "Shows all MapComplete changes" + "en": "Shows all MapComplete changes", + "de": "Zeigt alle MapComplete-Änderungen" }, "tagRenderings": [ { "id": "show_changeset_id", "render": { - "en": "Changeset {id}" + "en": "Changeset {id}", + "de": "Änderungssatz {id}" } }, { "id": "contributor", "question": { - "en": "What contributor did make this change?" + "en": "What contributor did make this change?", + "de": "Wer hat diese Änderung vorgenommen?" }, "freeform": { "key": "user" }, "render": { - "en": "Change made by {user}" + "en": "Change made by {user}", + "de": "Änderung von {user}" } }, { "id": "theme-id", "question": { - "en": "What theme was used to make this change?" + "en": "What theme was used to make this change?", + "de": "Welches Theme wurde für diese Änderung verwendet?" }, "freeform": { "key": "theme" }, "render": { - "en": "Change with theme {theme}" + "en": "Change with theme {theme}", + "de": "Geändert mit Thema {theme}" } }, { @@ -74,19 +85,23 @@ "key": "locale" }, "question": { - "en": "What locale (language) was this change made in?" + "en": "What locale (language) was this change made in?", + "de": "In welcher Benutzersprache wurde diese Änderung vorgenommen?" }, "render": { - "en": "User locale is {locale}" + "en": "User locale is {locale}", + "de": "Benutzersprache {locale}" } }, { "id": "host", "render": { - "en": "Change with with {host}" + "en": "Change with with {host}", + "de": "Geändert über {host}" }, "question": { - "en": "What host (website) was this change made with?" + "en": "What host (website) was this change made with?", + "de": "Über welchen Host (Webseite) wurde diese Änderung vorgenommen?" }, "freeform": { "key": "host" @@ -107,10 +122,12 @@ { "id": "version", "question": { - "en": "What version of MapComplete was used to make this change?" + "en": "What version of MapComplete was used to make this change?", + "de": "Welche Version von MapComplete wurde verwendet, um diese Änderung vorzunehmen?" }, "render": { - "en": "Made with {editor}" + "en": "Made with {editor}", + "de": "Erstellt mit {editor}" }, "freeform": { "key": "editor" @@ -460,7 +477,8 @@ } ], "question": { - "en": "Themename contains {search}" + "en": "Themename contains {search}", + "de": "Themename enthält {search}" } } ] @@ -476,7 +494,8 @@ } ], "question": { - "en": "Themename does not contain {search}" + "en": "Themename does not contain {search}", + "de": "Der Name enthält nicht {search}" } } ] @@ -492,7 +511,8 @@ } ], "question": { - "en": "Made by contributor {search}" + "en": "Made by contributor {search}", + "de": "Der Name enthält nicht {search}" } } ] @@ -508,7 +528,8 @@ } ], "question": { - "en": "Not made by contributor {search}" + "en": "Not made by contributor {search}", + "de": "Nicht erstellt von {search}" } } ] @@ -525,7 +546,8 @@ } ], "question": { - "en": "Made before {search}" + "en": "Made before {search}", + "de": "Erstellt vor {search}" } } ] @@ -542,7 +564,8 @@ } ], "question": { - "en": "Made after {search}" + "en": "Made after {search}", + "de": "Erstellt nach {search}" } } ] @@ -558,7 +581,8 @@ } ], "question": { - "en": "User language (iso-code) {search}" + "en": "User language (iso-code) {search}", + "de": "Benutzersprache (ISO-Code) {search}" } } ] @@ -574,7 +598,8 @@ } ], "question": { - "en": "Made with host {search}" + "en": "Made with host {search}", + "de": "Erstellt mit Host {search}" } } ] @@ -585,7 +610,8 @@ { "osmTags": "add-image>0", "question": { - "en": "Changeset added at least one image" + "en": "Changeset added at least one image", + "de": "Änderungssatz hat mindestens ein Bild hinzugefügt" } } ] @@ -596,7 +622,8 @@ { "osmTags": "theme!=grb", "question": { - "en": "Exclude GRB theme" + "en": "Exclude GRB theme", + "de": "GRB-Theme ausschließen" } } ] @@ -607,7 +634,8 @@ { "osmTags": "theme!=etymology", "question": { - "en": "Exclude etymology theme" + "en": "Exclude etymology theme", + "de": "Etymologie-Thema ausschließen" } } ] @@ -622,7 +650,8 @@ { "id": "link_to_more", "render": { - "en": "More statistics can be found here" + "en": "More statistics can be found here", + "de": "Mehr Statistiken gibt es hier" } }, { diff --git a/langs/layers/en.json b/langs/layers/en.json index 63cee6865..c3252a08e 100644 --- a/langs/layers/en.json +++ b/langs/layers/en.json @@ -8543,6 +8543,18 @@ }, "question": "Does this stair have a handrail?" }, + "incline": { + "mappings": { + "0": { + "then": "The upward direction is {direction_absolute()}" + }, + "1": { + "then": "The downward direction is {direction_absolute()}" + } + }, + "question": "What is the incline of these stairs?", + "render": "These stairs have an incline of {incline}" + }, "multilevels": { "override": { "question": "Between which levels are these stairs?", diff --git a/langs/nl.json b/langs/nl.json index 420480c66..f0b614ee6 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -370,7 +370,7 @@ "useSearch": "Gebruik de zoekfunctie hierboven om meer opties te zien", "useSearchForMore": "Gebruik de zoekfunctie om {total} meer waarden te vinden…", "visualFeedback": { - "closestFeaturesAre": "{n} object in beeld.", + "closestFeaturesAre": "{n} objecten in beeld.", "east": "Naar het oosten", "in": "Aan het inzoomen naar zoomlevel {z}", "islocked": "Bewegen vergrendeld rond je huidige locatie. Duw op de geolocatie-knop om te ontgrendelen.", @@ -378,6 +378,7 @@ "navigation": "Gebruik de pijltjestoetsen om te bewegen. Druk op spatie om het meest centrale punt te selecteren. Druk op een cijfertoets om andere items te selecteren.", "noCloseFeatures": "Niet in beeld", "north": "Naar het noorden", + "oneFeatureInView": "Eén object in beeld.", "out": "Aan het uitzoomen naar zoomlevel {z}", "south": "Naar het zuiden", "unlocked": "Bewegen ontgrendeld", diff --git a/src/Models/ThemeConfig/TagRenderingConfig.ts b/src/Models/ThemeConfig/TagRenderingConfig.ts index cc0027d2b..fa63ac9b5 100644 --- a/src/Models/ThemeConfig/TagRenderingConfig.ts +++ b/src/Models/ThemeConfig/TagRenderingConfig.ts @@ -79,7 +79,7 @@ export default class TagRenderingConfig { public readonly mappings?: Mapping[] public readonly editButtonAriaLabel?: Translation public readonly labels: string[] - public readonly classes: string[] + public readonly classes: string[] | undefined constructor( config: string | TagRenderingConfigJson | QuestionableTagRenderingConfigJson, @@ -131,6 +131,9 @@ export default class TagRenderingConfig { this.classes = json.classes ?? [] } this.classes = [].concat(...this.classes.map((cl) => cl.split(" "))) + if (this.classes.length === 0) { + this.classes = undefined + } this.render = Translations.T(json.render, translationKey + ".render") this.question = Translations.T(json.question, translationKey + ".question") diff --git a/src/UI/Base/ToSvelte.svelte b/src/UI/Base/ToSvelte.svelte index 88428eb2d..063e16ad7 100644 --- a/src/UI/Base/ToSvelte.svelte +++ b/src/UI/Base/ToSvelte.svelte @@ -8,6 +8,7 @@ onMount(() => { const uiElem = typeof construct === "function" ? construct() : construct html = uiElem?.ConstructElement() + if (html !== undefined) { elem?.replaceWith(html) } diff --git a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte index 421e6c299..566e6da47 100644 --- a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte +++ b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte @@ -127,13 +127,6 @@ - { - currentState = "start" - }} - />
{#if selectedTags !== undefined} diff --git a/src/UI/Popup/ShareLinkViz.ts b/src/UI/Popup/ShareLinkViz.ts index 2a054c6c4..a0b67a423 100644 --- a/src/UI/Popup/ShareLinkViz.ts +++ b/src/UI/Popup/ShareLinkViz.ts @@ -20,6 +20,7 @@ export class ShareLinkViz implements SpecialVisualization { }, ] needsUrls = [] + svelteBased = true public constr( state: SpecialVisualizationState, @@ -52,6 +53,8 @@ export class ShareLinkViz implements SpecialVisualization { } } - return new SvelteUIElement(ShareButton, { generateShareData, text }) + return new SvelteUIElement(ShareButton, { generateShareData, text }).SetClass( + "w-full h-full" + ) } } diff --git a/src/UI/Popup/TagRendering/Questionbox.svelte b/src/UI/Popup/TagRendering/Questionbox.svelte index 408b4e93d..5724d872a 100644 --- a/src/UI/Popup/TagRendering/Questionbox.svelte +++ b/src/UI/Popup/TagRendering/Questionbox.svelte @@ -41,7 +41,7 @@ } let skippedQuestions = new UIEventSource>(new Set()) - let questionboxElem: HTMLBaseElement + let questionboxElem: HTMLDivElement let questionsToAsk = tags.map( (tags) => { const baseQuestions = (layer.tagRenderings ?? [])?.filter( @@ -49,7 +49,7 @@ ) const questionsToAsk: TagRenderingConfig[] = [] for (const baseQuestion of baseQuestions) { - if (skippedQuestions.data.has(baseQuestion.id) > 0) { + if (skippedQuestions.data.has(baseQuestion.id)) { continue } if ( @@ -88,6 +88,7 @@
diff --git a/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte b/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte index d888abb00..1ca9bfc80 100644 --- a/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte @@ -29,9 +29,9 @@ {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))} -
+
{#if $trs.length === 1} - + {/if} {#if $trs.length > 1}
    diff --git a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte index 97c80e2bc..3e1f00ec8 100644 --- a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte @@ -98,16 +98,6 @@ > - {:else}
    diff --git a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte index 9b9c21961..31f607964 100644 --- a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte @@ -12,7 +12,6 @@ export let tags: UIEventSource> export let state: SpecialVisualizationState export let layer: LayerConfig - export let mapping: { readonly then: Translation readonly searchTerms?: Record @@ -30,7 +29,7 @@ {#if mapping.icon !== undefined}
    - +
    {:else if mapping.then !== undefined} diff --git a/src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte b/src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte index cc2c71ef2..94f316c35 100644 --- a/src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte @@ -83,7 +83,7 @@ {#if $matchesTerm && !$mappingIsHidden} -
    + {/if} diff --git a/src/UI/SpecialVisualization.ts b/src/UI/SpecialVisualization.ts index 2261d3789..2799a2e80 100644 --- a/src/UI/SpecialVisualization.ts +++ b/src/UI/SpecialVisualization.ts @@ -98,7 +98,7 @@ export interface SpecialVisualization { readonly funcName: string readonly docs: string | BaseUIElement readonly example?: string - readonly needsUrls: string[] | ((args: string[]) => string) + readonly needsUrls?: string[] | ((args: string[]) => string) /** * Indicates that this special visualisation will make requests to the 'alLNodesDatabase' and that it thus should be included diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts index 7464feb5f..6bf55e99f 100644 --- a/src/UI/SpecialVisualizations.ts +++ b/src/UI/SpecialVisualizations.ts @@ -102,6 +102,7 @@ class NearbyImageVis implements SpecialVisualization { "A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature" funcName = "nearby_images" needsUrls = NearbyImagesSearch.apiUrls + svelteBased = true constr( state: SpecialVisualizationState, @@ -141,6 +142,7 @@ class StealViz implements SpecialVisualization { }, ] needsUrls = [] + svelteBased = true constr(state: SpecialVisualizationState, featureTags, args) { const [featureIdKey, layerAndtagRenderingIds] = args @@ -213,6 +215,7 @@ export class QuestionViz implements SpecialVisualization { doc: "One or more ';'-separated labels of questions which should _not_ be included", }, ] + svelteBased = true constr( state: SpecialVisualizationState, @@ -236,7 +239,7 @@ export class QuestionViz implements SpecialVisualization { state, onlyForLabels: labels, notForLabels: blacklist, - }) + }).SetClass("w-full") } } @@ -437,7 +440,7 @@ export default class SpecialVisualizations { funcName: "add_new_point", docs: "An element which allows to add a new point on the 'last_click'-location. Only makes sense in the layer `last_click`", args: [], - needsUrls: [], + constr(state: SpecialVisualizationState, _, __, feature): BaseUIElement { let [lon, lat] = GeoOperations.centerpointCoordinates(feature) return new SvelteUIElement(AddNewPoint, { @@ -449,7 +452,7 @@ export default class SpecialVisualizations { { funcName: "user_profile", args: [], - needsUrls: [], + docs: "A component showing information about the currently logged in user (username, profile description, profile picture + link to edit them). Mostly meant to be used in the 'user-settings'", constr(state: SpecialVisualizationState): BaseUIElement { return new SvelteUIElement(UserProfile, { @@ -460,7 +463,6 @@ export default class SpecialVisualizations { { funcName: "language_picker", args: [], - needsUrls: [], docs: "A component to set the language of the user interface", constr(state: SpecialVisualizationState): BaseUIElement { return new SvelteUIElement(LanguagePicker, { @@ -477,6 +479,7 @@ export default class SpecialVisualizations { args: [], needsUrls: [Constants.osmAuthConfig.url], docs: "Shows a button where the user can log out", + constr(state: SpecialVisualizationState): BaseUIElement { return new SvelteUIElement(LogoutButton, { osmConnection: state.osmConnection }) }, @@ -488,7 +491,7 @@ export default class SpecialVisualizations { funcName: "split_button", docs: "Adds a button which allows to split a way", args: [], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource> @@ -509,7 +512,7 @@ export default class SpecialVisualizations { funcName: "move_button", docs: "Adds a button which allows to move the object to another location. The config will be read from the layer config", args: [], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -532,7 +535,7 @@ export default class SpecialVisualizations { funcName: "delete_button", docs: "Adds a button which allows to delete the object at this location. The config will be read from the layer config", args: [], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -597,6 +600,7 @@ export default class SpecialVisualizations { }, ], needsUrls: [...Wikidata.neededUrls, ...Wikipedia.neededUrls], + example: "`{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", constr: (_, tagsSource, args) => { @@ -650,7 +654,6 @@ export default class SpecialVisualizations { funcName: "all_tags", docs: "Prints all key-value pairs of the object - used for debugging", args: [], - needsUrls: [], constr: (state, tags: UIEventSource) => new SvelteUIElement(AllTagsPanel, { tags, state }), }, @@ -820,7 +823,7 @@ export default class SpecialVisualizations { doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__", }, ], - needsUrls: [], + example: "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)}`", constr: (state, tagSource: UIEventSource, args) => { @@ -848,14 +851,13 @@ export default class SpecialVisualizations { doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__", }, ], - needsUrls: [], constr( state: SpecialVisualizationState, tags: UIEventSource>, args: string[], feature: Feature, layer: LayerConfig - ): BaseUIElement { + ): SvelteUIElement { const keyToUse = args[0] const prefix = args[1] const postfix = args[2] @@ -870,7 +872,7 @@ export default class SpecialVisualizations { }, { funcName: "canonical", - needsUrls: [], + docs: "Converts a short, canonical value into the long, translated text including the unit. This only works if a `unit` is defined for the corresponding value. The unit specification will be included in the text. ", example: "If the object has `length=42`, then `{canonical(length)}` will be shown as **42 meter** (in english), **42 metre** (in french), ...", @@ -910,7 +912,7 @@ export default class SpecialVisualizations { funcName: "export_as_geojson", docs: "Exports the selected feature as GeoJson-file", args: [], - needsUrls: [], + constr: (state, tagSource, tagsSource, feature, layer) => { const t = Translations.t.general.download @@ -942,7 +944,7 @@ export default class SpecialVisualizations { funcName: "open_in_iD", docs: "Opens the current view in the iD-editor", args: [], - needsUrls: [], + constr: (state, feature) => { return new SvelteUIElement(OpenIdEditor, { mapProperties: state.mapProperties, @@ -964,7 +966,7 @@ export default class SpecialVisualizations { funcName: "clear_location_history", docs: "A button to remove the travelled track information from the device", args: [], - needsUrls: [], + constr: (state) => { return new SubtleButton( Svg.delete_icon_svg().SetStyle("height: 1.5rem"), @@ -1023,6 +1025,7 @@ export default class SpecialVisualizations { }, ], needsUrls: [Imgur.apiUrl], + constr: (state, tags, args) => { const id = tags.data[args[0] ?? "id"] tags = state.featureProperties.getStore(id) @@ -1033,7 +1036,7 @@ export default class SpecialVisualizations { { funcName: "title", args: [], - needsUrls: [], + docs: "Shows the title of the popup. Useful for some cases, e.g. 'What is phone number of {title()}?'", example: "`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.", @@ -1145,6 +1148,7 @@ export default class SpecialVisualizations { defaultValue: "mr_taskId", }, ], + constr: (state, tagsSource, args) => { let [message, image, message_closed, statusToSet, maproulette_id_key] = args if (image === "") { @@ -1168,7 +1172,7 @@ export default class SpecialVisualizations { funcName: "statistics", docs: "Show general statistics about the elements currently in view. Intended to use on the `current_view`-layer", args: [], - needsUrls: [], + constr: (state) => { return new Combine( state.layout.layers @@ -1211,7 +1215,6 @@ export default class SpecialVisualizations { required: true, }, ], - needsUrls: [], constr(__, tags, args) { return new SvelteUIElement(SendEmail, { args, tags }) @@ -1244,7 +1247,7 @@ export default class SpecialVisualizations { doc: "If set, this text will be used as aria-label", }, ], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -1273,7 +1276,7 @@ export default class SpecialVisualizations { { funcName: "multi", docs: "Given an embedded tagRendering (read only) and a key, will read the keyname as a JSON-list. Every element of this list will be considered as tags and rendered with the tagRendering", - needsUrls: [], + example: "```json\n" + JSON.stringify( @@ -1327,7 +1330,7 @@ export default class SpecialVisualizations { { funcName: "translated", docs: "If the given key can be interpreted as a JSON, only show the key containing the current language (or 'en'). This specialRendering is meant to be used by MapComplete studio and is not useful in map themes", - needsUrls: [], + args: [ { name: "key", @@ -1366,7 +1369,7 @@ export default class SpecialVisualizations { required: true, }, ], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -1396,7 +1399,7 @@ export default class SpecialVisualizations { { funcName: "braced", docs: "Show a literal text within braces", - needsUrls: [], + args: [ { name: "text", @@ -1417,7 +1420,7 @@ export default class SpecialVisualizations { { funcName: "tags", docs: "Shows a (json of) tags in a human-readable way + links to the wiki", - needsUrls: [], + args: [ { name: "key", @@ -1468,6 +1471,7 @@ export default class SpecialVisualizations { ], docs: "Shows events that are happening based on a Giggity URL", needsUrls: (args) => args[0], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -1481,7 +1485,7 @@ export default class SpecialVisualizations { }, { funcName: "gps_all_tags", - needsUrls: [], + docs: "Shows the current tags of the GPS-representing object, used for debugging", args: [], constr( @@ -1507,9 +1511,10 @@ export default class SpecialVisualizations { }, { funcName: "favourite_status", - needsUrls: [], + docs: "A button that allows a (logged in) contributor to mark a location as a favourite location", args: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, @@ -1527,7 +1532,7 @@ export default class SpecialVisualizations { }, { funcName: "favourite_icon", - needsUrls: [], + docs: "A small button that allows a (logged in) contributor to mark a location as a favourite location, sized to fit a title-icon", args: [], constr( @@ -1542,13 +1547,13 @@ export default class SpecialVisualizations { state, layer, feature, - }) + }).SetClass("w-full h-full") }, }, { funcName: "direction_indicator", args: [], - needsUrls: [], + docs: "Gives a distance indicator and a compass pointing towards the location from your GPS-location. If clicked, centers the map on the object", constr( state: SpecialVisualizationState, @@ -1563,7 +1568,7 @@ export default class SpecialVisualizations { { funcName: "qr_code", args: [], - needsUrls: [], + docs: "Generates a QR-code to share the selected object", constr( state: SpecialVisualizationState, @@ -1608,7 +1613,7 @@ export default class SpecialVisualizations { defaultValue: "_direction:centerpoint", }, ], - needsUrls: [], + constr( state: SpecialVisualizationState, tagSource: UIEventSource>, diff --git a/src/Utils.ts b/src/Utils.ts index f10f2ab43..73e67ed43 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1448,7 +1448,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be d.setUTCMinutes(0) } - public static scrollIntoView(element: HTMLBaseElement) { + public static scrollIntoView(element: HTMLBaseElement | HTMLDivElement) { // Is the element completely in the view? const parentRect = Utils.findParentWithScrolling(element).getBoundingClientRect() const elementRect = element.getBoundingClientRect() @@ -1680,7 +1680,9 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be }) } - private static findParentWithScrolling(element: HTMLBaseElement): HTMLBaseElement { + private static findParentWithScrolling( + element: HTMLBaseElement | HTMLDivElement + ): HTMLBaseElement | HTMLDivElement { // Check if the element itself has scrolling if (element.scrollHeight > element.clientHeight) { return element