96 lines
4.0 KiB
Svelte
96 lines
4.0 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
import { fly } from 'svelte/transition'
|
|
import { quartOut } from 'svelte/easing'
|
|
import { site, currentLocation } from '../store'
|
|
import * as fn from '../functions'
|
|
|
|
// Dependencies
|
|
import * as basicScroll from 'basicscroll'
|
|
import dayjs from 'dayjs'
|
|
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
|
dayjs.extend(advancedFormat)
|
|
|
|
// 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)
|
|
|
|
// 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 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.calculate()
|
|
parallaxNumber.update()
|
|
})
|
|
</script>
|
|
|
|
<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 && location.region}, {!!location && location.country.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="photo__image wrap">
|
|
<div class="align">
|
|
<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}
|
|
alt={imgAlt}
|
|
class="lazyload"
|
|
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')}>
|
|
{dayjs(photo.date).format('MMM Do, YYYY')}
|
|
</time>
|
|
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|