Fix photos list and add currentPhotos store
Go from one object to two to avoid issues when using an object key
This commit is contained in:
@@ -11,64 +11,79 @@
|
||||
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
|
||||
let location
|
||||
$: location = $currentLocation.location
|
||||
// Reactive variables for location informations
|
||||
$: location = $currentLocation
|
||||
$: 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
|
||||
document.querySelectorAll('.photos .photo').forEach(photo => {
|
||||
const parallaxNumber = basicScroll.default.create({
|
||||
elem: photo.querySelector('.photo__image--number'),
|
||||
direct: true,
|
||||
from: photo.getBoundingClientRect().top * 0.25,
|
||||
to: photo.getBoundingClientRect().bottom * 0.92,
|
||||
props: {
|
||||
'--translate': {
|
||||
from: '-75%',
|
||||
to: '-25%'
|
||||
}
|
||||
// Parallax on photo when image has been loaded
|
||||
const parallaxNumber = basicScroll.default.create({
|
||||
elem: photoElement.querySelector('.photo__image--number'),
|
||||
direct: photoElement,
|
||||
from: 'top-bottom',
|
||||
to: 'bottom-top',
|
||||
props: {
|
||||
'--translate': {
|
||||
from: '-75%',
|
||||
to: '-25%'
|
||||
}
|
||||
})
|
||||
parallaxNumber.start()
|
||||
}
|
||||
})
|
||||
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')}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -22,4 +22,7 @@ export let locations = writable()
|
||||
|
||||
// Derived data
|
||||
export let currentLocation = writable()
|
||||
export let currentPhotos = writable()
|
||||
|
||||
// State
|
||||
export let loaded = writable(false)
|
||||
|
||||
Reference in New Issue
Block a user