Image Zoom

1<script lang="ts">
2	import { writable } from 'svelte/store';
3	import { setImageZoomContext, type ZoomImageData } from './ctx';
4	import { fade } from 'svelte/transition';
5	import { onMount, onDestroy, type Snippet } from 'svelte';
6	import { Button } from '$lib/components/ui/button';
7	import { X, ChevronLeft, ChevronRight } from '@lucide/svelte';
8	import { cn } from '$UTILS$';
9
10	let {
11		class: className,
12		children
13	}: {
14		class?: string;
15		children?: Snippet;
16	} = $props();
17
18	const registeredImagesStore = writable<ZoomImageData[]>([]);
19	const currentImageIndexStore = writable<number | null>(null);
20	const openStore = writable(false);
21
22	let registeredImages = $state<ZoomImageData[]>([]);
23	let currentImageIndex = $state<number | null>(null);
24	let isOpen = $state(false);
25
26	$effect(() => {
27		registeredImages = $registeredImagesStore;
28		currentImageIndex = $currentImageIndexStore;
29		isOpen = $openStore;
30	});
31
32	const currentImageData = $derived(
33		currentImageIndex !== null ? registeredImages[currentImageIndex] : null
34	);
35	const hasMultipleImages = $derived(registeredImages.length > 1);
36	const hasPrevious = $derived(currentImageIndex !== null && currentImageIndex > 0);
37	const hasNext = $derived(
38		currentImageIndex !== null && currentImageIndex < registeredImages.length - 1
39	);
40
41	function registerImage(imageData: Omit<ZoomImageData, 'index'>) {
42		const index = $registeredImagesStore.length;
43		$registeredImagesStore = [...$registeredImagesStore, { ...imageData, index }];
44		return index;
45	}
46
47	function openImage(index: number) {
48		$currentImageIndexStore = index;
49		$openStore = true;
50	}
51
52	function nextImage() {
53		if (currentImageIndex !== null && hasNext) {
54			$currentImageIndexStore = currentImageIndex + 1;
55		}
56	}
57
58	function prevImage() {
59		if (currentImageIndex !== null && hasPrevious) {
60			$currentImageIndexStore = currentImageIndex - 1;
61		}
62	}
63
64	function closeZoom() {
65		$openStore = false;
66		$currentImageIndexStore = null;
67	}
68
69	setImageZoomContext({
70		registeredImages: registeredImagesStore,
71		currentImageIndex: currentImageIndexStore,
72		open: openStore,
73		registerImage,
74		openImage,
75		nextImage,
76		prevImage
77	});
78
79	function handleKeydown(event: KeyboardEvent) {
80		if (!isOpen) return;
81		if (event.key === 'Escape') closeZoom();
82		if (event.key === 'ArrowLeft') prevImage();
83		if (event.key === 'ArrowRight') nextImage();
84	}
85</script>
86
87<svelte:window onkeydown={handleKeydown} />
88
89// … truncated