diff --git a/web/src/lib/components/shared-components/coordinates-input.svelte b/web/src/lib/components/shared-components/coordinates-input.svelte index 2eb9682ff6..f5ad120a7b 100644 --- a/web/src/lib/components/shared-components/coordinates-input.svelte +++ b/web/src/lib/components/shared-components/coordinates-input.svelte @@ -14,14 +14,32 @@ onUpdate(lat, lng); } }; + + const onPaste = (event: ClipboardEvent) => { + const coords = event.clipboardData?.getData('text/plain')?.split(','); + if (!coords || coords.length !== 2) { + return; + } + + const [latitude, longitude] = coords.map((coord) => Number.parseFloat(coord)); + if (Number.isNaN(latitude) || latitude < -90 || latitude > 90) { + return; + } + if (Number.isNaN(longitude) || longitude < -180 || longitude > 180) { + return; + } + + event.preventDefault(); + [lat, lng] = [latitude, longitude]; + }; </script> <div> <label class="immich-form-label" for="latitude-input-{id}">{$t('latitude')}</label> - <NumberRangeInput id="latitude-input-{id}" min={-90} max={90} {onInput} bind:value={lat} /> + <NumberRangeInput id="latitude-input-{id}" min={-90} max={90} {onInput} {onPaste} bind:value={lat} /> </div> <div> <label class="immich-form-label" for="longitude-input-{id}">{$t('longitude')}</label> - <NumberRangeInput id="longitude-input-{id}" min={-180} max={180} {onInput} bind:value={lng} /> + <NumberRangeInput id="longitude-input-{id}" min={-180} max={180} {onInput} {onPaste} bind:value={lng} /> </div> diff --git a/web/src/lib/components/shared-components/number-range-input.svelte b/web/src/lib/components/shared-components/number-range-input.svelte index e4c780a708..2e7dca8781 100644 --- a/web/src/lib/components/shared-components/number-range-input.svelte +++ b/web/src/lib/components/shared-components/number-range-input.svelte @@ -1,5 +1,6 @@ <script lang="ts"> import { clamp } from 'lodash-es'; + import type { ClipboardEventHandler } from 'svelte/elements'; export let id: string; export let min: number; @@ -8,6 +9,7 @@ export let required = true; export let value: number | null = null; export let onInput: (value: number | null) => void; + export let onPaste: ClipboardEventHandler<HTMLInputElement> | undefined = undefined; </script> <input @@ -25,4 +27,5 @@ } onInput(value); }} + on:paste={onPaste} />