WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept

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

@@ -1,11 +1,6 @@
 <script context="module">
     import { stores } from '@sapper/app'
-    import {
-        apiEndpoints,
-        locations,
-        currentLocation,
-        currentPhotos
-    } from '../../../../utils/store'
+    import { apiEndpoints } from '../../../../utils/store'
 
     // Define either to preload data or use the store
     let preloaded
@@ -16,7 +11,7 @@
     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,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%`)
+            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}%`)
             const photos = await req.json()
             return {
                 photos: photos.data
@@ -31,7 +26,14 @@
 
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
-    import { goto } from '@sapper/app'
+    import {
+        site,
+        locations,
+        currentLocation,
+        currentPhotos,
+        pageReady,
+        pageTransition
+    } from '../../../../utils/store'
     import { getThumbnail } from '../../../../utils/functions'
     const { page } = stores()
     const dispatch = createEventDispatcher()
@@ -42,24 +44,25 @@
     import Carousel from '../../../../organisms/Carousel'
     import SocialMetas from '../../../../utils/SocialMetas'
 
+    // Animations
+    // import { animateIn } from '../../../animations/photoPage'
+    // pageTransition.onAnimationEnd = animateIn
+
+
     // Props
     export let photos
 
     // Variables
     let windowWidth
-    let currentPhoto
+    let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
 
-    // Define current location
-    const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
-
-    // Update store current location informations
-    if (!$currentLocation) currentLocation.set(location)
+    // Update store current location
+    if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.location))
     if (!$currentPhotos) currentPhotos.set(photos)
 
     // The photo has changed from the carousel
     const photoChanged = event => {
         currentPhoto = event.detail.currentPhoto
-        console.log('photoChanged [photo] event: ', currentPhoto.slug)
 
         // Change the URL to the current photo
         if (!event.detail.init) {
@@ -82,22 +85,16 @@
 
 
     /*
-    !!! TODO:
-        - URL navigation on photo change (from Carousel)
-        - If coming to direct URL, show the proper photo (i.e currentIndex from photo.slug in URL)
-        - Get currentPhoto from Carousel to update title and metas
-    */
-
-
-    /*
-    ** Run code on browser only
+    ** Run code when mounted
     */
     onMount(() => {
+        // Page is loaded
+        pageReady.set(true)
+
         /*
         !!! TODO:
             - Change the title with the current photo name and update Metas (with window location url)
         */
-        // console.log(currentPhoto)
 
         dispatch('changeUrl', {
             page: $page
@@ -106,14 +103,14 @@
 </script>
 
 <svelte:head>
-    <title>Houses Of – Photos of {location.name}, {location.country.name}</title>
-    <meta name="description" content={location.description}>
+    <title>{$site.seo_name} – Photos of {$currentLocation.name}, {$currentLocation.country.name}</title>
+    <meta name="description" content="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}">
     <SocialMetas
-        title="Houses Of - Beautiful houses of {location.name}, {location.country.name}"
-        description="Houses Of {location.name} {location.description}"
+        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}"
     />
-        <!-- url="//{$page.host.split(':3000')[0]}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}" -->
-        <!-- image={currentPhoto ? fn.getThumbnail(currentPhoto.image.private_hash, 1200, 630) : null} -->
 </svelte:head>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -129,7 +126,7 @@
                     <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
                 </svg>
             </a>
-            <a href="/location/{location.country.slug}/{location.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="Close">
                 <IconCross color="#fff" width="18" class="icon" />
                 <IconCross color="#fff" width="18" class="icon" hidden="true" />
             </a>
@@ -137,7 +134,7 @@
     </div>
 
     <Carousel
-        {photos}
+        photos={photos}
         viewer={true}
         init={$page}
         on:photoChange={photoChanged}