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>

106
src/style/organisms/_carousel.scss
View File

@@ -1,7 +1,6 @@
// Carousel
.carousel {
background-color: $color-primary;
transform: translateZ(0);
.wrap {
max-width: 1280px;
@@ -12,7 +11,10 @@
}
}
// Gallery
/*
** Gallery
*/
.gallery {
position: relative;
z-index: 2;
@@ -25,96 +27,122 @@
max-width: 100%;
}
// Variables
$scale: 0.9;
$angle: 1deg;
$angleHover: 1.25deg;
$distance: 9%;
$distanceHover: 10%;
$radius: 8px;
// Images
&__images {
position: relative;
height: 0;
padding-bottom: calc(100% / 1.5); // Ratio 3.2
user-select: none;
// Photo
&--photo {
opacity: 0;
overflow: hidden;
position: absolute;
display: block;
background-color: $color-primary;
box-shadow: 0 15px 60px rgba(#000, 0.3);
transition: transform 600ms $ease-quart;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform 600ms $ease-quart, opacity 600ms $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: 8px;
border-radius: $radius;
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
height: auto;
width: 100%;
opacity: 0.6;
transition: opacity 600ms $ease-quart;
height: auto;
}
// Temp hiding
&:nth-of-type(4), &:nth-of-type(5) {
display: none;
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-primary;
}
}
// Active photo
.active {
opacity: 1;
z-index: 10;
top: 50%;
left: 50%;
width: 100%;
transform: translate3d(-50%, -50%, 0);
transform: scale(1);
img {
opacity: 1;
}
}
// Variables
$hoverAngle: 1.25deg;
$hoverDistance: 7%;
// Previous & next photo
.prev, .next {
opacity: 1;
img {
opacity: 1;
}
&:before {
opacity: 0.4;
}
}
// Previous photo
.prev {
z-index: 8;
@include breakpoint (sm) {
top: 50%;
transform: translate3d(-6%, -50%, 0) rotate(-1deg);
width: 85%;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
img {
opacity: 0.8;
}
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
.next {
z-index: 9;
@include breakpoint (sm) {
top: 50%;
right: 0;
transform: translate3d(6%, -50%, 0) rotate(1deg);
width: 85%;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
img {
opacity: 0.8;
}
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
}
}
}
// Controls (arrows)
/*
** Controls (arrows)
*/
&__controls {
display: none;
@@ -237,8 +265,6 @@
&__image {
width: 100%;
height: 100%;
// display: flex;
// justify-content: center;
overflow: auto;
img {

8
src/style/pages/_homepage.scss
View File

@@ -48,15 +48,13 @@
}
}
// Gallery
.gallery {
&__images {
&--photo {
// Photos
.gallery__images--photo {
&:before {
background-color: $color-secondary;
}
}
}
}
}

14
src/style/pages/_viewer.scss
View File

@@ -13,7 +13,10 @@
width: 100%;
}
// Top part
/*
** Top part
*/
&__top {
position: absolute;
z-index: 10;
@@ -57,13 +60,16 @@
}
}
// Carousel
/*
** Carousel
*/
.carousel {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate3d(0, -37%, 0);
transform: translateY(-37%);
margin: 0;
@include breakpoint (sm) {
@@ -83,7 +89,7 @@
// Specific box shadow for images
&__images {
&--photo {
box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4);
box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
}
}
}