diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index cb23f82..0ebc464 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -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' : '' + } + */ -
+ + +
{#each photos as photo, index} @@ -70,14 +136,14 @@
- - diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss index c718c1b..d9a663b 100644 --- a/src/style/organisms/_carousel.scss +++ b/src/style/organisms/_carousel.scss @@ -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 { diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index 8af10b9..46d1369 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -48,12 +48,10 @@ } } - // Gallery - .gallery { - &__images { - &--photo { - background-color: $color-secondary; - } + // Photos + .gallery__images--photo { + &:before { + background-color: $color-secondary; } } } diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss index f433359..1ad3ea6 100644 --- a/src/style/pages/_viewer.scss +++ b/src/style/pages/_viewer.scss @@ -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); } } }