From 2ae5a6f12e07e7ef330905a49d91c055ebe22be1 Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Fri, 4 Oct 2024 09:53:16 -0400 Subject: [PATCH 1/3] use scrollLeft to avoid scrolling entire page to active code tab --- .../src/theme/ApiExplorer/CodeTabs/index.tsx | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx index 81311a38d..94eb0ac6b 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx @@ -44,6 +44,7 @@ function TabList({ tabValues, }: CodeTabsProps & ReturnType) { const tabRefs = useRef<(HTMLLIElement | null)[]>([]); + const tabsScrollContainerRef = useRef(); const { blockElementScrollPositionUntilNextRender } = useScrollPositionBlocker(); @@ -51,12 +52,18 @@ function TabList({ const activeTab = tabRefs.current.find( (tab) => tab?.getAttribute("aria-selected") === "true" ); - if (activeTab) { - activeTab.scrollIntoView({ - behavior: "auto", - block: "center", - inline: "start", - }); + + if (activeTab && tabsScrollContainerRef.current) { + const container = tabsScrollContainerRef.current; + const containerRect = container.getBoundingClientRect(); + const activeTabRect = activeTab.getBoundingClientRect(); + + // Calculate the distance to scroll to align active tab to the left + const scrollOffset = + activeTabRect.left - containerRect.left + container.scrollLeft; + + // Adjust the scroll of the container + container.scrollLeft = scrollOffset; } }, []); @@ -139,6 +146,7 @@ function TabList({ }, className )} + ref={tabsScrollContainerRef} > {tabValues.map(({ value, label, attributes }) => (
  • Date: Fri, 4 Oct 2024 10:06:15 -0400 Subject: [PATCH 2/3] avoid scrolling if first item in scroll area --- .../src/theme/ApiExplorer/CodeTabs/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx index 94eb0ac6b..d4c571a27 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx @@ -62,8 +62,12 @@ function TabList({ const scrollOffset = activeTabRect.left - containerRect.left + container.scrollLeft; - // Adjust the scroll of the container - container.scrollLeft = scrollOffset; + // Check if the active tab is not already at the left position + + if (Math.abs(scrollOffset - container.scrollLeft) > 4) { + // Adjust the scroll of the container + container.scrollLeft = scrollOffset; + } } }, []); From 1337735a25971bb65831006cf442884faf06f89b Mon Sep 17 00:00:00 2001 From: Steven Serrata Date: Fri, 4 Oct 2024 10:18:31 -0400 Subject: [PATCH 3/3] adjust offset for glow effect around active tab --- .../src/theme/ApiExplorer/CodeTabs/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx index d4c571a27..037b58b9e 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx @@ -59,8 +59,12 @@ function TabList({ const activeTabRect = activeTab.getBoundingClientRect(); // Calculate the distance to scroll to align active tab to the left + const glowOffset = 3; const scrollOffset = - activeTabRect.left - containerRect.left + container.scrollLeft; + activeTabRect.left - + containerRect.left + + container.scrollLeft - + glowOffset; // Check if the active tab is not already at the left position