WIP
This commit is contained in:
@@ -1,46 +1,123 @@
|
||||
<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 photoActive = document.querySelector('.gallery .active')
|
||||
const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
|
||||
if (event.type === 'mouseenter') {
|
||||
photoToHover.classList.add('hover')
|
||||
} else {
|
||||
photoToHover.classList.remove('hover')
|
||||
}
|
||||
}
|
||||
|
||||
// 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">
|
||||
<div class="gallery__images--photo prev">
|
||||
<img src="/img/RyanStreet58.jpg" alt="">
|
||||
</div>
|
||||
<div class="gallery__images--photo front">
|
||||
<img src="/img/TurinStreet33.jpg" alt="">
|
||||
</div>
|
||||
<div class="gallery__images--photo next">
|
||||
<img src="/img/GrayRoad15.jpg" alt="">
|
||||
{#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">
|
||||
<button class="button-control button-control--white prev">
|
||||
<img src="/img/icons/arrow-pink.svg" alt="">
|
||||
<button class="button-control button-control--white dir-left" data-to="prev" aria-label="Previous"
|
||||
on:click={photoPrev}
|
||||
on:mouseenter={hover}
|
||||
on:mouseleave={hover}
|
||||
>
|
||||
<IconArrow direction="left" color="#ff6c89" className="icon" />
|
||||
<IconArrow direction="left" color="#fff" className="icon" hidden="true" />
|
||||
</button>
|
||||
<button class="button-control button-control--white next">
|
||||
<img src="/img/icons/arrow-pink.svg" alt="">
|
||||
<button class="button-control button-control--white dir-right" data-to="next" aria-label="Next"
|
||||
on:mouseenter={hover}
|
||||
on:mouseleave={hover}
|
||||
on:click={photoNext}
|
||||
>
|
||||
<IconArrow direction="right" color="#ff6c89" className="icon" />
|
||||
<IconArrow direction="right" color="#fff" className="icon" hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if viewer}
|
||||
<div class="carousel__number">05</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="carousel__information">
|
||||
<div class="carousel__information--location location">
|
||||
<p class="street">Rogers Street, West End</p>
|
||||
<p class="style-caps state">Queensland, Australia</p>
|
||||
<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>
|
||||
<!-- {viewer &&
|
||||
<p class="carousel__information--date">
|
||||
Apr 6th, 2019
|
||||
</p>
|
||||
} -->
|
||||
<!-- <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>
|
||||
|
||||
<!-- {viewer &&
|
||||
<div class="carousel__number">
|
||||
05
|
||||
</div>
|
||||
} -->
|
||||
|
||||
<!-- {!viewer && pagination} -->
|
||||
{#if !viewer}
|
||||
<ol class="carousel__dots">
|
||||
{#each photos as page, index}
|
||||
<li class:active={index === 0}>
|
||||
<button></button>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if viewer}
|
||||
<ol class="carousel__dots">
|
||||
{#each photos as page}
|
||||
<li class:active={false}>
|
||||
<button></button>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script context="module">
|
||||
import Shuffle from 'shufflejs'
|
||||
// import Shuffle from 'shufflejs'
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@@ -8,15 +8,38 @@
|
||||
// import { zoomFadeIn, zoomFadeOut } from '../animations'
|
||||
|
||||
// Components
|
||||
import Button from '../atoms/Button'
|
||||
import Location from '../molecules/Location'
|
||||
|
||||
// Define continents to show
|
||||
// Variables
|
||||
let filterLocations
|
||||
let continentsToShow = []
|
||||
|
||||
// Define continents to show
|
||||
$continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
|
||||
|
||||
// Create the filterable list of locations
|
||||
let filterLocations
|
||||
// On click on continents
|
||||
const toggleContinents = (event, continent) => {
|
||||
// Change the filter
|
||||
// filterLocations.filter(continent)
|
||||
|
||||
// Change active classes
|
||||
document.querySelectorAll('#continents button').forEach(button => {
|
||||
if (!continent) {
|
||||
button.classList.remove('disabled')
|
||||
} else {
|
||||
button.classList.add('disabled')
|
||||
event.currentTarget.querySelector('button').classList.remove('disabled')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Run code on browser only
|
||||
*/
|
||||
onMount(() => {
|
||||
// Create the filterable list of locations
|
||||
// filterLocations = new Shuffle(document.getElementById('continents'), {
|
||||
// itemSelector: '.location',
|
||||
// // sizer: '#locations_list',
|
||||
@@ -25,36 +48,22 @@
|
||||
// })
|
||||
})
|
||||
|
||||
// // On click on continents
|
||||
const toggleContinents = (event, continent = '') => {
|
||||
// Change the filter
|
||||
// filterLocations.filter(continent.id)
|
||||
|
||||
// Change active classes
|
||||
const continents = document.querySelectorAll('#continents a')
|
||||
if (!continent) {
|
||||
continents.forEach(cont => cont.classList.remove('disabled'))
|
||||
} else {
|
||||
continents.forEach(cont => cont.classList.add('disabled'))
|
||||
event.currentTarget.classList.remove('disabled')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="browse wrap">
|
||||
<div class="description">
|
||||
<div class="browse__description style-description">
|
||||
<p>Browse all the cities and countries</p>
|
||||
</div>
|
||||
|
||||
<ul class="browse__continents" id="continents">
|
||||
<li>
|
||||
<button class="button-outline" on:click|preventDefault={e => toggleContinents(e)}>All</button>
|
||||
{#if continentsToShow.length > 1}
|
||||
<li on:click={e => toggleContinents(e)}>
|
||||
<Button type="button" className="button-outline" text="All" />
|
||||
</li>
|
||||
{/if}
|
||||
{#each continentsToShow as continent}
|
||||
<li>
|
||||
<button class="button-outline" on:click|preventDefault={e => toggleContinents(e, continent)}>
|
||||
<span>{continent.name}</span>
|
||||
</button>
|
||||
<li on:click={e => toggleContinents(e, continent.id)}>
|
||||
<Button type="button" className="button-outline" text={continent.name} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user