Fix photos list and add currentPhotos store

Go from one object to two to avoid issues when using an object key

src/molecules/Photo.svelte

@@ -11,30 +11,32 @@
     import advancedFormat from 'dayjs/plugin/advancedFormat'
     dayjs.extend(advancedFormat)
 
-    // Props
+    // Props and variables
     export let index
     export let photo
+    export let layout = 'list'
+    let photoElement
 
     // Default size for the image
     const defaultWidth = 900
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
-    // Shortcut current location
+    // Reactive variables for location informations
-    let location
+    $: location = $currentLocation
-    $: location = $currentLocation.location
+    $: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…'
+    $: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#'
 
 
     /*
 	** Run code on browser only
 	*/
 	onMount(() => {
-        // Parallax on photos
+        // Parallax on photo when image has been loaded
-        document.querySelectorAll('.photos .photo').forEach(photo => {
         const parallaxNumber = basicScroll.default.create({
-                elem: photo.querySelector('.photo__image--number'),
+            elem: photoElement.querySelector('.photo__image--number'),
-                direct: true,
+            direct: photoElement,
-                from: photo.getBoundingClientRect().top * 0.25,
+            from: 'top-bottom',
-                to: photo.getBoundingClientRect().bottom * 0.92,
+            to: 'bottom-top',
             props: {
                 '--translate': {
                     from: '-75%',
@@ -43,32 +45,45 @@
             }
         })
         parallaxNumber.start()
-        })
+        parallaxNumber.calculate()
+        parallaxNumber.update()
     })
 </script>
 
-<div class="photo" transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}">
+<div class="photo"
+    bind:this={photoElement}
+    transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
+>
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
-            <p class="style-caps">{location.region}, {location.country.name}</p>
+            <p class="style-caps">{!!location && location.region}, {!!location && location.country.name}</p>
         </div>
     </div>
 
     <div class="photo__image wrap">
         <div class="align">
-            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
+            <a href={photoHref}>
                 <picture class="photo__image--img">
+                    {#if layout === 'list'}
                     <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
                     <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
                     <source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
                     <source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
+                        data-src="{fn.getThumbnail(photo.image.private_hash, 900)}"
                         width={defaultWidth} height={defaultHeight}
-                        data-src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
+                        alt={imgAlt}
                         class="lazyload"
-                        data-aos="scale-down-fade-in"
+                        data-aos="scale-down-fade-in" data-aos-once="true">
-                    >
+
+                    {:else}
+                    <source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
+                    <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
+                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
+                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
+                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
+                    {/if}
                 </picture>
             </a>
             <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>

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

@@ -1,6 +1,6 @@
 <script context="module">
 	// Svelte
-	import { apiEndpoints, site, locations, currentLocation } from '../../../store'
+	import { apiEndpoints, site, locations, currentLocation, currentPhotos } from '../../../store'
 	import { stores } from '@sapper/app'
 
 	// Preload data
@@ -43,7 +43,8 @@
 
 	// Update current location
 	const location = $locations.find(loc => loc.slug === $page.params.location)
-	currentLocation.set({ location, photos })
+	currentLocation.set(location)
+	currentPhotos.set(photos)
 
 	// Define dates
 	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
@@ -157,7 +158,11 @@
 
 	<div class="photos__view wrap">
 		{#each paginatedPhotos as photo, index}
-		<Photo {photo} index={index + 1} />
+		<Photo
+			photo={photo}
+			layout={layoutSetting}
+			index={photos.length - (photos.indexOf(photo))}
+		/>
 		{/each}
 	</div>
 

src/store.js

@@ -22,4 +22,7 @@ export let locations = writable()
 
 // Derived data
 export let currentLocation = writable()
+export let currentPhotos = writable()
+
+// State
 export let loaded = writable(false)