your personal website on atproto - mirror
blento.app
Merge pull request #282 from flo-bit/feat/show-images-in-bigger
show images in bigger
+50
-15
+28
-9
src/lib/cards/core/ImageCard/ImageCard.svelte
+28
-9
src/lib/cards/core/ImageCard/ImageCard.svelte
···
3
3
import type { ContentComponentProps } from '../../types';
4
4
import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
5
5
import { getImage } from '$lib/helper';
6
+
import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte';
6
7
7
8
let { item = $bindable(), isEditing }: ContentComponentProps = $props();
8
9
9
10
const did = getDidContext();
11
+
12
+
let src = $derived(getImage(item.cardData, did, 'image'));
13
+
let clickable = $derived(!item.cardData.href && !isEditing && !!src);
10
14
</script>
11
15
12
-
{#key getImage(item.cardData, did, 'image')}
13
-
<img
14
-
class={[
15
-
'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
16
-
item.cardData.href ? 'group-hover/card:scale-101' : ''
17
-
]}
18
-
src={getImage(item.cardData, did, 'image')}
19
-
alt=""
20
-
/>
16
+
{#key src}
17
+
{#if clickable}
18
+
<button
19
+
type="button"
20
+
class="absolute inset-0 h-full w-full cursor-zoom-in"
21
+
onclick={() => src && openImageViewer(src)}
22
+
aria-label="View image fullscreen"
23
+
>
24
+
<img
25
+
class="absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out group-hover/card:scale-101"
26
+
{src}
27
+
alt=""
28
+
/>
29
+
</button>
30
+
{:else}
31
+
<img
32
+
class={[
33
+
'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
34
+
item.cardData.href ? 'group-hover/card:scale-101' : ''
35
+
]}
36
+
{src}
37
+
alt=""
38
+
/>
39
+
{/if}
21
40
{/key}
22
41
{#if item.cardData.href && !isEditing}
23
42
<a
+22
-6
src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
+22
-6
src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
···
6
6
import type { ContentComponentProps } from '../../types';
7
7
import Modal from '$lib/components/modal/Modal.svelte';
8
8
import { Button, Input, Subheading } from '@foxui/core';
9
+
import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte';
9
10
10
-
let { item = $bindable() }: ContentComponentProps = $props();
11
+
let { item = $bindable(), isEditing }: ContentComponentProps = $props();
11
12
12
13
const did = getDidContext();
13
14
···
81
82
{/if}
82
83
83
84
{#if decryptedUrl}
84
-
<img
85
-
class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
86
-
src={decryptedUrl}
87
-
alt=""
88
-
/>
85
+
{#if isEditing}
86
+
<img
87
+
class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
88
+
src={decryptedUrl}
89
+
alt=""
90
+
/>
91
+
{:else}
92
+
<button
93
+
type="button"
94
+
class="absolute inset-0 h-full w-full cursor-zoom-in"
95
+
onclick={() => decryptedUrl && openImageViewer(decryptedUrl)}
96
+
aria-label="View image fullscreen"
97
+
>
98
+
<img
99
+
class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
100
+
src={decryptedUrl}
101
+
alt=""
102
+
/>
103
+
</button>
104
+
{/if}
89
105
{/if}
90
106
91
107
{#if !decryptedUrl}