Fix carousel buttons snap scroll when hovering areas

Buttons would trigger a nasty scroll due to the `.focus` on them on hover
This commit is contained in:
2020-03-06 11:08:52 +01:00
parent debf8bb747
commit 636685c86e

View File

@@ -35,15 +35,6 @@
currentIndex = photos.findIndex(photo => photo.slug === init.params.photo) currentIndex = photos.findIndex(photo => photo.slug === init.params.photo)
} }
// Send current photo to event
const sendCurrentPhoto = ({ init = false }) => {
console.log('sendCurrentPhoto event: ', currentPhoto.slug)
dispatch('photoChange', {
currentPhoto: currentPhoto,
init
})
}
// Change the current index depending on direction // Change the current index depending on direction
const goToPhoto = direction => { const goToPhoto = direction => {
if (direction === 'prev') { if (direction === 'prev') {
@@ -58,6 +49,14 @@
sendCurrentPhoto({ init: false }) sendCurrentPhoto({ init: false })
} }
// Send current photo to event
const sendCurrentPhoto = ({ init = false }) => {
dispatch('photoChange', {
currentPhoto: photos[currentIndex],
init
})
}
/* /*
** Drag and touch navigation ** Drag and touch navigation
@@ -74,8 +73,8 @@
const swipeEnd = event => { const swipeEnd = event => {
touchEndX = event.changedTouches[0].screenX touchEndX = event.changedTouches[0].screenX
touchEndY = event.changedTouches[0].screenY touchEndY = event.changedTouches[0].screenY
if (touchEndX <= touchStartX) goToPhoto('prev') if (touchEndX <= touchStartX) goToPhoto('next')
if (touchEndX >= touchStartX) goToPhoto('next') if (touchEndX >= touchStartX) goToPhoto('prev')
} }
@@ -110,10 +109,10 @@
// Toggle class and focus of the button // Toggle class and focus of the button
if (event.type === 'mouseenter') { if (event.type === 'mouseenter') {
photoToHover.classList.add('hover') photoToHover.classList.add('hover')
button.focus() button.classList.add('hover')
} else if (event.type === 'mouseleave') { } else if (event.type === 'mouseleave') {
photoToHover.classList.remove('hover') photoToHover.classList.remove('hover')
button.blur() button.classList.remove('hover')
} }
} }
@@ -122,11 +121,9 @@
}) })
/* /*
TODO: REVEAL ANIMATION ON CAROUSEL ** TODO: REVEAL ANIMATION ON CAROUSEL
Fix the CSS priority? Cancel the transition delay and duration? ** Fix the CSS priority? Cancel the transition delay and duration?
data-aos="{ data-aos="{
(photo === prevPhoto) ? 'carousel-prev' : (photo === prevPhoto) ? 'carousel-prev' :
(photo === currentPhoto) ? 'carousel-active' : (photo === currentPhoto) ? 'carousel-active' :