124 lines
4.2 KiB
Svelte
124 lines
4.2 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
import * as fn from '../functions'
|
|
|
|
// Components
|
|
import IconArrow from '../atoms/IconArrow'
|
|
|
|
// Props and variables
|
|
export let viewer = false
|
|
export let photos = []
|
|
let hover
|
|
let photoPrev
|
|
let photoNext
|
|
|
|
|
|
/*
|
|
** Run code on browser only
|
|
*/
|
|
onMount(() => {
|
|
// Hover function
|
|
hover = event => {
|
|
const to = event.currentTarget.dataset.to
|
|
const button = event.currentTarget.querySelector('button')
|
|
const photoActive = document.querySelector('.gallery .active')
|
|
const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
|
|
if (event.type === 'mouseenter') {
|
|
photoToHover.classList.add('hover')
|
|
button.focus()
|
|
} else {
|
|
photoToHover.classList.remove('hover')
|
|
button.blur()
|
|
}
|
|
}
|
|
|
|
// Go to previous photo
|
|
photoPrev = () => {
|
|
console.log('previous photo')
|
|
}
|
|
|
|
// Go to next photo
|
|
photoNext = () => {
|
|
console.log('next photo')
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<div class="carousel">
|
|
<div class="wrap">
|
|
<div class="gallery">
|
|
<div class="gallery__images">
|
|
{#each photos as photo, index}
|
|
<div class="gallery__images--photo"
|
|
class:prev={index === 0}
|
|
class:active={index === 1}
|
|
class:next={index === 2}
|
|
>
|
|
<img
|
|
src="{fn.getThumbnail(photo.image.private_hash, 800)}"
|
|
srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
|
|
alt="{photo.name}, {photo.location.name}, {photo.location.country.name}"
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="carousel__controls">
|
|
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
|
|
<button class="button-control button-control--white dir-left" aria-label="Previous">
|
|
<IconArrow direction="left" color="#ff6c89" className="icon" />
|
|
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={photoNext}>
|
|
<button class="button-control button-control--white dir-right" aria-label="Next">
|
|
<IconArrow direction="right" color="#ff6c89" className="icon" />
|
|
<IconArrow direction="right" color="#fff" className="icon" hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{#if viewer}
|
|
<div class="carousel__number">05</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="carousel__information">
|
|
<div class="carousel__information--location style-location">
|
|
<!-- <p class="street">{photos[0].name}</p>
|
|
<p class="style-caps state">{photos[0].location.region}, {photos[0].location.country.name}</p> -->
|
|
</div>
|
|
<!-- <div class="carousel__information--location style-location" aria-hidden="true">
|
|
<p class="street">{photos[1].name}</p>
|
|
<p class="style-caps state">{photos[1].location.region}, {photos[1].location.country.name}</p>
|
|
</div> -->
|
|
{#if viewer}
|
|
<p class="carousel__information--date">Apr 6th, 2019</p>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if !viewer}
|
|
<ol class="carousel__dots">
|
|
{#each photos as page, index}
|
|
<li class:active={index === 0}>
|
|
<button></button>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if viewer}
|
|
<ol class="carousel__dots">
|
|
{#each photos as page}
|
|
<li class:active={false}>
|
|
<button></button>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
{/if}
|
|
</div>
|
|
|