refactor(toc): fix alignment and improve layout responsiveness
- add heuristic sidebar detection - improve TOC positioning and width calculation - enhance layout robustness across themes
This commit is contained in:
+26
-28
@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
var stickyTop = 100;
|
var stickyTop = 100;
|
||||||
var headingOffset = 88;
|
var headingOffset = 88;
|
||||||
var ticking = false;
|
var ticking = false;
|
||||||
|
var cachedSidebar = null;
|
||||||
var tocBottomOffset = null;
|
var tocBottomOffset = null;
|
||||||
|
|
||||||
function isDesktop() {
|
function isDesktop() {
|
||||||
@@ -55,23 +55,22 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
tocBottomOffset = parseInt(value, 10) || 12;
|
tocBottomOffset = parseInt(value, 10) || 12;
|
||||||
return tocBottomOffset;
|
return tocBottomOffset;
|
||||||
}
|
}
|
||||||
|
|
||||||
let cachedSidebar = null;
|
|
||||||
|
|
||||||
function getRealSidebar() {
|
function getRealSidebar() {
|
||||||
if (cachedSidebar) return cachedSidebar;
|
if (cachedSidebar) return cachedSidebar;
|
||||||
|
|
||||||
var candidates = Array.from(document.querySelectorAll('aside, .sidebar, #secondary'));
|
var candidates = Array.prototype.slice.call(
|
||||||
|
document.querySelectorAll('aside, .sidebar, #secondary')
|
||||||
if (!candidates.length) return null;
|
);
|
||||||
|
|
||||||
cachedSidebar = candidates
|
cachedSidebar = candidates
|
||||||
.map(el => ({
|
.filter(function (el) {
|
||||||
el,
|
var rect = el.getBoundingClientRect();
|
||||||
rect: el.getBoundingClientRect()
|
return rect.width > 200 && rect.height > 200;
|
||||||
}))
|
})
|
||||||
.filter(item => item.rect.width > 200 && item.rect.height > 200)
|
.sort(function (a, b) {
|
||||||
.sort((a, b) => b.rect.left - a.rect.left)[0]?.el || null;
|
return b.getBoundingClientRect().left - a.getBoundingClientRect().left;
|
||||||
|
})[0] || null;
|
||||||
|
|
||||||
return cachedSidebar;
|
return cachedSidebar;
|
||||||
}
|
}
|
||||||
@@ -87,37 +86,36 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
var scrollTop = window.scrollY || window.pageYOffset || 0;
|
var scrollTop = window.scrollY || window.pageYOffset || 0;
|
||||||
var titleRect = title.getBoundingClientRect();
|
var titleRect = title.getBoundingClientRect();
|
||||||
|
|
||||||
|
// 🔥 bessere Content-Erkennung
|
||||||
var contentColumn =
|
var contentColumn =
|
||||||
document.querySelector('.inside-page .main-wrapper > section') ||
|
document.querySelector('.inside-page .main-wrapper > section') ||
|
||||||
document.querySelector('#primary') ||
|
document.querySelector('#primary') ||
|
||||||
document.querySelector('.content-area') ||
|
document.querySelector('.content-area') ||
|
||||||
title;
|
title;
|
||||||
|
|
||||||
|
if (!contentColumn) return;
|
||||||
|
|
||||||
var sidebar = getRealSidebar();
|
var sidebar = getRealSidebar();
|
||||||
|
|
||||||
if (!contentColumn || !sidebar) return;
|
|
||||||
|
|
||||||
var contentRect = contentColumn.getBoundingClientRect();
|
var contentRect = contentColumn.getBoundingClientRect();
|
||||||
var sidebarRect = sidebar.getBoundingClientRect();
|
var sidebarRect = sidebar ? sidebar.getBoundingClientRect() : null;
|
||||||
|
|
||||||
// --- stable gap ---
|
var gap = 48;
|
||||||
var gap = sidebarRect.left - contentRect.right;
|
|
||||||
|
|
||||||
if (gap < 0) {
|
if (sidebarRect) {
|
||||||
gap = 48;
|
gap = Math.abs(sidebarRect.left - contentRect.right);
|
||||||
|
gap = Math.max(32, Math.min(gap, 120));
|
||||||
}
|
}
|
||||||
|
|
||||||
gap = Math.max(32, Math.min(gap, 120));
|
// Toc Content Breite
|
||||||
|
var maxWidth = Math.max(Math.round(contentRect.left - gap - 24), 180);
|
||||||
|
var tocWidth = Math.max(220, Math.min(260, maxWidth));
|
||||||
|
|
||||||
var tocWidth = 220;
|
var tocLeft = Math.max(
|
||||||
|
24,
|
||||||
// --- final position ---
|
Math.round(contentRect.left - gap - tocWidth)
|
||||||
var tocLeft = Math.round(
|
|
||||||
contentRect.left - gap - tocWidth
|
|
||||||
);
|
);
|
||||||
|
|
||||||
tocLeft = Math.max(24, tocLeft);
|
|
||||||
|
|
||||||
var tocTop = Math.max(
|
var tocTop = Math.max(
|
||||||
stickyTop,
|
stickyTop,
|
||||||
Math.round(titleRect.top + scrollTop + 14)
|
Math.round(titleRect.top + scrollTop + 14)
|
||||||
|
|||||||
Reference in New Issue
Block a user