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,68 @@
 		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 > div {
+	// 	padding: 1em;
+	// }
+	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" />

src/routes/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+	import {} from 'svelte';
 	import { MetaTags } from 'svelte-meta-tags';
 	import type { CurrentLanguage } from '$lib/types';
 	import AboutMe from '$lib/elements/AboutMe.svelte';
 	import Jobs from '$lib/elements/Jobs.svelte';
 	import Menu from '$lib/elements/Menu.svelte';
-	import MenuMobile from '$lib/elements/MenuMobile.svelte';
 	import Training from '$lib/elements/Training.svelte';
 	import Data_jobs from '$lib/model/jobs.json';
 	import Data_portfolio from '$lib/model/portfolio.json';
@@ -24,6 +24,7 @@
 		contacts: { it: 'Contatti', en: 'Contacts' },
 		portfolio: { it: 'Portfolio', en: 'Portfolio' }
 	};
+	let modalOpen: boolean = false;
 </script>
 
 <MetaTags
@@ -52,14 +53,22 @@
 	<!-- svelte-ignore a11y-invalid-attribute -->
 	<LanguageSelector bind:currentLanguage />
 	<Menu {currentLanguage} />
-	<div class="default">
+	<div
+		class="default"
+		on:scroll={(event) => {
+			if (modalOpen) {
+				event.preventDefault();
+			}
+			console.log(event);
+		}}
+	>
 		<span id="home" class="anchor" />
 		<AboutMe {currentLanguage} />
 	</div>
 	<div class="default">
 		<span id="jobs" class="anchor" />
 		<h2>{titles.job[currentLanguage]}</h2>
-		<Jobs {jobs} {currentLanguage} />
+		<Jobs {jobs} {currentLanguage} bind:modalOpen />
 	</div>
 	<div class="default">
 		<span id="training" class="anchor" />
@@ -69,7 +78,7 @@
 	<div class="default">
 		<span id="portfolio" class="anchor" />
 		<h2>{titles.portfolio[currentLanguage]}</h2>
-		<Jobs jobs={portfolio} {currentLanguage} />
+		<Jobs jobs={portfolio} {currentLanguage} bind:modalOpen />
 	</div>
 </main>
 

vite.config.ts

@@ -5,6 +5,6 @@ const config: UserConfig = {
 	plugins: [sveltekit()]
 };
 
-config.server = { port: 80, origin: 'pettinato.eu' };
+// config.server = { port: 80, origin: 'pettinato.eu' };
 
 export default config;

vite.config.ts.js

@@ -0,0 +1,11 @@
+// vite.config.ts
+import { sveltekit } from "@sveltejs/kit/vite";
+var config = {
+  plugins: [sveltekit()]
+};
+// config.server = { port: 8800, origin: "pettinato.eu" };
+var vite_config_default = config;
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImltcG9ydCB7IHN2ZWx0ZWtpdCB9IGZyb20gJ0BzdmVsdGVqcy9raXQvdml0ZSc7XG5pbXBvcnQgdHlwZSB7IFVzZXJDb25maWcsIGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnO1xuXG5jb25zdCBjb25maWc6IFVzZXJDb25maWcgPSB7XG5cdHBsdWdpbnM6IFtzdmVsdGVraXQoKV1cbn07XG5cbmNvbmZpZy5zZXJ2ZXIgPSB7IHBvcnQ6IDgwLCBvcmlnaW46ICdwZXR0aW5hdG8uZXUnIH07XG5cbmV4cG9ydCBkZWZhdWx0IGNvbmZpZztcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBQTtBQUdBLElBQU0sU0FBcUI7QUFBQSxFQUMxQixTQUFTLENBQUM7QUFBQTtBQUdYLE9BQU8sU0FBUyxFQUFFLE1BQU0sSUFBSSxRQUFRO0FBRXBDLElBQU8sc0JBQVE7IiwKICAibmFtZXMiOiBbXQp9Cg==