Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-03-08 01:53:26 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(TOC): hide active overlay when no sections active (#586)
Some checks failed
Code quality / quality (push) Failing after 9s
Details
Build and Check / Astro Check for Node.js 22 (push) Failing after 5s
Details
Build and Check / Astro Check for Node.js 23 (push) Failing after 4s
Details
Build and Check / Astro Build for Node.js 22 (push) Failing after 4s
Details
Build and Check / Astro Build for Node.js 23 (push) Failing after 4s
Details

Browse Source 
* fix(TOC): hide active overlay when none active

* fix indentation
This commit is contained in:
rushii
2025-08-08 20:14:35 -07:00
committed by GitHub
parent 4ad55e035c
commit ec4dbfd1e8
2 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -25,3 +25,7 @@ pnpm-debug.log*
package-lock.json package-lock.json
bun.lockb bun.lockb
yarn.lock yarn.lock
# ide
.idea
*.iml

8
src/components/widget/TOC.astro
View File

@@ -55,7 +55,7 @@ const maxLevel = siteConfig.toc.depth;
}]}>{removeTailingHash(heading.text)}</div> }]}>{removeTailingHash(heading.text)}</div>
</a> </a>
)} )}
<div id="active-indicator" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all " + <div id="active-indicator" style="opacity: 0" class:list={[{'hidden': headings.length == 0}, "-z-10 absolute bg-[var(--toc-btn-hover)] left-0 right-0 rounded-xl transition-all " +
"group-hover:bg-transparent border-2 border-[var(--toc-btn-hover)] group-hover:border-[var(--toc-btn-active)] border-dashed"]}></div> "group-hover:bg-transparent border-2 border-[var(--toc-btn-hover)] group-hover:border-[var(--toc-btn-active)] border-dashed"]}></div>
</table-of-contents>} </table-of-contents>}
@@ -97,7 +97,7 @@ class TableOfContents extends HTMLElement {
toggleActiveHeading = () => { toggleActiveHeading = () => {
let i = this.active.length - 1; let i = this.active.length - 1;
let min = this.active.length - 1, max = 0; let min = this.active.length - 1, max = -1;
while (i >= 0 && !this.active[i]) { while (i >= 0 && !this.active[i]) {
this.tocEntries[i].classList.remove(this.visibleClass); this.tocEntries[i].classList.remove(this.visibleClass);
i--; i--;
@@ -112,11 +112,15 @@ class TableOfContents extends HTMLElement {
this.tocEntries[i].classList.remove(this.visibleClass); this.tocEntries[i].classList.remove(this.visibleClass);
i--; i--;
} }
if (min > max) {
this.activeIndicator?.setAttribute("style", `opacity: 0`);
} else {
let parentOffset = this.tocEl?.getBoundingClientRect().top || 0; let parentOffset = this.tocEl?.getBoundingClientRect().top || 0;
let scrollOffset = this.tocEl?.scrollTop || 0; let scrollOffset = this.tocEl?.scrollTop || 0;
let top = this.tocEntries[min].getBoundingClientRect().top - parentOffset + scrollOffset; let top = this.tocEntries[min].getBoundingClientRect().top - parentOffset + scrollOffset;
let bottom = this.tocEntries[max].getBoundingClientRect().bottom - parentOffset + scrollOffset; let bottom = this.tocEntries[max].getBoundingClientRect().bottom - parentOffset + scrollOffset;
this.activeIndicator?.setAttribute("style", `top: ${top}px; height: ${bottom - top}px`); this.activeIndicator?.setAttribute("style", `top: ${top}px; height: ${bottom - top}px`);
}
}; };
scrollToActiveHeading = () => { scrollToActiveHeading = () => {