From 0362d4dfeb81dbcd3ee13317676842cd43a83b31 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Tue, 31 Mar 2026 21:59:51 -0400 Subject: [PATCH] feat: add center alignment option to scrollToElement and update breadcrumb navigation to center focused items - Add "center" alignment option to scrollToElement function alongside existing top/default alignment - Calculate centered scroll position by centering element vertically in viewport - Update all breadcrumb navigation calls to use center alignment instead of top/false alignment - Refactor targetTop calculation with ternary operator for cleaner conditional logic --- frontend/app.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index a39efb6..f08bda2 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -2101,7 +2101,13 @@ const currentTop = scrollContainer.scrollTop; const offsetTop = element.offsetTop; - const targetTop = alignToTop ? Math.max(0, offsetTop - 60) : Math.max(0, currentTop + (elementRect.top - containerRect.top) - containerRect.height * 0.35); + const shouldCenter = alignToTop === "center"; + const centeredTop = Math.max(0, currentTop + (elementRect.top - containerRect.top) - (containerRect.height / 2) + (elementRect.height / 2)); + const targetTop = shouldCenter + ? centeredTop + : alignToTop + ? Math.max(0, offsetTop - 60) + : Math.max(0, currentTop + (elementRect.top - containerRect.top) - containerRect.height * 0.35); scrollContainer.scrollTo({ top: targetTop, @@ -2970,7 +2976,7 @@ const breadcrumbEls = []; breadcrumbEls.push( makeBreadcrumbSpan(data.vault, () => { - focusPathInSidebar(data.vault, "", { alignToTop: true }); + focusPathInSidebar(data.vault, "", { alignToTop: "center" }); }), ); let accumulated = ""; @@ -2981,13 +2987,13 @@ if (i < parts.length - 1) { breadcrumbEls.push( makeBreadcrumbSpan(part, () => { - focusPathInSidebar(data.vault, p, { alignToTop: true }); + focusPathInSidebar(data.vault, p, { alignToTop: "center" }); }), ); } else { breadcrumbEls.push( makeBreadcrumbSpan(part.replace(/\.md$/i, ""), () => { - focusPathInSidebar(data.vault, data.path, { alignToTop: false }); + focusPathInSidebar(data.vault, data.path, { alignToTop: "center" }); }), ); }