Skip to content

Commit

Permalink
Revert "fix(theme): misaligned outline indicator\"
Browse files Browse the repository at this point in the history
This reverts commit 910b212.
  • Loading branch information
brc-dd committed Jan 16, 2024
1 parent d16e580 commit 4020b41
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 40 deletions.
36 changes: 32 additions & 4 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,14 +261,34 @@ 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 -
getScrollOffset() +
offset +
targetPadding
function scrollToTarget() {
// only smooth scroll if distance is smaller than screen height.
Expand All @@ -280,6 +300,14 @@ 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: 0 additions & 33 deletions src/client/app/utils.ts
Expand Up @@ -107,36 +107,3 @@ 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: 2 additions & 3 deletions src/client/theme-default/composables/outline.ts
@@ -1,9 +1,8 @@
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 { throttleAndDebounce } from '../support/utils'
import { useAside } from './aside'
import { throttleAndDebounce } from '../support/utils'

// cached list of anchor elements from resolveHeaders
const resolvedHeaders: { element: HTMLHeadElement; link: string }[] = []
Expand Down Expand Up @@ -180,7 +179,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 + getScrollOffset()) {
if (top > scrollY + offsetDocTop) {
break
}
activeLink = link
Expand Down

0 comments on commit 4020b41

Please sign in to comment.