From 5769c0cea6e673c02feb0304d9d1f8998eac9553 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Thu, 13 Jul 2023 15:25:42 +0200
Subject: [PATCH] click on title image for full image

---
 .../components/CreateIngredientList.svelte    |  4 +-
 src/lib/components/CreateStepList.svelte      |  3 +-
 src/lib/components/TitleImgParallax.svelte    | 59 ++++++++++++++++++-
 3 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CreateIngredientList.svelte b/src/lib/components/CreateIngredientList.svelte
index 5893d7f..ac9cb56 100644
--- a/src/lib/components/CreateIngredientList.svelte
+++ b/src/lib/components/CreateIngredientList.svelte
@@ -253,12 +253,12 @@ dialog{
 	box-sizing: content-box;
 	width: 100%;
 	height: 100%;
-	background-color: rgba(255,255,255, 0.001);
+	background-color: transparent;
 	border: unset;
 	margin: 0;
 	transition: 500ms;
 }
-dialog[open]{
+dialog[open]::backdrop{
     animation: show 200ms ease forwards;
 }
 @keyframes show{
diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
index 4f3ffdc..7278f1e 100644
--- a/src/lib/components/CreateStepList.svelte
+++ b/src/lib/components/CreateStepList.svelte
@@ -248,7 +248,6 @@ dialog{
 	height: 100%;
 	background-color: rgba(255,255,255, 0.001);
 	border: unset;
-	backdrop-filter: blur(10px);
 	margin: 0;
 	transition: 200ms;
 }
@@ -282,7 +281,7 @@ dialog .adder input::placeholder{
 		width: 70%;
 	}
 }
-dialog[open]{
+dialog[open]::backdrop{
     animation: show 200ms ease forwards;
 }
 @keyframes show{
diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
index 16bdc79..98aa76d 100644
--- a/src/lib/components/TitleImgParallax.svelte
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -10,6 +10,18 @@
 		}
 	})
 
+	function show_dialog_img(){
+		if(document.querySelector("img").complete){
+			document.querySelector("#img_carousel").showModal();
+		}
+	}
+	function close_dialog_img(){
+		document.querySelector("#img_carousel").close();
+	}
+	import Cross from "$lib/assets/icons/Cross.svelte";
+	import "$lib/css/action_button.css";
+	import "$lib/css/shake.css";
+	import { do_on_key } from "./do_on_key";
 </script>
 <style>
 :root {
@@ -102,21 +114,64 @@ div:has(.placeholder){
         width: min(1000px, 100dvw);
   	height: max(60dvh,600px);
 	overflow: hidden;
+	cursor:zoom-in;
 }
 .unblur#image{
 	filter: blur(0px) !important;
 	opacity: 1;
 }
+
+
+/* DIALOG */
+dialog{
+	position: relative;
+	background-color: unset;
+	padding:0;
+	max-height: 90vh;
+	margin-inline: auto;
+	overflow: visible;
+	border: unset;
+}
+dialog img{
+	max-width: calc(95vmin - 2rem);
+	max-height: calc(95vmin- 2rem);
+}
+dialog[open]::backdrop{
+    animation: show 200ms ease forwards;
+}
+@keyframes show{
+    from {
+	backdrop-filter: blur(0px);
+    }
+    to {
+	backdrop-filter: blur(10px);
+    }
+}
+dialog button{
+	position: absolute;
+	top: -2rem;
+	right: -2rem;
+}
 </style>
 <section class="section">
     <figure class="image-container">
-    	<div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+    	<div on:click={show_dialog_img}>
 		<div class=placeholder style="background-image:url({placeholder_src})" >
 			<div class=placeholder_blur>
-			<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
+			<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}}  alt=""/>
 			</div>
 		</div>
 	</div>
 	</figure>
     <div class=content><slot></slot></div>
 </section>
+
+<dialog id=img_carousel>
+	<div>
+	<img class:unblur={isloaded} {src} alt="">
+		<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} on:click={close_dialog_img}>
+	<Cross fill=white width=2rem height=2rem></Cross>
+		</button>
+	</div>
+</dialog>