Open images in a modal

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">

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>

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}

src/app/modal.ts

@@ -5,6 +5,7 @@ import {goto} from "$app/navigation"
 
 export type ModalOptions = {
   drawer?: boolean
+  fullscreen?: boolean
 }
 
 export type Modal = {

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>

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..." />