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/atoms/IconZoomOut.svelte

@@ -0,0 +1,9 @@
+<script>
+    export let width = 18
+    export let color = '#fff'
+    export let hidden = undefined
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18" {width} fill={color} class={$$props.class} aria-hidden={hidden}>
+    <path fill-rule="evenodd" d="M8.36 0a7.76 7.76 0 016.02 12.63l3.99 3.99a.81.81 0 11-1.15 1.14l-3.99-3.99A7.76 7.76 0 118.35 0zm0 1.62a6.14 6.14 0 10.01 12.28 6.14 6.14 0 00-.01-12.28zm2.38 5.32a.81.81 0 110 1.62H5.98a.81.81 0 110-1.62z"/>
+</svg>

src/organisms/Carousel.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { stores } from '@sapper/app'
-    import { currentLocation } from '../utils/store'
+    import { currentLocation, fullscreen } from '../utils/store'
     import { getThumbnail, formatDate } from '../utils/functions'
     const dispatch = createEventDispatcher()
     const { page } = stores()
@@ -50,6 +50,8 @@
 
         // Dispatch current photo
         sendCurrentPhoto()
+        // Reset fullscreen value if open
+        fullscreen.set()
     }
 
     // Send current photo to event
@@ -145,6 +147,7 @@
                     class:gallery__photo--prev={photo === prevPhoto}
                     class:gallery__photo--active={photo === currentPhoto}
                     class:gallery__photo--next={photo === nextPhoto}
+                    on:click={event => viewer && fullscreen.set(currentPhoto)}
                 >
                     <source media="(min-width: 968px)" srcset={getThumbnail(photo.image.private_hash, 1400)}>
                     <source media="(min-width: 800px)" srcset={getThumbnail(photo.image.private_hash, 900)}>

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>

src/routes/_layout.svelte

@@ -71,9 +71,11 @@
         countries,
         locations
     } from '../utils/store'
+    import { stores } from '@sapper/app'
 
     // Components
     import Transition from '../utils/Transition'
+    import AnalyticsTracker from '../utils/AnalyticsTracker'
 
     // Props
     export const segment = null
@@ -96,7 +98,6 @@
     $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
-
 <style lang="scss" global>
     @import "../style/style.scss";
 </style>
@@ -104,3 +105,5 @@
 <slot></slot>
 
 <Transition />
+<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />
+

src/routes/viewer/[country]/[place]/[photo].svelte

@@ -6,21 +6,26 @@
     let preloaded
     currentPhotos.subscribe(store => preloaded = store ? store : undefined)
 
-
     // Preload data
     export async function preload (page, session) {
         // Load the photos if not loaded
         if (!preloaded) {
-            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%`)
+            // Fields
+            const fields = [
+                'id', 'name', 'slug', 'date', 'image.private_hash',
+                'location.id', 'location.name', 'location.slug', 'location.country.name', 'location.country.slug'
+            ]
+            const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&filter[location.slug][rlike]=%${page.params.place}%`)
             const photos = await req.json()
-            return {
-                photos: photos.data
+            if (req.ok) {
+                return { photos: photos.data }
             }
         }
         // Use the store otherwise
         else return {
             photos: preloaded
         }
+        this.error(404, 'Not found')
     }
 </script>
 
@@ -34,33 +39,33 @@
         pageReady,
         pageTransition
     } from '../../../../utils/store'
-    import { getThumbnail } from '../../../../utils/functions'
-    const { page } = stores()
-    const dispatch = createEventDispatcher()
+    import { getThumbnail, analyticsUpdate } from '../../../../utils/functions'
 
     // Components
     import IconGlobe from '../../../../atoms/IconGlobe'
     import IconCross from '../../../../atoms/IconCross'
     import Carousel from '../../../../organisms/Carousel'
+    import Fullscreen from '../../../../organisms/Fullscreen'
     import SocialMetas from '../../../../utils/SocialMetas'
 
     // Animations
     import { animateIn } from '../../../../animations/viewer'
     pageTransition.onAnimationEnd = animateIn
 
-
     // Props
     export let photos
 
     // Variables
+    const { page } = stores()
+    const dispatch = createEventDispatcher()
     let windowWidth
     let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
 
     // Update store current location
-    if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.location))
+    if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.place))
     if (!$currentPhotos) currentPhotos.set(photos)
 
-    // The photo has changed from the carousel
+    // Photo has changed from the Carousel component
     const photoChanged = event => {
         currentPhoto = event.detail.currentPhoto
 
@@ -69,6 +74,7 @@
             const windowPathname = window.location.pathname
             const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
             history.pushState('', document.title, newUrl)
+            analyticsUpdate(newUrl)
         }
     }
 
@@ -77,11 +83,7 @@
     // On init, send an event to the Carousel component with the photoSlug to set currentIndex and then change the photo
 
     // Pop event from browser (prev/next)
-    const changedUrl = event => {
-        dispatch('changedUrl', {
-            currentPhoto: currentPhoto
-        })
-    }
+    const changedUrl = event => dispatch('changedUrl', { currentPhoto: currentPhoto })
 
 
     /*
@@ -91,25 +93,21 @@
         // Page is loaded
         pageReady.set(true)
 
-        /*
-        !!! TODO:
-            - Change the title with the current photo name and update Metas (with window location url)
-        */
-
-        dispatch('changeUrl', {
-            page: $page
-        })
+        dispatch('changeUrl', { page: $page })
     })
 </script>
 
 <svelte:head>
+    <!-- TODO:
+        - Change the title with the current photo name and update Metas (with window location url)
+     -->
     <title>{$site.seo_name} – Photos of {$currentLocation.name}, {$currentLocation.country.name}</title>
     <meta name="description" content="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}">
     <SocialMetas
