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
|
** Navigate to a photo
|
||||||
*/
|
*/
|
||||||
// Go to specific photo on Init
|
// Go to specific photo on Init
|
||||||
if (init) {
|
if (init) {
|
||||||
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' :
|
||||||
|
|||||||
Reference in New Issue
Block a user