From 13bb2f80a8fc27f65fcaba247317289f058abc73 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 17 Oct 2024 15:02:03 -0700
Subject: [PATCH] Open images in a modal

---
 src/app/components/ContentLinkBlock.svelte  |  9 ++++++++-
 src/app/components/ContentLinkDetail.svelte | 12 ++++++++++++
 src/app/components/ModalContainer.svelte    |  4 ++--
 src/app/modal.ts                            |  1 +
 src/lib/components/Dialog.svelte            | 12 ++++++------
 src/routes/home/people/+page.svelte         |  4 ----
 6 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/ContentLinkDetail.svelte

diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index 5f49ad94..45cade14 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/src/app/components/ContentLinkBlock.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import {ellipsize, postJson} from "@welshman/lib"
+  import {fade} from '@lib/transition'
   import {dufflepud, imgproxy} from "@app/state"
   import Link from "@lib/components/Link.svelte"
+  import ContentLinkDetail from '@app/components/ContentLinkDetail.svelte'
+  import {pushModal} from '@app/modal'
 
   export let value
 
@@ -16,6 +19,8 @@
 
     return json
   }
+
+  const expand = () => pushModal(ContentLinkDetail, {url}, {fullscreen: true})
 </script>
 
 <Link
@@ -28,7 +33,9 @@
       <track kind="captions" />
     </video>
   {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
-    <img alt="Link preview" src={imgproxy(url)} class="max-h-96 object-cover object-center" />
+    <button type="button" on:click|stopPropagation|preventDefault={expand}>
+      <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96" />
+    </button>
   {:else}
     {#await loadPreview()}
       <div class="center my-12 w-full">
diff --git a/src/app/components/ContentLinkDetail.svelte b/src/app/components/ContentLinkDetail.svelte
new file mode 100644
index 00000000..a4022932
--- /dev/null
+++ b/src/app/components/ContentLinkDetail.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Button from '@lib/components/Button.svelte'
+  import {imgproxy} from "@app/state"
+
+  export let url
+
+  const back = () => history.back()
+</script>
+
+<Button class="m-auto h-screen w-screen p-4 cursor-pointer" on:click={back}>
+  <img alt="" src={imgproxy(url)} class="m-auto rounded-box max-w-full max-h-full" />
+</Button>
diff --git a/src/app/components/ModalContainer.svelte b/src/app/components/ModalContainer.svelte
index 8b9ec74e..6dbebcfe 100644
--- a/src/app/components/ModalContainer.svelte
+++ b/src/app/components/ModalContainer.svelte
@@ -20,13 +20,13 @@
 <svelte:window on:keydown={onKeyDown} />
 
 {#if hashIsValid && modal?.options?.drawer}
-  <Drawer onClose={clearModals}>
+  <Drawer onClose={clearModals} {...modal.options}>
     {#key modal.id}
       <svelte:component this={modal.component} {...modal.props} />
     {/key}
   </Drawer>
 {:else if hashIsValid && modal}
-  <Dialog onClose={clearModals}>
+  <Dialog onClose={clearModals} {...modal.options}>
     {#key modal.id}
       <svelte:component this={modal.component} {...modal.props} />
     {/key}
diff --git a/src/app/modal.ts b/src/app/modal.ts
index c474987d..33778796 100644
--- a/src/app/modal.ts
+++ b/src/app/modal.ts
@@ -5,6 +5,7 @@ import {goto} from "$app/navigation"
 
 export type ModalOptions = {
   drawer?: boolean
+  fullscreen?: boolean
 }
 
 export type Modal = {
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 12ed1c72..6ac8cf3e 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -3,17 +3,17 @@
   import {fade, fly} from "@lib/transition"
 
   export let onClose: any = noop
+  export let fullscreen = false
+
+  $: extraClass = !fullscreen && "card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
 </script>
 
 <div class="center fixed inset-0 z-modal">
   <button
-    class="absolute inset-0 cursor-pointer bg-black opacity-50"
-    transition:fade
+    class="absolute inset-0 cursor-pointer bg-black opacity-75"
+    transition:fade={{duration: 300}}
     on:click={onClose} />
-  <div
-    class="relative scroll-container card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
-
-    transition:fly={{duration: 300}}>
+  <div class="relative scroll-container {extraClass}" transition:fly={{duration: 300}}>
     <slot />
   </div>
 </div>
diff --git a/src/routes/home/people/+page.svelte b/src/routes/home/people/+page.svelte
index 49a7c78c..53511ee7 100644
--- a/src/routes/home/people/+page.svelte
+++ b/src/routes/home/people/+page.svelte
@@ -30,10 +30,6 @@
 </script>
 
 <div class="content column gap-4" bind:this={element}>
-  <PageHeader>
-    <div slot="title">People</div>
-    <div slot="info">Get the latest from people in your network</div>
-  </PageHeader>
   <label class="input input-bordered flex w-full items-center gap-2">
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for people..." />