diff --git a/src/UI/InputElement/Validators/IconValidator.ts b/src/UI/InputElement/Validators/IconValidator.ts index da6959fa8..27852f284 100644 --- a/src/UI/InputElement/Validators/IconValidator.ts +++ b/src/UI/InputElement/Validators/IconValidator.ts @@ -16,6 +16,9 @@ export default class IconValidator extends Validator { } getFeedback(s: string, getCountry, sloppy?: boolean): Translation | undefined { + if(Utils.isEmoji(s)){ + return undefined + } s = this.reformat(s) if (!s.startsWith("http")) { if (!IconValidator.allLicenses.has(s)) { diff --git a/src/UI/Map/DynamicIcon.svelte b/src/UI/Map/DynamicIcon.svelte index 7c79a466c..9d6ccb22e 100644 --- a/src/UI/Map/DynamicIcon.svelte +++ b/src/UI/Map/DynamicIcon.svelte @@ -2,6 +2,7 @@ import { IconConfig } from "../../Models/ThemeConfig/PointRenderingConfig" import { Store } from "../../Logic/UIEventSource" import Icon from "./Icon.svelte" + import { Utils } from "../../Utils" /** * Renders a single icon. @@ -10,11 +11,21 @@ */ export let icon: IconConfig export let tags: Store> + /** + * Only used in case of emoji + */ + export let emojiHeight: number = 40 let iconItem = icon.icon?.GetRenderValue($tags)?.Subs($tags)?.txt $: iconItem = icon.icon?.GetRenderValue($tags)?.Subs($tags)?.txt let color = icon.color?.GetRenderValue($tags)?.txt ?? "#000000" $: color = icon.color?.GetRenderValue($tags)?.txt ?? "#000000" + + - +{#if iconItem?.startsWith("<")} + {@html iconItem} +{:else} + +{/if} diff --git a/src/UI/Map/DynamicMarker.svelte b/src/UI/Map/DynamicMarker.svelte index 47831a80b..a87807ad7 100644 --- a/src/UI/Map/DynamicMarker.svelte +++ b/src/UI/Map/DynamicMarker.svelte @@ -11,6 +11,11 @@ export let marker: IconConfig[] export let tags: Store> export let rotation: TagRenderingConfig = undefined + + /** + * Only used in case of emoji + */ + export let emojiHeight: number let _rotation: Store = rotation ? tags.map((tags) => rotation.GetRenderValue(tags).Subs(tags).txt) : new ImmutableStore("0deg") @@ -23,7 +28,7 @@
{#each marker as icon}
- +
{/each}
diff --git a/src/UI/Map/Icon.svelte b/src/UI/Map/Icon.svelte index 65ae1275a..fc59cac53 100644 --- a/src/UI/Map/Icon.svelte +++ b/src/UI/Map/Icon.svelte @@ -34,7 +34,8 @@ import { LinkIcon } from "@babeard/svelte-heroicons/mini" import Square_rounded from "../../assets/svg/Square_rounded.svelte" import Bug from "../../assets/svg/Bug.svelte" - import Pop_out from "../../assets/svg/Pop_out.svelte" + import Cross_bottom_right from "../../assets/svg/Cross_bottom_right.svelte" + import { Utils } from "../../Utils" /** * Renders a single icon. @@ -45,6 +46,7 @@ export let icon: string | undefined export let color: string | undefined = undefined export let clss: string | undefined = undefined + export let emojiHeight = 40 {#if icon} @@ -120,12 +122,18 @@ {:else if icon === "party"} + {:else if icon === "cross_bottom_right"} + {:else if icon === "addSmall"} {:else if icon === "link"} {:else if icon === "popout"} + {:else if Utils.isEmoji(icon)} + + {icon} + {:else} {/if} diff --git a/src/Utils.ts b/src/Utils.ts index 44268260d..07e5fdf93 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1659,4 +1659,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } } } + + private static emojiRegex = /^\p{Extended_Pictographic}+$/u + + /** + * Returns 'true' if the given string contains at least one and only emoji characters + * @param string + */ + public static isEmoji(string: string){ + return Utils.emojiRegex.test(string) + } }