feat: add modal on img

src/lib/elements/JobElement.svelte

@@ -11,13 +11,45 @@
 	import type { CurrentLanguage } from '$lib/types';
 	export let job: Job;
 	export let currentLanguage: CurrentLanguage = 'it';
+	const dialogs: { [k: string]: HTMLDialogElement } = {};
+	export let modalOpen: boolean;
 </script>
 
+{#each job.images as image}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<dialog
+		bind:this={dialogs[window.btoa(image)]}
+		on:scroll|preventDefault
+		on:click={() => {
+			dialogs[window.btoa(image)].close();
+			modalOpen = false;
+		}}
+	>
+		<img
+			src={image}
+			alt={image}
+			loading="lazy"
+			on:scroll={(e) => {
+				console.log(e);
+			}}
+		/>
+	</dialog>
+{/each}
+
 <div class="job-container">
 	<h3>{job.title[currentLanguage]}</h3>
 	<div class="image-container">
 		{#each job.images as image}
-			<img src={image} alt={image} loading="lazy" />
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<img
+				src={image}
+				alt={image}
+				loading="lazy"
+				on:click={() => {
+					dialogs[window.btoa(image)].showModal();
+					modalOpen = true;
+				}}
+			/>
 		{/each}
 	</div>
 	<div class="text-content">
@@ -71,9 +103,66 @@
 		width: 100%;
 		img {
 			background-color: $text-color;
+			cursor: zoom-in;
 		}
 		display: flex;
 		flex-direction: column;
 		height: 100%;
 	}
+	.hidden {
+		display: none;
+	}
+	.modal {
+		display: flex;
+		position: fixed;
+		position: -webkit-sticky;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		background-color: rgba($color: #000000, $alpha: 0.4);
+		width: 100%;
+		height: 100%;
+		justify-content: center;
+	}
+	.modal-open {
+		overflow-y: hidden;
+	}
+	.modal-closed {
+		overflow-y: unset;
+	}
+	dialog {
+		img {
+			max-width: 80vw;
+			max-height: 80vh;
+			height: auto;
+			margin: auto;
+			background-color: $text-color;
+		}
+	}
+	dialog::backdrop {
+		background: rgba(0, 0, 0, 0.3);
+	}
+
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 </style>

src/lib/elements/Jobs.svelte

@@ -4,11 +4,12 @@
 	import JobElement from './JobElement.svelte';
 	export let currentLanguage: CurrentLanguage = 'it';
 	export let jobs: Job[] = [];
+	export let modalOpen: boolean;
 </script>
 
 <div class="jobs-container">
 	{#each jobs as job}
-		<div class="job-card"><JobElement {job} {currentLanguage} /></div>
+		<div class="job-card"><JobElement {job} {currentLanguage} bind:modalOpen /></div>
 	{/each}
 	{#if jobs.length % 2 !== 0}
 		<div class="job-card hide" />