From 91cad8e14727d4a3db0da616a9bf8c4936352a1a Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 15 Aug 2024 14:54:57 -0400 Subject: [PATCH] fix(docs): updated scroll selector for jumplinks, router links --- .../components/link/link.js | 41 +++++---- .../tableOfContents/tableOfContents.js | 86 +++++++++++++------ 2 files changed, 81 insertions(+), 46 deletions(-) diff --git a/packages/documentation-framework/components/link/link.js b/packages/documentation-framework/components/link/link.js index ce3116b782..e5cf4f4cce 100644 --- a/packages/documentation-framework/components/link/link.js +++ b/packages/documentation-framework/components/link/link.js @@ -2,16 +2,19 @@ import React from 'react'; import { Link as ReachLink, navigate } from '@reach/router'; import { getAsyncComponent } from '../../routes'; -const Promiseany = (Promise.any || function ($) { - return new Promise(function (D, E, A, L) { - A = []; - L = $.map(function ($, i) { - return Promise.resolve($).then(D, function (O) { - return ((A[i] = O), --L) || E({errors: A}); - }); - }).length; - }); -}).bind(Promise); +const Promiseany = ( + Promise.any || + function ($) { + return new Promise(function (D, E, A, L) { + A = []; + L = $.map(function ($, i) { + return Promise.resolve($).then(D, function (O) { + return ((A[i] = O), --L) || E({ errors: A }); + }); + }).length; + }); + } +).bind(Promise); export const Link = ({ href, @@ -23,7 +26,7 @@ export const Link = ({ let preloadPromise; let url = href || to || ''; if (url.startsWith('#') && !onClick) { - onClick = ev => { + onClick = (ev) => { ev.preventDefault(); // Don't use client-side routing // Chrome does not jump until ALL network requests finish. // We have to force it to... @@ -37,8 +40,7 @@ export const Link = ({ } if (url.includes('//') || url.startsWith('#')) { return ; - } - else if (url.startsWith('/')) { + } else if (url.startsWith('/')) { if (!process.env.PRERENDER) { const Component = getAsyncComponent(url); if (Component) { @@ -48,14 +50,17 @@ export const Link = ({ onMouseOver(); }; // Wait up to an extra 500ms on click before showing 'Loading...' - props.onClick = ev => { - if (!(ev.ctrlKey || ev.metaKey)) { // avoid disallowing cmnd/ctrl+click opening in new tab + props.onClick = (ev) => { + if (!(ev.ctrlKey || ev.metaKey)) { + // avoid disallowing cmnd/ctrl+click opening in new tab ev.preventDefault(); - document.querySelector("#ws-page-main").scrollTo({top: 0}); // scroll to top of page + document + .querySelector('.pf-v6-c-page__main-container') + .scrollTo({ top: 0 }); // scroll to top of page if (typeof window !== 'undefined' && url !== location.pathname) { Promiseany([ preloadPromise, - new Promise(res => setTimeout(res, 500)) + new Promise((res) => setTimeout(res, 500)), ]).then(() => navigate(url)); } } @@ -65,4 +70,4 @@ export const Link = ({ } return ; -} +}; diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.js b/packages/documentation-framework/components/tableOfContents/tableOfContents.js index 611523bc67..1f058f53e5 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.js +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.js @@ -1,5 +1,9 @@ import React from 'react'; -import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core'; +import { + JumpLinks, + JumpLinksItem, + JumpLinksList, +} from '@patternfly/react-core'; import { trackEvent } from '../../helpers'; export const TableOfContents = ({ items }) => { @@ -9,15 +13,17 @@ export const TableOfContents = ({ items }) => { const [stickyNavHeight, setStickyNavHeight] = React.useState(0); React.useEffect(() => { - if (document.getElementById("ws-sticky-nav-tabs")) { - setStickyNavHeight(document.getElementById("ws-sticky-nav-tabs").offsetHeight); + if (document.getElementById('ws-sticky-nav-tabs')) { + setStickyNavHeight( + document.getElementById('ws-sticky-nav-tabs').offsetHeight + ); } - }, []) + }, []); const updateWidth = () => { const { innerWidth } = window; innerWidth !== width && setWidth(innerWidth); - } + }; let jumpLinksItems = []; let wasSublistRendered = false; @@ -27,14 +33,20 @@ export const TableOfContents = ({ items }) => { <> {item.text} - {nextItemArr.map(curItem => ( + {nextItemArr.map((curItem) => ( trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())} + onClick={() => + trackEvent( + 'jump_link_click', + 'click_event', + curItem.id.toUpperCase() + ) + } > {curItem.text} @@ -42,7 +54,7 @@ export const TableOfContents = ({ items }) => { ); - } + }; const renderJumpLinksItems = () => { items.forEach((item, index) => { @@ -53,18 +65,28 @@ export const TableOfContents = ({ items }) => { return; } if (!Array.isArray(nextItem) && Array.isArray(item)) { - {item.map(curItem => jumpLinksItems.push( - trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())} - > - {curItem.text} - - ))} + { + item.map((curItem) => + jumpLinksItems.push( + + trackEvent( + 'jump_link_click', + 'click_event', + curItem.id.toUpperCase() + ) + } + > + {curItem.text} + + ) + ); + } } else { jumpLinksItems.push( { className="ws-toc-item" onKeyDown={updateWidth} onMouseDown={updateWidth} - onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())} + onClick={() => + trackEvent( + 'jump_link_click', + 'click_event', + item.id.toUpperCase() + ) + } > - { Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text } + {Array.isArray(nextItem) + ? renderSublist(item, nextItem) + : item.text} ); } - }) + }); return jumpLinksItems; - } + }; return ( 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight} expandable={{ default: 'expandable', '2xl': 'nonExpandable' }} > - { renderJumpLinksItems() } + {renderJumpLinksItems()} ); -} +};