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:
@@ -30,20 +30,11 @@
|
||||
/*
|
||||
** Navigate to a photo
|
||||
*/
|
||||
// Go to specific photo on Init
|
||||
// Go to specific photo on Init
|
||||
if (init) {
|
||||
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
|
||||
const goToPhoto = direction => {
|
||||
if (direction === 'prev') {
|
||||
@@ -58,6 +49,14 @@
|
||||
sendCurrentPhoto({ init: false })
|
||||
}
|
||||
|
||||
// Send current photo to event
|
||||
const sendCurrentPhoto = ({ init = false }) => {
|
||||
dispatch('photoChange', {
|
||||
currentPhoto: photos[currentIndex],
|
||||
init
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Drag and touch navigation
|
||||
@@ -74,8 +73,8 @@
|
||||
const swipeEnd = event => {
|
||||
touchEndX = event.changedTouches[0].screenX
|
||||
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
|
||||
if (event.type === 'mouseenter') {
|
||||
photoToHover.classList.add('hover')
|
||||
button.focus()
|
||||
button.classList.add('hover')
|
||||
} else if (event.type === 'mouseleave') {
|
||||
photoToHover.classList.remove('hover')
|
||||
button.blur()
|
||||
button.classList.remove('hover')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,11 +121,9 @@
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
TODO: REVEAL ANIMATION ON CAROUSEL
|
||||
Fix the CSS priority? Cancel the transition delay and duration?
|
||||
** TODO: REVEAL ANIMATION ON CAROUSEL
|
||||
** Fix the CSS priority? Cancel the transition delay and duration?
|
||||
data-aos="{
|
||||
(photo === prevPhoto) ? 'carousel-prev' :
|
||||
(photo === currentPhoto) ? 'carousel-active' :
|
||||
|
||||
Reference in New Issue
Block a user