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

Fix: rendering of 'inline' was not dynamic

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-11 01:59:47 +02:00
parent 2b05d79dbb
commit 60d825de3c
2 changed files with 50 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Popup/TagRendering/FreeformInput.svelte
View file

@ -17,11 +17,15 @@
export let unit: Unit | undefined export let unit: Unit | undefined
let placeholder = config.freeform?.placeholder let placeholder = config.freeform?.placeholder
let inline = config.freeform?.inline
$: { $: {
console.log("Config is", config)
placeholder = config.freeform?.placeholder placeholder = config.freeform?.placeholder
inline = false
inline = config.freeform?.inline
} }
let inline = config.freeform.inline
console.log("Inline is", inline )
export let feedback: UIEventSource<Translation> = new UIEventSource<Translation>(undefined); export let feedback: UIEventSource<Translation> = new UIEventSource<Translation>(undefined);
let dispatch = createEventDispatcher<{ "selected" }>(); let dispatch = createEventDispatcher<{ "selected" }>();
@ -36,7 +40,7 @@
<div class="inline-flex flex-col"> <div class="inline-flex flex-col">
{#if config.freeform.inline} {#if inline}
<Inline key={config.freeform.key} {tags} template={config.render}> <Inline key={config.freeform.key} {tags} template={config.render}>
<ValidatedInput {feedback} {getCountry} {unit} on:selected={() => dispatch("selected")} <ValidatedInput {feedback} {getCountry} {unit} on:selected={() => dispatch("selected")}
type={config.freeform.type} {placeholder} {value}></ValidatedInput> type={config.freeform.type} {placeholder} {value}></ValidatedInput>

62
UI/Popup/TagRendering/Inline.svelte
View file

@ -1,27 +1,51 @@
<script lang="ts"> <script lang="ts">
import { Utils } from "../../../Utils.js"; import {Utils} from "../../../Utils.js";
import { UIEventSource } from "../../../Logic/UIEventSource"; import {UIEventSource} from "../../../Logic/UIEventSource";
import { onDestroy } from "svelte"; import {onDestroy} from "svelte";
import { Translation } from "../../i18n/Translation"; import {Translation} from "../../i18n/Translation";
import Locale from "../../i18n/Locale"; import Locale from "../../i18n/Locale";
import FromHtml from "../../Base/FromHtml.svelte"; import FromHtml from "../../Base/FromHtml.svelte";
export let template: Translation; export let key: string;
let _template: string export let tags: UIEventSource<Record<string, string>>;
onDestroy(Locale.language.addCallbackAndRunD(l => { let _tags = tags.data;
_template = template.textFor(l) onDestroy(tags.addCallbackAndRunD(tags => {
})) _tags = tags;
export let key: string; }));
export let tags: UIEventSource<Record<string, string>>;
let _tags = tags.data; export let template: Translation;
onDestroy(tags.addCallbackAndRunD(tags => { let _template: string
_tags = tags; let before: string
})); let after: string
let [before, after] = _template.split("{" + key + "}");
onDestroy(Locale.language.addCallbackAndRunD(l => {
_template = template.textFor(l)
if (_template) {
const splt = _template.split("{" + key + "}")
before = splt[0]
after = splt[1]
console.log("Updating template to", _template, before, after)
}
}))
$: {
_template = template.textFor(Locale.language.data)
if (_template) {
const splt = _template.split("{" + key + "}")
before = splt[0]
after = splt[1]
console.log("Updating template to", _template, before, after)
}
}
$: {
console.log("B/A:", before, after)
}
</script> </script>
<span> <span>
<FromHtml src={Utils.SubstituteKeys(before, _tags)}/> <FromHtml src={Utils.SubstituteKeys(before, _tags)}/>
<slot /> <slot/>
<FromHtml src={Utils.SubstituteKeys(after, _tags)}/> <FromHtml src={Utils.SubstituteKeys(after, _tags)}/>
</span> </span>