fix(theme): ensure outline marker follows click (#3879)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/5301/head
Em Zhan 2 months ago committed by GitHub
parent 6b5e7704a0
commit 31287c0b69
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -85,10 +85,12 @@ export function useActiveAnchor(
const onScroll = throttleAndDebounce(setActiveLink, 100) const onScroll = throttleAndDebounce(setActiveLink, 100)
let prevActiveLink: HTMLAnchorElement | null = null let prevActiveLink: HTMLAnchorElement | null = null
let ignoreScrollOnce: boolean = false
onMounted(() => { onMounted(() => {
requestAnimationFrame(setActiveLink) requestAnimationFrame(setActiveLink)
window.addEventListener('scroll', onScroll) window.addEventListener('scroll', onScroll)
container.value.addEventListener('click', onClick)
}) })
onUpdated(() => { onUpdated(() => {
@ -98,13 +100,33 @@ export function useActiveAnchor(
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', onScroll) window.removeEventListener('scroll', onScroll)
container.value.removeEventListener('click', onClick)
}) })
function onClick(e: MouseEvent) {
if (!isAsideEnabled.value) {
return
}
const hash =
e.target instanceof Element ? e.target.closest('a')?.hash : null
if (hash) {
ignoreScrollOnce = true
activateLink(hash)
}
}
function setActiveLink() { function setActiveLink() {
if (!isAsideEnabled.value) { if (!isAsideEnabled.value) {
return return
} }
if (ignoreScrollOnce) {
ignoreScrollOnce = false
return
}
const scrollY = window.scrollY const scrollY = window.scrollY
const innerHeight = window.innerHeight const innerHeight = window.innerHeight
const offsetHeight = document.body.offsetHeight const offsetHeight = document.body.offsetHeight
@ -159,7 +181,7 @@ export function useActiveAnchor(
prevActiveLink = null prevActiveLink = null
} else { } else {
prevActiveLink = container.value.querySelector( prevActiveLink = container.value.querySelector(
`a[href="${decodeURIComponent(hash)}"]` `a[href$="${decodeURIComponent(hash)}"]`
) )
} }

Loading…
Cancel
Save