|
1 | | -import { onMounted, onUnmounted, onUpdated } from 'vue' |
| 1 | +import { onMounted, onUnmounted, onUpdated } from 'vue'; |
2 | 2 |
|
3 | | -import type { Ref } from 'vue' |
| 3 | +import type { Ref } from 'vue'; |
4 | 4 |
|
5 | 5 | // 防抖节流控制 |
6 | 6 | export const throttleAndDebounce = (fn: () => any, delay: number) => { |
7 | | - let timeout: ReturnType<typeof setTimeout> |
8 | | - let called = false |
| 7 | + let timeout: ReturnType<typeof setTimeout>; |
| 8 | + let called = false; |
9 | 9 | return () => { |
10 | 10 | if (timeout) { |
11 | | - clearTimeout(timeout) |
| 11 | + clearTimeout(timeout); |
12 | 12 | } |
13 | 13 | if (!called) { |
14 | | - fn() |
15 | | - called = true |
| 14 | + fn(); |
| 15 | + called = true; |
16 | 16 | setTimeout(() => { |
17 | | - called = false |
18 | | - }, delay) |
| 17 | + called = false; |
| 18 | + }, delay); |
19 | 19 | } else { |
20 | | - timeout = setTimeout(fn, delay) |
| 20 | + timeout = setTimeout(fn, delay); |
21 | 21 | } |
22 | | - } |
23 | | -} |
| 22 | + }; |
| 23 | +}; |
24 | 24 |
|
25 | | -export function useActiveSidebarLinks( |
26 | | - container: Ref<HTMLElement>, |
27 | | - marker: Ref<HTMLElement> |
28 | | -) { |
29 | | - const onScroll = throttleAndDebounce(setActiveLink, 150) |
| 25 | +export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<HTMLElement>) { |
| 26 | + const onScroll = throttleAndDebounce(setActiveLink, 150); |
30 | 27 | function setActiveLink() { |
31 | | - const sidebarLinks = getSidebarLinks() |
32 | | - const anchors = getAnchors(sidebarLinks) |
| 28 | + const sidebarLinks = getSidebarLinks(); |
| 29 | + const anchors = getAnchors(sidebarLinks); |
33 | 30 |
|
34 | | - if ( |
35 | | - anchors.length && |
36 | | - window.scrollY + window.innerHeight === document.body.offsetHeight |
37 | | - ) { |
38 | | - activateLink(anchors[anchors.length - 1].hash) |
39 | | - return |
| 31 | + if (anchors.length && window.scrollY + window.innerHeight === document.body.offsetHeight) { |
| 32 | + activateLink(anchors[anchors.length - 1].hash); |
| 33 | + return; |
40 | 34 | } |
41 | 35 | for (let i = 0; i < anchors.length; i++) { |
42 | | - const anchor = anchors[i] |
43 | | - const nextAnchor = anchors[i + 1] |
44 | | - const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor) |
| 36 | + const anchor = anchors[i]; |
| 37 | + const nextAnchor = anchors[i + 1]; |
| 38 | + const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor); |
45 | 39 | if (isActive) { |
46 | | - history.replaceState( |
47 | | - null, |
48 | | - document.title, |
49 | | - hash ? (hash as string) : ' ' |
50 | | - ) |
51 | | - activateLink(hash as string) |
52 | | - return |
| 40 | + history.replaceState(null, document.title, hash ? (hash as string) : ' '); |
| 41 | + activateLink(hash as string); |
| 42 | + return; |
53 | 43 | } |
54 | 44 | } |
55 | 45 | } |
56 | 46 |
|
57 | | - let prevActiveLink: HTMLAnchorElement | null = null |
| 47 | + let prevActiveLink: HTMLAnchorElement | null = null; |
58 | 48 |
|
59 | 49 | function activateLink(hash: string) { |
60 | | - deactiveLink(prevActiveLink) |
| 50 | + deactiveLink(prevActiveLink); |
61 | 51 |
|
62 | | - const activeLink = (prevActiveLink = |
63 | | - hash == null |
64 | | - ? null |
65 | | - : (container.value.querySelector( |
66 | | - `.devui-item a[href="${decodeURIComponent(hash)}"]` |
67 | | - ) as HTMLAnchorElement)) |
68 | | - if (activeLink) { |
69 | | - activeLink.classList.add('active') |
70 | | - marker.value.style.opacity = '1' |
71 | | - marker.value.style.top = `${activeLink.offsetTop}px` |
72 | | - } else { |
73 | | - marker.value.style.opacity = '0' |
74 | | - marker.value.style.top = '33px' |
75 | | - } |
| 52 | + // const activeLink = (prevActiveLink = |
| 53 | + // hash == null |
| 54 | + // ? null |
| 55 | + // : (container.value.querySelector( |
| 56 | + // `.devui-item a[href="${decodeURIComponent(hash)}"]` |
| 57 | + // ) as HTMLAnchorElement)) |
| 58 | + // if (activeLink) { |
| 59 | + // activeLink.classList.add('active') |
| 60 | + // marker.value.style.opacity = '1' |
| 61 | + // marker.value.style.top = `${activeLink.offsetTop}px` |
| 62 | + // } else { |
| 63 | + // marker.value.style.opacity = '0' |
| 64 | + // marker.value.style.top = '33px' |
| 65 | + // } |
76 | 66 | } |
77 | 67 |
|
78 | 68 | function deactiveLink(link: HTMLElement) { |
79 | | - link && link.classList.remove('active') |
| 69 | + link && link.classList.remove('active'); |
80 | 70 | } |
81 | 71 |
|
82 | 72 | onMounted(() => { |
83 | | - window.requestAnimationFrame(setActiveLink) |
84 | | - window.addEventListener('scroll', onScroll) |
85 | | - }) |
| 73 | + window.requestAnimationFrame(setActiveLink); |
| 74 | + window.addEventListener('scroll', onScroll); |
| 75 | + }); |
86 | 76 |
|
87 | 77 | onUpdated(() => { |
88 | | - activateLink(location.hash) |
89 | | - }) |
| 78 | + activateLink(location.hash); |
| 79 | + }); |
90 | 80 |
|
91 | 81 | onUnmounted(() => { |
92 | | - window.removeEventListener('scroll', onScroll) |
93 | | - }) |
| 82 | + window.removeEventListener('scroll', onScroll); |
| 83 | + }); |
94 | 84 | } |
95 | 85 | function getSidebarLinks() { |
96 | | - return Array.from( |
97 | | - document.querySelectorAll('.devui-content-nav .devui-link') |
98 | | - ) as HTMLAnchorElement[] |
| 86 | + return Array.from(document.querySelectorAll('.devui-content-nav .devui-link')) as HTMLAnchorElement[]; |
99 | 87 | } |
100 | 88 | function getAnchors(sidebarLinks: HTMLAnchorElement[]) { |
101 | | - return ( |
102 | | - Array.from( |
103 | | - document.querySelectorAll('.content .header-anchor') |
104 | | - ) as HTMLAnchorElement[] |
105 | | - ).filter((anchor) => |
| 89 | + return (Array.from(document.querySelectorAll('.content .header-anchor')) as HTMLAnchorElement[]).filter((anchor) => |
106 | 90 | sidebarLinks.some((sidebarLink) => sidebarLink.hash === anchor.hash) |
107 | | - ) |
| 91 | + ); |
108 | 92 | } |
109 | 93 | function getPageOffset() { |
110 | | - return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight |
| 94 | + return (document.querySelector('.nav-bar') as HTMLElement).offsetHeight; |
111 | 95 | } |
112 | 96 | function getAnchorTop(anchor: HTMLAnchorElement) { |
113 | | - const pageOffset = getPageOffset() |
| 97 | + const pageOffset = getPageOffset(); |
114 | 98 | try { |
115 | | - return anchor.parentElement.offsetTop - pageOffset - 15 |
| 99 | + return anchor.parentElement.offsetTop - pageOffset - 15; |
116 | 100 | } catch (e) { |
117 | | - return 0 |
| 101 | + return 0; |
118 | 102 | } |
119 | 103 | } |
120 | | -function isAnchorActive( |
121 | | - index: number, |
122 | | - anchor: HTMLAnchorElement, |
123 | | - nextAnchor: HTMLAnchorElement |
124 | | -) { |
125 | | - const scrollTop = window.scrollY |
| 104 | +function isAnchorActive(index: number, anchor: HTMLAnchorElement, nextAnchor: HTMLAnchorElement) { |
| 105 | + const scrollTop = window.scrollY; |
126 | 106 | if (index === 0 && scrollTop === 0) { |
127 | | - return [true, null] |
| 107 | + return [true, null]; |
128 | 108 | } |
129 | 109 | if (scrollTop < getAnchorTop(anchor)) { |
130 | | - return [false, null] |
| 110 | + return [false, null]; |
131 | 111 | } |
132 | 112 | if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor)) { |
133 | | - return [true, decodeURIComponent(anchor.hash)] |
| 113 | + return [true, decodeURIComponent(anchor.hash)]; |
134 | 114 | } |
135 | | - return [false, null] |
| 115 | + return [false, null]; |
136 | 116 | } |
0 commit comments