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:
2026-04-26 14:00:35 +02:00
parent dbdaaff9f2
commit a9f1e799d4
2 changed files with 27 additions and 29 deletions
+25 -27
View File
@@ -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() {
@@ -56,22 +56,21 @@ document.addEventListener('DOMContentLoaded', function () {
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)
+1 -1
View File
File diff suppressed because one or more lines are too long