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

Create a functioning carousel

Browse Source 
Thanks a million to Grafikart!
This commit is contained in:
Félix Péault
2020-02-17 22:33:44 +01:00
parent 6551aa738a
commit 6fb6937c1a
4 changed files with 172 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/organisms/Carousel.svelte
View File

@@ -2,15 +2,75 @@
import { onMount } from 'svelte'
import * as fn from '../functions'
// Dependencies
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
// Components
import IconArrow from '../atoms/IconArrow'
// Props and variables
// Props
export let viewer = false
export let photos = []
// Variables
let hover
let photoPrev
let photoNext
let currentIndex = 1
$: currentPhoto = photos[currentIndex] || null
$: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
$: nextPhoto = photos[currentIndex + 1] || photos[0]
/*
** Go to a photo
*/
const goToPrev = () => {
currentIndex--
currentIndex = (currentIndex < 0) ? photos.length - 1 : currentIndex
}
const goToNext = () => {
currentIndex++
currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
}
/*
** Drag and touch navigation
*/
let touchStartX = 0
let touchStartY = 0
let touchEndX = 0
let touchEndY = 0
const swipeStart = event => {
touchStartX = event.changedTouches[0].screenX
touchStartY = event.changedTouches[0].screenY
}
const swipeEnd = event => {
touchEndX = event.changedTouches[0].screenX
touchEndY = event.changedTouches[0].screenY
if (touchEndX <= touchStartX) goToNext()
if (touchEndX >= touchStartX) goToPrev()
}
// Keyboard navigation
const keyboardNav = event => {
const keyCode = event.keyCode
switch (event.keyCode) {
case 37: case 80: case 74:
goToPrev()
break
case 39: case 78: case 75:
goToNext()
break
// case 27: case 67:
// document.getElementById('photo_close').click()
// break
default: break
}
}
/*
@@ -19,10 +79,15 @@
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
const photoActive = document.querySelector('.gallery__images .active')
let photoToHover
if (event.currentTarget.dataset.to === 'prev') {
photoToHover = (photoActive.previousSibling != null) ? photoActive.previousSibling : photoActive.parentNode.lastChild
} else {
photoToHover = (photoActive.nextSibling != null) ? photoActive.nextSibling : photoActive.parentNode.firstChild
}
switch (event.type) {
case 'mouseenter':
@@ -36,29 +101,30 @@
default: break
}
}
// Go to previous photo
photoPrev = () => {
console.log('previous photo')
}
// Go to next photo
photoNext = () => {
console.log('next photo')
}
})
/*
REVEAL ANIMATION ON CAROUSEL:
Fix the CSS priority? Cancel the transition delay and duration?
data-aos="{
(photo === prevPhoto) ? 'carousel-prev' :
(photo === currentPhoto) ? 'carousel-active' :
(photo === nextPhoto) ? 'carousel-next' : ''
}
*/
</script>
<div class="carousel">
<svelte:window on:keydown={keyboardNav} />
<div class="carousel" on:touchstart={swipeStart} on:touchend={swipeEnd}>
<div class="wrap">
<div class="gallery">
<div class="gallery__images">
{#each photos as photo, index}
<picture class="gallery__images--photo"
class:prev={index === 0}
class:active={index === 1}
class:next={index === 2}
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
>
<source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
@@ -70,14 +136,14 @@
</div>
<div class="carousel__controls">
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
<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}>
<div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
<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" />
@@ -86,18 +152,18 @@
</div>
{#if viewer}
<div class="carousel__number">05</div>
<div class="carousel__number">{currentIndex < 10 ? 0 : ''}{currentIndex + 1}</div>
{/if}
</div>
<div class="carousel__information">
<div class="carousel__information--location style-location">
<p class="street">Street Name, Suburb</p>
<p class="style-caps state">Region, Country</p>
<p class="street">{currentPhoto.name}</p>
<p class="style-caps state">{currentPhoto.location.region}, {currentPhoto.location.country.name}</p>
</div>
<!-- Duplicate for animation? -->
{#if viewer}
<p class="carousel__information--date">Apr 6th, 2019</p>
<p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
{/if}
</div>
@@ -122,4 +188,3 @@
</ol>
{/if}
</div>