flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix photos list and add currentPhotos store

Browse Source 
Go from one object to two to avoid issues when using an object key
This commit is contained in:
Félix Péault
2020-02-26 15:59:44 +01:00
parent fab89736ed
commit ba36c9a8b6
3 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/molecules/Photo.svelte
View File

@@ -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')}>