housesof/src/molecules/Photo.svelte

<script>
    import { onMount } from 'svelte'
    import { site, currentLocation } from 'utils/store'
    import { getThumbnail, formatDate } from 'utils/functions'
    // Animations
    import { animateIn } from 'animations/Photo'

    // Props and variables
    export let photo
    export let index
    let scope

    // Default size for the image
    const defaultWidth = 900
    const defaultHeight = Math.ceil(defaultWidth / 1.5)

    // Location related
    const { name, date, location, city } = photo
    const { private_hash } = photo.image
    const imgAlt = `${name}, ${city ? city : location.region}, ${location.country.name}`
    const nameSplit = name.split(', ')

    // Photo index
    const odd = index % 2 === 1
    const photoIndex = (index < 10 ? '0': '') + index


    /*
    ** Run code when mounted
    */
    onMount(() => {
        animateIn(scope)
    })
</script>

<div class="photo" class:photo--odd={odd} role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
    <div class="photo__location wrap">
        <div class="wrapper">
            <h2 class="title-location" id="photo-{index + 1}">
                {#each nameSplit as _, i}
                <span class="line">
                    <span>
                        {nameSplit[i]}{#if i < nameSplit.length - 1},{/if}
                    </span>
                </span>
                {/each}
            </h2>
            <p class="style-caps">{city ? city : location.region}, {location.country.name}</p>
        </div>
    </div>

    <div class="photo__image wrap">
        <div class="align">
            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
                <picture class="photo__picture">
                    <source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1200)}>
                    <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
                    <source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
                    <source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                        width={defaultWidth} height={defaultHeight}
                        alt={imgAlt}
                        class="lazyload"
                    />
                </picture>
            </a>
            <time class="photo__date" datetime={formatDate(date, 'DATETIME')}>
                {formatDate(date, 'FULL')}
            </time>
            <div class="photo__number">
                <span>{photoIndex}</span>
            </div>
        </div>
    </div>
</div>