bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { t } from '$lib/app/i18n'
3 import { Button, Modal, TextInput } from 'mono-svelte'
4 import ImageAttachForm from './ImageAttachForm.svelte'
5 import Switch from './Switch.svelte'
6
7 let {
8 open = $bindable(),
9 imageUrl: passedImageUrl = $bindable(),
10 }: { open: boolean; imageUrl?: string } = $props()
11
12 let imageUrl = $derived(passedImageUrl)
13 let customUrl = $state(false)
14</script>
15
16<Modal bind:open title={$t('form.post.uploadImage')}>
17 <div class="flex justify-between gap-1 flex-wrap">
18 <Switch
19 options={[false, true]}
20 optionNames={[$t('common.attach'), $t('content.url')]}
21 bind:selected={customUrl}
22 />
23
24 <Button
25 onclick={() => {
26 passedImageUrl = undefined
27 open = false
28 }}
29 size="xs"
30 rounding="xl"
31 >
32 {$t('common.remove')}
33 </Button>
34 </div>
35
36 {#if customUrl}
37 <form
38 onsubmit={(e) => {
39 e.preventDefault()
40 if (!imageUrl) throw new Error('missing imageurl')
41
42 if (URL.canParse != undefined) {
43 if (!URL.canParse(imageUrl)) throw new Error('invalid URL')
44 }
45
46 passedImageUrl = imageUrl
47 open = false
48 }}
49 class="contents"
50 >
51 <TextInput
52 label={$t('content.url')}
53 bind:value={imageUrl}
54 pattern="http(s)?:\/\/(.*).(png|jpg|gif|avif|webp|jpeg|jxl|svg|bmp)"
55 />
56 <Button submit color="primary" size="lg">
57 {$t('form.submit')}
58 </Button>
59 </form>
60 {:else}
61 <ImageAttachForm
62 multiple={false}
63 onupload={(uploaded) => {
64 open = false
65 passedImageUrl = uploaded[0]
66 }}
67 />
68 {/if}
69</Modal>