jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Track while scrolling

Browse source
This commit is contained in:
Justin Edmund 2025-06-13 07:53:22 -04:00
parent fcf5f87177
commit 824e44a1ef
3 changed files with 122 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/routes/photos/[albumSlug]/[photoId]/+page.svelte
View file

@ -138,10 +138,10 @@
// Check if mouse is in hover zones
if (x < imageRect.left) {
isHoveringLeft = true
leftButtonCoords.set({ x: mouseX, y: mouseY })
leftButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
} else if (x > imageRect.right) {
isHoveringRight = true
rightButtonCoords.set({ x: mouseX, y: mouseY })
rightButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
}
// Remove the listener
@ -157,12 +157,43 @@
const mouseX = currentPos.x - pageRect.left
const mouseY = currentPos.y - pageRect.top
// Store client coordinates for scroll updates
lastClientX = currentPos.x
lastClientY = currentPos.y
// Check if mouse is in hover zones
if (x < imageRect.left) {
isHoveringLeft = true
leftButtonCoords.set({ x: mouseX, y: mouseY })
leftButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
} else if (x > imageRect.right) {
isHoveringRight = true
rightButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
}
}
// Store last mouse client position for scroll updates
let lastClientX = 0
let lastClientY = 0
// Update button positions during scroll
function handleScroll() {
if (!isHoveringLeft && !isHoveringRight) return
const pageContainer = document.querySelector('.photo-page') as HTMLElement
if (!pageContainer) return
// Use last known mouse position (which is viewport-relative)
// and recalculate relative to the page container's new position
const pageRect = pageContainer.getBoundingClientRect()
const mouseX = lastClientX - pageRect.left
const mouseY = lastClientY - pageRect.top
// Update button positions
if (isHoveringLeft) {
leftButtonCoords.set({ x: mouseX, y: mouseY })
}
if (isHoveringRight) {
rightButtonCoords.set({ x: mouseX, y: mouseY })
}
}
@ -185,6 +216,10 @@
const mouseX = event.clientX - pageRect.left
const mouseY = event.clientY - pageRect.top
// Store last mouse position for scroll updates
lastClientX = event.clientX
lastClientY = event.clientY
// Check if mouse is in the left or right margin (outside the photo)
const wasHoveringLeft = isHoveringLeft
const wasHoveringRight = isHoveringRight
@ -238,10 +273,15 @@
}
}
// Set up keyboard listener
// Set up keyboard and scroll listeners
$effect(() => {
window.addEventListener('keydown', handleKeydown)
return () => window.removeEventListener('keydown', handleKeydown)
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('keydown', handleKeydown)
window.removeEventListener('scroll', handleScroll)
}
})
</script>

8
src/routes/photos/[slug]/+page.svelte
View file

@ -159,11 +159,7 @@
</div>
<div class="photo-container">
<img
src={photo.url}
alt={photo.title || photo.caption || 'Photo'}
class="photo-image"
/>
<img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" />
</div>
<div class="photo-info">
@ -215,7 +211,7 @@
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: $unit-4x $unit-3x;
padding: 0 $unit-3x;
@include breakpoint('phone') {
padding: $unit-3x $unit-2x;

54
src/routes/photos/p/[id]/+page.svelte
View file

@ -169,10 +169,10 @@
// Check if mouse is in hover zones
if (x < imageRect.left) {
isHoveringLeft = true
leftButtonCoords.set({ x: mouseX, y: mouseY })
leftButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
} else if (x > imageRect.right) {
isHoveringRight = true
rightButtonCoords.set({ x: mouseX, y: mouseY })
rightButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
}
// Remove the listener
@ -188,12 +188,47 @@
const mouseX = currentPos.x - pageRect.left
const mouseY = currentPos.y - pageRect.top
// Store client coordinates for scroll updates
lastClientX = currentPos.x
lastClientY = currentPos.y
// Check if mouse is in hover zones
if (x < imageRect.left) {
isHoveringLeft = true
leftButtonCoords.set({ x: mouseX, y: mouseY })
leftButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
} else if (x > imageRect.right) {
isHoveringRight = true
rightButtonCoords.set({ x: mouseX, y: mouseY }, { hard: true })
}
}
// Track last known mouse position for scroll updates
let lastMouseX = 0
let lastMouseY = 0
// Store last mouse client position for scroll updates
let lastClientX = 0
let lastClientY = 0
// Update button positions during scroll
function handleScroll() {
if (!isHoveringLeft && !isHoveringRight) return
const pageContainer = document.querySelector('.photo-page') as HTMLElement
if (!pageContainer) return
// Use last known mouse position (which is viewport-relative)
// and recalculate relative to the page container's new position
const pageRect = pageContainer.getBoundingClientRect()
const mouseX = lastClientX - pageRect.left
const mouseY = lastClientY - pageRect.top
// Update button positions
if (isHoveringLeft) {
leftButtonCoords.set({ x: mouseX, y: mouseY })
}
if (isHoveringRight) {
rightButtonCoords.set({ x: mouseX, y: mouseY })
}
}
@ -216,6 +251,10 @@
const mouseX = event.clientX - pageRect.left
const mouseY = event.clientY - pageRect.top
// Store last mouse position for scroll updates
lastClientX = event.clientX
lastClientY = event.clientY
// Check if mouse is in the left or right margin (outside the photo)
const wasHoveringLeft = isHoveringLeft
const wasHoveringRight = isHoveringRight
@ -260,10 +299,15 @@
}
}
// Set up keyboard listener
// Set up keyboard and scroll listeners
$effect(() => {
window.addEventListener('keydown', handleKeydown)
return () => window.removeEventListener('keydown', handleKeydown)
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('keydown', handleKeydown)
window.removeEventListener('scroll', handleScroll)
}
})
</script>