Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

A11y: more screenreader a11y tweaks, UX tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-31 20:57:45 +01:00
parent 8122826ddc
commit 3059d2ed26
16 changed files with 291 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Models/ThemeConfig/TagRenderingConfig.ts
View file

@ -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(<any>json.render, translationKey + ".render")
this.question = Translations.T(json.question, translationKey + ".question")

1
src/UI/Base/ToSvelte.svelte
View file

@ -8,6 +8,7 @@
onMount(() => {
const uiElem = typeof construct === "function" ? construct() : construct
html = uiElem?.ConstructElement()
if (html !== undefined) {
elem?.replaceWith(html)
}

7
src/UI/Popup/DeleteFlow/DeleteWizard.svelte
View file

@ -127,13 +127,6 @@
<button slot="cancel" class="items-center" on:click={() => (currentState = "start")}>
<Tr t={t.cancel} />
</button>
<XCircleIcon
slot="upper-right"
class="h-8 w-8 cursor-pointer"
on:click={() => {
currentState = "start"
}}
/>
<div slot="under-buttons">
{#if selectedTags !== undefined}

5
src/UI/Popup/ShareLinkViz.ts
View file

@ -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"
)
}
}

5
src/UI/Popup/TagRendering/Questionbox.svelte
View file

@ -41,7 +41,7 @@
}
let skippedQuestions = new UIEventSource<Set<string>>(new Set<string>())
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 @@
<div
bind:this={questionboxElem}
aria-live="polite"
class="marker-questionbox-root"
class:hidden={$questionsToAsk.length === 0 && skipped === 0 && answered === 0}
>

4
src/UI/Popup/TagRendering/TagRenderingAnswer.svelte
View file

