fix: mini-toc active item (#313)

diplodoc-platform · Oct 8, 2024 · a144445 · a144445
1 parent 15b23d4
commit a144445
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 42 deletions.
diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss
@@ -21,7 +21,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
     &__aside {
         position: fixed;
-        top: calc(var(--dc-header-height, #{$headerHeight}) + var(--dc-subheader-height));
+        top: calc(var(--dc-header-height, #{$headerHeight}) + var(--dc-subheader-height, #{$subHeaderHeight}));
 
         padding-top: 24px;
         width: 176px;

diff --git a/src/components/MobileControls/MobileControls.tsx b/src/components/MobileControls/MobileControls.tsx
@@ -4,18 +4,10 @@ import block from 'bem-cn-lite';
 import allLangs from 'langs';
 import {KeyPrefix, Namespace, TFunction} from 'react-i18next';
 
-import {
-    ControlSizes,
-    ControlsLayout,
-    ControlsProps,
-    DEFAULT_LANGS,
-    DocSettings,
-    LEGACY_LANG_ITEMS,
-    Lang,
-    Theme,
-} from '../..';
+import {DEFAULT_LANGS, LEGACY_LANG_ITEMS} from '../../constants';
+import {ControlsLayout, ControlsProps} from '../Controls';
 import {useTranslation} from '../../hooks';
-import {ListItem, OnChangeValue} from '../../models';
+import {ControlSizes, DocSettings, Lang, ListItem, OnChangeValue, Theme} from '../../models';
 
 import MobileControl from './MobileControl/MobileControl';
 import './MobileControls.scss';

diff --git a/src/components/Scrollspy/Scrollspy.tsx b/src/components/Scrollspy/Scrollspy.tsx
@@ -46,6 +46,8 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
     itemRefs = this.props.items.map(() => React.createRef<HTMLDivElement>());
 
     scrollByClick: boolean;
+    prevOffset: number;
+    hasActiveHash: boolean;
     firstItemIndexInView: number;
     lastItemIndexInView: number;
     overflowChecked: boolean;
@@ -60,6 +62,8 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
 
         this.overflowChecked = false;
         this.scrollByClick = false;
+        this.prevOffset = 0;
+        this.hasActiveHash = false;
         this.firstItemIndexInView = -1;
         this.lastItemIndexInView = -1;
     }
@@ -80,6 +84,10 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
         const {items, router} = this.props;
         const {inViewState} = this.state;
 
+        if (this.state.inViewState !== prevState.inViewState) {
+            console.log(inViewState.findIndex(Boolean));
+        }
+
         if (!isEqual(inViewState, prevState.inViewState)) {
             this.scrollToListItem();
         }
@@ -266,46 +274,61 @@ export class Scrollspy extends React.Component<ScrollspyInnerProps, ScrollspySta
         const {targetItems, inViewState} = this.state;
         const {headerHeight} = this.props;
         const currentOffset = window.pageYOffset;
-        const visibleItemOffset: boolean[] = [];
-        let isOneActive = false;
 
-        const pureHash = hash && hash.startsWith('#') ? hash.substring(1) : hash;
+        const isScrollUp = currentOffset < this.prevOffset;
+        this.prevOffset = currentOffset;
 
-        targetItems.forEach((item, index) => {
-            if (!item) {
-                return;
-            }
+        const pureHash = hash?.startsWith('#') ? hash.substring(1) : hash;
 
-            const offsetTop = item.getBoundingClientRect().top;
-            const isVisibleItem = offsetTop < headerHeight + 1;
-
-            if (pureHash) {
-                if (pureHash === item.getAttribute('id')) {
-                    visibleItemOffset.push(true);
-                    isOneActive = true;
-                } else {
-                    visibleItemOffset.push(false);
-                }
-            } else if (isVisibleItem) {
-                if (visibleItemOffset[index - 1]) {
-                    visibleItemOffset[index - 1] = false;
+        let newActiveIndex: number;
+        if (pureHash) {
+            newActiveIndex = targetItems.findIndex(
+                (item) => item && item.getAttribute('id') === pureHash,
+            );
+        } else {
+            newActiveIndex = targetItems.reduce<number>((res, item, index) => {
+                if (!item) {
+                    return res;
                 }
 
-                visibleItemOffset.push(true);
-                isOneActive = true;
-            } else {
-                visibleItemOffset.push(false);
+                const isScrolledPast = item.getBoundingClientRect().top < headerHeight + 1;
+                return isScrolledPast ? index : res;
+            }, -1);
+        }
+
+        if (targetItems.length && newActiveIndex === -1) {
+            newActiveIndex = 0;
+        }
+
+        if (newActiveIndex === -1) {
+            return inViewState;
+        }
+
+        const prevActiveIndex = inViewState.findIndex(Boolean);
+        const getNewInViewState = () => {
+            if (newActiveIndex === prevActiveIndex) {
+                return inViewState;
             }
-        });
+            const result = new Array<boolean>(targetItems.length).fill(false);
+            result[newActiveIndex] = true;
+            return result;
+        };
+
+        if (pureHash) {
+            this.hasActiveHash = true;
+            return getNewInViewState();
+        }
 
-        if (targetItems && targetItems.length && !isOneActive) {
-            if (currentOffset < targetItems[0].getBoundingClientRect().top) {
-                visibleItemOffset[0] = true;
-                isOneActive = true;
+        // not changing active item until scroll up or the next item becomes active
+        if (this.hasActiveHash) {
+            if (isScrollUp || newActiveIndex > prevActiveIndex) {
+                this.hasActiveHash = false;
+                return getNewInViewState();
             }
+            return inViewState;
         }
 
-        return isOneActive ? visibleItemOffset : inViewState;
+        return getNewInViewState();
     }
 
     private getActiveItemTitle(titles: string[], inViewState: boolean[]) {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1,5 +1,6 @@
 // Sizes
 $headerHeight: 0px;
+$subHeaderHeight: 40px;
 $subNavigationHeight: 52px;
 $normalOffset: 20px;
 $miniTocOffset: 56px;