Skip to content

Commit

Permalink
fix(theme): misaligned outline indicator\
Browse files Browse the repository at this point in the history
fixes #3449
  • Loading branch information
brc-dd committed Jan 15, 2024
1 parent cd8ee6f commit 910b212
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 34 deletions.
36 changes: 4 additions & 32 deletions src/client/app/router.ts
@@ -1,9 +1,9 @@
import { reactive, inject, markRaw, nextTick, readonly } from 'vue'
import type { Component, InjectionKey } from 'vue'
import { inject, markRaw, nextTick, reactive, readonly } from 'vue'
import type { Awaitable, PageData, PageDataPayload } from '../shared'
import { notFoundPageData, treatAsHtml } from '../shared'
import type { PageData, PageDataPayload, Awaitable } from '../shared'
import { inBrowser, withBase } from './utils'
import { siteDataRef } from './data'
import { getScrollOffset, inBrowser, withBase } from './utils'

export interface Route {
path: string
Expand Down Expand Up @@ -261,34 +261,14 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
}

if (target) {
let scrollOffset = siteDataRef.value.scrollOffset
let offset = 0
let padding = 24
if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
padding = scrollOffset.padding
scrollOffset = scrollOffset.selector
}
if (typeof scrollOffset === 'number') {
offset = scrollOffset
} else if (typeof scrollOffset === 'string') {
offset = tryOffsetSelector(scrollOffset, padding)
} else if (Array.isArray(scrollOffset)) {
for (const selector of scrollOffset) {
const res = tryOffsetSelector(selector, padding)
if (res) {
offset = res
break
}
}
}
const targetPadding = parseInt(
window.getComputedStyle(target).paddingTop,
10
)
const targetTop =
window.scrollY +
target.getBoundingClientRect().top -
offset +
getScrollOffset() +
targetPadding
function scrollToTarget() {
// only smooth scroll if distance is smaller than screen height.
Expand All @@ -300,14 +280,6 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
}
}

function tryOffsetSelector(selector: string, padding: number): number {
const el = document.querySelector(selector)
if (!el) return 0
const bot = el.getBoundingClientRect().bottom
if (bot < 0) return 0
return bot + padding
}

function handleHMR(route: Route): void {
// update route.data on HMR updates of active page
if (import.meta.hot) {
Expand Down
33 changes: 33 additions & 0 deletions src/client/app/utils.ts
Expand Up @@ -107,3 +107,36 @@ export function defineClientComponent(
}
}
}

export function getScrollOffset() {
let scrollOffset = siteDataRef.value.scrollOffset
let offset = 0
let padding = 24
if (typeof scrollOffset === 'object' && 'padding' in scrollOffset) {
padding = scrollOffset.padding
scrollOffset = scrollOffset.selector
}
if (typeof scrollOffset === 'number') {
offset = scrollOffset
} else if (typeof scrollOffset === 'string') {
offset = tryOffsetSelector(scrollOffset, padding)
} else if (Array.isArray(scrollOffset)) {
for (const selector of scrollOffset) {
const res = tryOffsetSelector(selector, padding)
if (res) {
offset = res
break
}
}
}

return offset
}

function tryOffsetSelector(selector: string, padding: number): number {
const el = document.querySelector(selector)
if (!el) return 0
const bot = el.getBoundingClientRect().bottom
if (bot < 0) return 0
return bot + padding
}
5 changes: 3 additions & 2 deletions src/client/theme-default/composables/outline.ts
@@ -1,8 +1,9 @@
import type { DefaultTheme } from 'vitepress/theme'
import { onMounted, onUnmounted, onUpdated, type Ref } from 'vue'
import { getScrollOffset } from '../../app/utils'
import type { Header } from '../../shared'
import { useAside } from './aside'
import { throttleAndDebounce } from '../support/utils'
import { useAside } from './aside'

// cached list of anchor elements from resolveHeaders
const resolvedHeaders: { element: HTMLHeadElement; link: string }[] = []
Expand Down Expand Up @@ -179,7 +180,7 @@ export function useActiveAnchor(
// find the last header above the top of viewport
let activeLink: string | null = null
for (const { link, top } of headers) {
if (top > scrollY + offsetDocTop) {
if (top > scrollY + offsetDocTop + getScrollOffset()) {
break
}
activeLink = link
Expand Down

0 comments on commit 910b212

Please sign in to comment.