blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-09-03 04:02:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Feat: add calculate toc margin logic (#65)

Browse Source
This commit is contained in:
Cell
2022-02-18 15:56:09 +08:00
parent 0bf30a50d9
commit 24a2b10ba7
5 changed files with 8 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_page/_single.scss
+2 -1
View File
@@ -2,7 +2,8 @@
.single {
.single-title {
margin: 1rem 0 .5rem;
padding: 1rem 0 .5rem;
margin: 0;
font-size: 1.6rem;
font-weight: bold;
line-height: 140%;
assets/css/_partial/_single/_toc.scss
+2 -2
View File
@@ -50,7 +50,7 @@
#toc-auto {
display: block;
position: sticky;
top: $header-height + 1rem; // TODO calculate top
top: $header-height + .5rem;
padding-left: 1rem;
padding-right: 1rem;
@include overflow-wrap(break-word);
@@ -60,7 +60,7 @@
@include blur;
.toc-title {
margin: .8rem 0;
margin: .5rem 0;
&::before {
content: "|";
assets/js/theme.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/theme.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/js/theme.js
+2 -22
View File
@@ -394,7 +394,6 @@ class Theme {
}
}
// TODO review
initToc() {
const $toc = document.getElementById('toc-auto');
if ($toc === null){
@@ -414,34 +413,15 @@ class Theme {
$tocCore.parentElement.removeChild($tocCore);
$tocContentAuto.appendChild($tocCore);
}
// const $page = document.getElementsByClassName('page')[0];
// const rect = $page.getBoundingClientRect();
// $toc.style.left = `${rect.left + rect.width + 20}px`;
// $toc.style.maxWidth = `${$page.getBoundingClientRect().left - 20}px`;
$toc.style.visibility = 'visible';
$toc.style.marginTop = document.querySelector('.single-title').clientHeight + document.querySelector('.post-meta').clientHeight + 'px';
$toc.style.marginBottom = document.getElementById('post-footer').clientHeight + 'px';
const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
const $tocLiElements = $tocCore.getElementsByTagName('li');
const $headerLinkElements = document.getElementsByClassName('header-link');
const headerIsFixed = document.body.getAttribute('header-desktop') !== 'normal';
const headerHeight = document.getElementById('header-desktop').offsetHeight;
const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
const minTocTop = $toc.offsetTop;
const minScrollTop = minTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
this._tocOnScroll = this._tocOnScroll || (() => {
// const footerTop = document.getElementById('post-footer').offsetTop;
// const maxTocTop = footerTop - $toc.getBoundingClientRect().height;
// const maxScrollTop = maxTocTop - TOP_SPACING + (headerIsFixed ? 0 : headerHeight);
// if (this.newScrollTop < minScrollTop) {
// $toc.style.position = 'absolute';
// $toc.style.top = `${minTocTop}px`;
// } else if (this.newScrollTop > maxScrollTop) {
// $toc.style.position = 'absolute';
// $toc.style.top = `${maxTocTop}px`;
// } else {
// $toc.style.position = 'fixed';
// $toc.style.top = `${TOP_SPACING}px`;
// }
this.util.forEach($tocLinkElements, $tocLink => { $tocLink.classList.remove('active'); });
this.util.forEach($tocLiElements, $tocLi => { $tocLi.classList.remove('has-active'); });
const INDEX_SPACING = 20 + (headerIsFixed ? headerHeight : 0);