Add Fullscreen in viewer, Track links with Google Analytics, Use .env file

- Fullscreen is a component that watches a store value set by the Carousel component on a picture click
- Use a .env file for API and website related settings and informations
- Google Analytics is now in place, tracking each routes link and viewer photo change

src/organisms/Fullscreen.svelte

@@ -0,0 +1,82 @@
+<script>
+    import { fullscreen } from '../utils/store'
+    import { throttle, getThumbnail } from '../utils/functions'
+
+    // Dependencies
+    import imagesLoaded from 'imagesloaded'
+
+    // Components
+    import IconGlobe from '../atoms/IconGlobe'
+    import IconZoomOut from '../atoms/IconZoomOut'
+
+    // Variables
+    let scope
+    let loading = false
+    let open = false
+    let closed = false
+
+    // Wait for fullscreen store value
+    $: {
+        if ($fullscreen) openFullscreen($fullscreen)
+        else closeFullscreen()
+    }
+
+
+    /*
+    ** Functions
+    */
+    // Open fullscreen
+    const openFullscreen = throttle(currentPhoto => {
+        loading = true
+
+        if (!open) {
+            const img = document.createElement('img')
+            const imgContainer = scope.querySelector('.fullscreen__image')
+            img.src = getThumbnail(currentPhoto.image.private_hash, null, 1600, 'crop', 80)
+            img.alt = `${currentPhoto.name}, ${currentPhoto.location.name}, ${currentPhoto.location.country.name}`
+            img.width = 2400
+            img.height = 1600
+            imgContainer.append(img)
+
+            // Show fullscreen when new image is loaded
+            imagesLoaded(scope, instance => {
+                open = true
+                loading = false
+                closed = false
+
+                // Scroll to photo's center
+                imgContainer.scrollTo((img.clientWidth - scope.clientWidth) / 2, 0)
+            })
+        }
+    }, 800)
+
+    // Close fullscreen
+    const closeFullscreen = throttle(() => {
+        // Reset values
+        open = false
+        closed = true
+
+        // Clear image and reset fullscreen store value
+        setTimeout(() => {
+            scope.querySelector('.fullscreen__image').innerHTML = ''
+            fullscreen.set()
+        }, 800) // Transition duration
+    }, 800)
+</script>
+
+<div class="fullscreen" bind:this={scope}>
+    <div class="fullscreen__image" class:is-open={open} on:click={closeFullscreen} />
+
+    <div class="fullscreen__loading" class:is-hidden={!loading}>
+        <IconGlobe width="24" color="#fff" animated="true" />
+    </div>
+
+    <div class="fullscreen__close" class:is-visible={open}>
+        <button class="button-control button-control--gray button-control--shadow dir-top" aria-label="Close"
+            on:click={closeFullscreen}
+        >
+            <IconZoomOut color="#fff" width="22" class="icon" />
+            <IconZoomOut color="#fff" width="22" class="icon" hidden="true" />
+        </button>
+    </div>
+</div>