Implement Fullscreen for mobile on photo Viewer

src/routes/[country]/[location]/[photo].svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
     import { browser } from '$app/env'
     import { page } from '$app/stores'
+    import { tick } from 'svelte'
+    import { scale } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { getAssetUrlKey } from '$utils/helpers'
     import { throttle } from '$utils/functions'
     import { swipe } from '$utils/interactions/swipe'
@@ -25,8 +28,10 @@
     enum directions { PREV, NEXT }
 
     let innerWidth: number
+    let fullscreenEl: HTMLElement
     let globalOffset = offset
     let isLoading = false
+    let isFullscreen = false
     let hasNext = offset + limit < countPhotos
     let hasPrev = offset > 0
 
@@ -61,10 +66,14 @@
      * Photo navigation
      */
     // Go to next photo
-    const goToNext = throttle(() => canGoPrev && currentIndex++, 200)
+    const goToNext = throttle(() => {
+        canGoPrev && currentIndex++
+    }, 200)
 
     // Fo to previous photo
-    const goToPrevious = throttle(() => canGoNext && (currentIndex = Math.max(currentIndex - 1, 0)), 200)
+    const goToPrevious = throttle(() => {
+        canGoNext && (currentIndex = Math.max(currentIndex - 1, 0))
+    }, 200)
 
     // Enable navigation with keyboard
     const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
@@ -95,6 +104,25 @@
     }
 
 
+    /**
+     * Fullscreen for mobile
+     */
+    const toggleFullscreen = async () => {
+        if (innerWidth < 992) {
+            isFullscreen = !isFullscreen
+
+            // Scroll at middle of photo
+            if (isFullscreen) {
+                // Wait for fullscreen children to be mounted
+                await tick()
+                const picture = fullscreenEl.querySelector('picture')
+                const image = fullscreenEl.querySelector('img')
+                picture.scrollTo((image.offsetWidth - innerWidth) / 2, 0)
+            }
+        }
+    }
+
+
     /**
      * Load photos
      */
@@ -188,8 +216,10 @@
 
 <main class="viewer-photo">
     <div class="container grid">
+        <p class="viewer-photo__notice text-label">Tap for fullscreen</p>
+
         <div class="viewer-photo__carousel">
-            <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe}>
+            <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as photo, index (photo.id)}
                     <Image
                         class="photo photo--{currentIndex === 0 ? index + 1 : index}"
@@ -238,6 +268,25 @@
             </div>
         </div>
     </div>
+
+    {#if isFullscreen}
+        <div class="viewer-photo__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
+            <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
+                <Image
+                    id={currentPhoto.image.id}
+                    sizeKey="photo-grid-large"
+                    width={1266}
+                    height={844}
+                    alt={currentPhoto.title}
+                />
+                <ButtonCircle color="gray-medium" class="close">
+                    <svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.751 0c4.274 0 7.752 3.477 7.752 7.751 0 1.846-.65 3.543-1.73 4.875l3.99 3.991a.81.81 0 1 1-1.146 1.146l-3.99-3.991a7.714 7.714 0 0 1-4.876 1.73C3.477 15.503 0 12.027 0 7.753 0 3.476 3.477 0 7.751 0Zm0 1.62a6.138 6.138 0 0 0-6.13 6.131 6.138 6.138 0 0 0 6.13 6.132 6.138 6.138 0 0 0 6.131-6.132c0-3.38-2.75-6.13-6.13-6.13Zm2.38 5.321a.81.81 0 1 1 0 1.62h-4.76a.81.81 0 1 1 0-1.62h4.76Z" />
+                    </svg>
+                </ButtonCircle>
+            </div>
+        </div>
+    {/if}
 </main>