@ -29,9 +29,9 @@
</script>
{#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
<div {id} class={twMerge("link-underline inline-block w-full", config?.classes, extraClasses)}>
<div {id} class={twMerge("link-underline inline-block w-full", config?.classes ?? "flex items-center", extraClasses)}>
{#if $trs.length === 1}
<TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
<TagRenderingMapping clss={extraClasses} mapping={$trs[0]} {tags} {state} {selectedElement} {layer} />
{/if}
{#if $trs.length > 1}
<ul>

10
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -98,16 +98,6 @@
>
<Tr t={Translations.t.general.cancel} />
</button>
<button
slot="upper-right"
class="h-8 w-8 cursor-pointer border-none p-0"
use:ariaLabel={Translations.t.general.cancel}
on:click={() => {
editMode = false
}}
>
<XCircleIcon />
</button>
</TagRenderingQuestion>
{:else}
<div class="low-interaction flex items-center justify-between overflow-hidden rounded px-2">

3
src/UI/Popup/TagRendering/TagRenderingMapping.svelte
View file

@ -12,7 +12,6 @@
export let tags: UIEventSource<Record<string, string>>
export let state: SpecialVisualizationState
export let layer: LayerConfig
export let mapping: {
readonly then: Translation
readonly searchTerms?: Record<string, string[]>
@ -30,7 +29,7 @@
{#if mapping.icon !== undefined}
<div class="inline-flex items-center">
<Icon icon={mapping.icon} clss={twJoin(`mapping-icon-${mapping.iconClass}`, "mx-2")} />
<Icon icon={mapping.icon} clss={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-2")} />
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
</div>
{:else if mapping.then !== undefined}

2
src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte
View file

@ -83,7 +83,7 @@
</script>
{#if $matchesTerm && !$mappingIsHidden}
<label class={twJoin("flex", mappingIsSelected && "checked")}>
<label class={twJoin("flex gap-x-1", mappingIsSelected && "checked")}>
<slot />
<TagRenderingMapping {mapping} {tags} {state} {selectedElement} {layer} />
</label>

320
src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -151,7 +151,7 @@
$freeformInput,
selectedMapping,
checkedMappings,
tags.data
tags.data,
)
} catch (e) {
console.error("Could not calculate changeSpecification:", e)
@ -213,136 +213,53 @@
onDestroy(
state.osmConnection?.userDetails?.addCallbackAndRun((ud) => {
numberOfCs = ud.csCount
})
}),
)
}
</script>
{#if question !== undefined}
<form
class="interactive border-interactive relative flex flex-col overflow-y-auto px-2"
style="max-height: 75vh"
on:submit|preventDefault={() => onSave()}
>
<label class="neutral-label">
<div class="interactive sticky top-0 flex justify-between pt-1" style="z-index: 11">
<span class="font-bold">
<SpecialTranslation t={question} {tags} {state} {layer} feature={selectedElement} />
</span>
<slot name="upper-right" />
</div>
<div class="relative">
{#if config.questionhint}
<div class="max-h-60 overflow-y-auto">
<SpecialTranslation
t={config.questionhint}
{tags}
{state}
{layer}
feature={selectedElement}
/>
</div>
{/if}
<form
class="interactive border-interactive relative flex flex-col overflow-y-auto px-2"
style="max-height: 75vh"
on:submit|preventDefault={() => onSave()}
>
<fieldset>
{#if config.mappings?.length >= 8}
<div class="sticky flex w-full" aria-hidden="true">
<Search class="h-6 w-6" />
<input
type="text"
bind:value={$searchTerm}
class="w-full"
use:placeholder={Translations.t.general.searchAnswer}
/>
</div>
{/if}
<legend>
<div class="interactive sticky top-0 flex justify-between pt-1 font-bold" style="z-index: 11">
<SpecialTranslation t={question} {tags} {state} {layer} feature={selectedElement} />
</div>
{#if config.freeform?.key && !(mappings?.length > 0)}
<!-- There are no options to choose from, simply show the input element: fill out the text field -->
<FreeformInput
{config}
{tags}
{feedback}
{unit}
{state}
feature={selectedElement}
value={freeformInput}
on:submit={onSave}
/>
{:else if mappings !== undefined && !config.multiAnswer}
<!-- Simple radiobuttons as mapping -->
<div class="flex flex-col">
{#each config.mappings as mapping, i (mapping.then)}
<!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
<TagRenderingMappingInput
{mapping}
{tags}
{state}
{selectedElement}
{layer}
{searchTerm}
mappingIsSelected={selectedMapping === i}
>
<input
type="radio"
bind:group={selectedMapping}
name={"mappings-radio-" + config.id}
value={i}
on:keypress={(e) => onInputKeypress(e)}
/>
</TagRenderingMappingInput>
{/each}
{#if config.freeform?.key}
<label class="flex">
<input
type="radio"
bind:group={selectedMapping}
name={"mappings-radio-" + config.id}
value={config.mappings?.length}
on:keypress={(e) => onInputKeypress(e)}
/>
<FreeformInput
{config}
{tags}
{feedback}
{unit}
{state}
feature={selectedElement}
value={freeformInput}
on:selected={() => (selectedMapping = config.mappings?.length)}
on:submit={onSave}
/>
</label>
{/if}
</div>
{:else if mappings !== undefined && config.multiAnswer}
<!-- Multiple answers can be chosen: checkboxes -->
<div class="flex flex-col">
{#each config.mappings as mapping, i (mapping.then)}
<TagRenderingMappingInput
{mapping}
{tags}
{state}
{selectedElement}
{layer}
{searchTerm}
mappingIsSelected={checkedMappings[i]}
>
<input
type="checkbox"
name={"mappings-checkbox-" + config.id + "-" + i}
bind:checked={checkedMappings[i]}
on:keypress={(e) => onInputKeypress(e)}
/>
</TagRenderingMappingInput>
{/each}
{#if config.freeform?.key}
<label class="flex">
<input
type="checkbox"
name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
bind:checked={checkedMappings[config.mappings.length]}
on:keypress={(e) => onInputKeypress(e)}
/>
{#if config.questionhint}
<div class="max-h-60 overflow-y-auto">
<SpecialTranslation
t={config.questionhint}
{tags}
{state}
{layer}
feature={selectedElement}
/>
</div>
{/if}
</legend>
{#if config.mappings?.length >= 8}
<div class="sticky flex w-full" aria-hidden="true">
<Search class="h-6 w-6" />
<input
type="text"
bind:value={$searchTerm}
class="w-full"
use:placeholder={Translations.t.general.searchAnswer}
/>
</div>
{/if}
{#if config.freeform?.key && !(mappings?.length > 0)}
<!-- There are no options to choose from, simply show the input element: fill out the text field -->
<FreeformInput
{config}
{tags}
@ -353,39 +270,122 @@
value={freeformInput}
on:submit={onSave}
/>
</label>
{:else if mappings !== undefined && !config.multiAnswer}
<!-- Simple radiobuttons as mapping -->
<div class="flex flex-col">
{#each config.mappings as mapping, i (mapping.then)}
<!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
<TagRenderingMappingInput
{mapping}
{tags}
{state}
{selectedElement}
{layer}
{searchTerm}
mappingIsSelected={selectedMapping === i}
>
<input
type="radio"
bind:group={selectedMapping}
name={"mappings-radio-" + config.id}
value={i}
on:keypress={(e) => onInputKeypress(e)}
/>
</TagRenderingMappingInput>
{/each}
{#if config.freeform?.key}
<label class="flex gap-x-1">
<input
type="radio"
bind:group={selectedMapping}
name={"mappings-radio-" + config.id}
value={config.mappings?.length}
on:keypress={(e) => onInputKeypress(e)}
/>
<FreeformInput
{config}
{tags}
{feedback}
{unit}
{state}
feature={selectedElement}
value={freeformInput}
on:selected={() => (selectedMapping = config.mappings?.length)}
on:submit={onSave}
/>
</label>
{/if}
</div>
{:else if mappings !== undefined && config.multiAnswer}
<!-- Multiple answers can be chosen: checkboxes -->
<div class="flex flex-col">
{#each config.mappings as mapping, i (mapping.then)}
<TagRenderingMappingInput
{mapping}
{tags}
{state}
{selectedElement}
{layer}
{searchTerm}
mappingIsSelected={checkedMappings[i]}
>
<input
type="checkbox"
name={"mappings-checkbox-" + config.id + "-" + i}
bind:checked={checkedMappings[i]}
on:keypress={(e) => onInputKeypress(e)}
/>
</TagRenderingMappingInput>
{/each}
{#if config.freeform?.key}
<label class="flex gap-x-1">
<input
type="checkbox"
name={"mappings-checkbox-" + config.id + "-" + config.mappings?.length}
bind:checked={checkedMappings[config.mappings.length]}
on:keypress={(e) => onInputKeypress(e)}
/>
<FreeformInput
{config}
{tags}
{feedback}
{unit}
{state}
feature={selectedElement}
value={freeformInput}
on:submit={onSave}
/>
</label>
{/if}
</div>
{/if}
<LoginToggle {state}>
<Loading slot="loading" />
<SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}>
<Login slot="image" class="h-8 w-8" />
<Tr t={Translations.t.general.loginToStart} slot="message" />
</SubtleButton>
{#if $feedback !== undefined}
<div class="alert" aria-live="assertive" role="alert">
<Tr t={$feedback} />
</div>
{/if}
</div>
{/if}
</label>
<LoginToggle {state}>
<Loading slot="loading" />
<SubtleButton slot="not-logged-in" on:click={() => state?.osmConnection?.AttemptLogin()}>
<Login slot="image" class="h-8 w-8" />
<Tr t={Translations.t.general.loginToStart} slot="message" />
</SubtleButton>
{#if $feedback !== undefined}
<div class="alert" aria-live="assertive" role="alert">
<Tr t={$feedback} />
</div>
{/if}
<div
class="interactive sticky bottom-0 flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap"
style="z-index: 11"
>
<!-- TagRenderingQuestion-buttons -->
<slot name="cancel" />
<slot name="save-button" {selectedTags}>
<button
on:click={onSave}
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}
<div
class="interactive sticky bottom-0 flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap"
style="z-index: 11"
>
<Tr t={Translations.t.general.save} />
</button>
</slot>
</div>
{#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging}
<!-- TagRenderingQuestion-buttons -->
<slot name="cancel" />
<slot name="save-button" {selectedTags}>
<button
on:click={onSave}
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}
>
<Tr t={Translations.t.general.save} />
</button>
</slot>
</div>
{#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging}
<span class="flex flex-wrap justify-between">
<TagHint {state} tags={selectedTags} currentProperties={$tags} />
<span class="flex flex-wrap">
@ -397,8 +397,12 @@
{/if}
</span>
</span>
{/if}
<slot name="under-buttons" />
</LoginToggle>
</form>
{/if}
<slot name="under-buttons" />
</LoginToggle>
</fieldset>
</form>
</div>
{/if}

2
src/UI/SpecialVisualization.ts
View file

@ -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

67
src/UI/SpecialVisualizations.ts
View file

@ -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<Record<string, string>>
@ -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<Record<string, string>>,
@ -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<Record<string, string>>,
@ -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<any>) =>
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<any>, 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<Record<string, string>>,
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<Record<string, string>>,
@ -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<Record<string, string>>,
@ -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<Record<string, string>>,
@ -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<Record<string, string>>,
@ -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<Record<string, string>>,

6
src/Utils.ts
View file

@ -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