+        url="https://{$page.host}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}"
         title="{$site.seo_name} - Beautiful homes of {$currentLocation.name}, {$currentLocation.country.name}"
         description="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}"
         image={getThumbnail(currentPhoto.image.private_hash, 1200, 630)}
-        url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}"
     />
 </svelte:head>
 
@@ -119,14 +117,14 @@
     <div class="viewer__top">
         <p class="tip">Tap for fullscreen</p>
 
-        <div class="buttons">
+        <div class="viewer__buttons">
             <a href="/choose" class="button-control button-control--dashed" aria-label="Change the location" rel="prefetch">
                 <IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
                 <svg>
                     <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
                 </svg>
             </a>
-            <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
+            <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
                 <IconCross color="#fff" width="18" class="icon" />
                 <IconCross color="#fff" width="18" class="icon" hidden="true" />
             </a>
@@ -134,9 +132,11 @@
     </div>
 
     <Carousel
+        viewer="true"
         photos={photos}
-        viewer={true}
         init={$page}
         on:photoChange={photoChanged}
     />
+
+    <Fullscreen />
 </section>

src/style/atoms/_button-control.scss

@@ -68,6 +68,15 @@
     }
 
 
+    /*
+    ** Effects
+    */
+    &--shadow {
+        box-shadow: 0 0 10px rgba(#000, 0.4);
+    }
+
+
+
     /*
     ** Directions
     */

src/style/organisms/_fullscreen.scss

@@ -0,0 +1,83 @@
+.fullscreen {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+
+    // Photo
+    &__image {
+        width: 100%;
+        height: 100%;
+        overflow-x: auto;
+        opacity: 0;
+        transform: scale(1.1);
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        img {
+            position: relative;
+            z-index: 200;
+            display: block;
+            height: 100%;
+            width: auto;
+        }
+
+        // Open
+        &.is-open {
+            opacity: 1;
+            transform: scale(1);
+            pointer-events: auto;
+        }
+    }
+
+    // Controls
+    &__close {
+        position: fixed;
+        z-index: 201;
+        bottom: 24px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        transform: scale(1.1) translateY(24px);
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        // Visible state
+        &.is-visible {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+
+    // Loading
+    &__loading {
+        position: absolute;
+        z-index: 202;
+        top: 50%;
+        left: 50%;
+        opacity: 1;
+        transform: translate(-50%, -50%);
+        transform-origin: 50% 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 80px;
+        background-color: $color-primary;
+        border-radius: 100%;
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        // Hidden state
+        &.is-hidden {
+            transform: scale(1.05) translate(-50%, -50%);
+            opacity: 0;
+        }
+    }
+}

src/style/pages/_viewer.scss

@@ -44,17 +44,17 @@
                 display: none;
             }
         }
+    }
 
-        // Buttons
-        .buttons {
-            display: flex;
+    // Buttons
+    &__buttons {
+        display: flex;
 
-            a {
-                margin-left: 16px;
+        a {
+            margin-left: 16px;
 
-                &:first-child {
-                    margin-left: 0;
-                }
+            &:first-child {
+                margin-left: 0;
             }
         }
     }
@@ -86,10 +86,8 @@
             right: 0;
 
             // Specific box shadow for images
-            &__images {
-                &--photo {
-                    box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
-                }
+            &__photo {
+                box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
             }
         }
 

src/style/style.scss

@@ -31,6 +31,7 @@
 // Organisms
 @import "organisms/carousel";
 @import "organisms/photos";
+@import "organisms/fullscreen";
 @import "organisms/locations";
 @import "organisms/pagination";
 @import "organisms/footer";

src/utils/AnalyticsTracker.svelte

@@ -0,0 +1,27 @@
+<script>
+    import { analyticsUpdate } from '../utils/functions'
+
+    // Props
+    export let stores
+    export let id
+
+    // Variables
+    const { page } = stores()
+
+    // Init Google Analytics
+    if (typeof window !== 'undefined') {
+        window.dataLayer = window.dataLayer || []
+        window.gtag = function gtag() {
+            window.dataLayer.push(arguments)
+        }
+        window.gtag('js', new Date())
+        window.gtag('config', id)
+    }
+
+    // Push new page to GA
+    $: analyticsUpdate($page.path, id)
+</script>
+
+<svelte:head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
+</svelte:head>

src/utils/functions.js

@@ -175,3 +175,15 @@ export const parallaxAnime = (element, anime) => {
         }
     }
 }
+
+
+/*
+** Google Analytics send page
+*/
+export const analyticsUpdate = (page, id = process.env.CONFIG.GA_TRACKER_ID) => {
+    if (typeof gtag !== 'undefined') {
+        window.gtag('config', id, {
+            page_path: page
+        })
+    }
+}

src/utils/store.js

@@ -8,10 +8,9 @@ export const dev = process.env.NODE_ENV === 'development'
 /* ==========================================================================
    Site related
 ========================================================================== */
-const apiEndpoint = dev ? 'http://api.housesof.localhost/how' : 'https://api.housesof.world/_'
-const apiAccessToken = 'NJk0urljsdSvApUDzWxGgoO6'
+const apiEndpoint = dev ? process.env.CONFIG.API_URL_DEV : process.env.CONFIG.API_URL_PROD
 export const apiEndpoints = {
-    gql: `${apiEndpoint}/gql?access_token=${apiAccessToken}`,
+    gql: `${apiEndpoint}/gql?access_token=${process.env.CONFIG.API_TOKEN}`,
     rest: apiEndpoint
 }
 
@@ -30,6 +29,7 @@ export let pageReady = writable(false)
 export const pageTransition = {
    onAnimationEnd () {}
 }
+export let fullscreen = writable()
 
 
 /* ==========================================================================