10361229333

Committed 13 Aug 2024 12:04AM UTC coverage: 32.019% (-0.005%) from 32.024%

Build # 10361229333

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

fix header height for TOC

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4938 of 40228 branches covered (12.28%)

Branch coverage included in aggregate %.

49 of 120 new or added lines in 22 files covered. (40.83%)

4 existing lines in 3 files now uncovered.

28801 of 65143 relevant lines covered (44.21%)

180.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.16

/packages/lesswrong/components/posts/TableOfContents/FixedPositionToC.tsx

import React, { FC, MouseEvent, useEffect, useState } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import withErrorBoundary from '../../common/withErrorBoundary'
import { isServer } from '../../../lib/executionEnvironment';
import { useLocation } from '../../../lib/routeUtil';
import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
import qs from 'qs'
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import filter from 'lodash/filter';
import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';
import { useNavigate } from '../../../lib/reactRouterWrapper';
import { usePostReadProgress } from '../usePostReadProgress';
import { usePostsPageContext } from '../PostsPage/PostsPageContext';
import classNames from 'classnames';
import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';


function normalizeOffsets(sections: (ToCSection | ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
  if (sections.length === 0) {
    return [];
  }
  
  const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };

  const remainingSections = sections.slice(1);

  const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({
    ...section,
    offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))
  }));

  return [titleSection, ...normalizedSections];
};

function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
  let sectionsWithOffsets;
  const parentContainer = sectionHeaders[0]?.parentElement;
  // If we have any section headers, assign offsets to them
  if (parentContainer) {
    const containerHeight = parentContainer.getBoundingClientRect().height;

    const anchorOffsets = sectionHeaders.map(sectionHeader => ({
      anchorHref: sectionHeader.getAttribute('id'),
      offset: ((sectionHeader as HTMLElement).offsetTop - parentContainer.offsetTop)  / containerHeight
    }));

    sectionsWithOffsets = filteredSections.map((section) => {
      const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);
      return {
        ...section,
        offset: anchorOffset?.offset,
      };
    });
  } else {
    // Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
    sectionsWithOffsets = filteredSections;
  }
  return sectionsWithOffsets;
}

const CommentsLink: FC<{
  anchor: string,
  children: React.ReactNode,
  className?: string,
}> = ({anchor, children, className}) => {
  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    const elem = document.querySelector("#comments");
    if (elem) {
      // Match the scroll behaviour from TableOfContentsList
      window.scrollTo({
        top: window.scrollY + elem.getBoundingClientRect().top,
        behavior: "smooth",
      });
    } 
  }
  return (
    <a className={className} href={anchor} onClick={onClick}>
      {children}
    </a>
  );
}

const styles = (theme: ThemeType) => ({
  root: {
    left: 0,
    top: 0,
    maxHeight: '100vh',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    paddingTop: 22,
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
    wordBreak: 'break-word',
    transition: 'opacity .25s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
  },
  hover: {
    '& $rowOpacity': {
      opacity: 1,
    },
    '& $tocTitle': {
      opacity: 1,
    }
  },
  rowWrapper: {
    position: "relative",
    zIndex: 1,
    display: "flex",
    flexDirection: "column-reverse",
  },
  rowOpacity: {
    transition: '.25s',
    opacity: 0,
  },
  rowDotContainer: {
    display: "flex",
    alignItems: "center"
  },
  rowDot: {
    fontSize: 9,
    height: 9,
    background: theme.palette.background.pageActiveAreaBackground,
    marginLeft: 2,
    marginRight: 8,
    zIndex: 1,
    color: theme.palette.grey[700]
  },
  tocWrapper: {
    marginLeft: 13,
  },
  //Use our PostTitle styling with small caps
  tocTitle: {
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
  },
  wrapper: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    flexGrow: 1,
  },
  progressBarContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    '--scrollAmount': '0%',
    marginRight: -4,
    marginBottom: 20,
    width: 1,
    background: theme.palette.grey[400],
    overflowY: 'clip',
  },
  progressBar: {
    flex: 'var(--scrollAmount)',
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
    "&:after": {
      content: "''",
      marginLeft: -0.5,
      paddingLeft: 2,
      alignSelf: 'end',
      height: 'var(--windowHeight)',
      background: theme.palette.grey[600],
    }
  },
  unfilledProgressBar: {
    width: 1,
    flex: 'calc(100% - var(--scrollAmount))',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
  },
  rows: {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    '& .TableOfContentsRow-link': {
      background: theme.palette.panelBackground.default
    },
    '& .TableOfContentsDivider-divider': {
      marginLeft: 4,
    },
  },
  comments: {
    paddingBottom: 20,
    ...theme.typography.body2,
    ...theme.typography.commentStyle,
    color: theme.palette.link.tocLink,
    display: "flex",
    alignItems: "center",
    marginRight: 20,
  },
  commentsIcon: {
    fontSize: 20,
    marginRight: 8,
    color: theme.palette.grey[400],
    position: 'relative',
    top: 1
  },
  '@font-face': {
    fontFamily: "ETBookBold",
    src: "url('https://res.cloudinary.com/lesswrong-2-0/raw/upload/v1504470690/et-book-bold-line-figures_piiabg.woff') format('woff')",  
  },
  answerIcon: {
    fontSize: 24,
    fontFamily: "ETBookBold",
    fontWeight: 900,
    marginRight: 7,
    color: theme.palette.grey[400]
  },
  commentsLabel: {
    marginLeft: 6
  },
  wideClickTarget: {
    width: '100%',
  }
});

const FixedPositionToc = ({tocSections, title, onClickSection, displayOptions, classes, hover, commentCount, answerCount}: {
  tocSections: ToCSection[],
  title: string|null,
  onClickSection?: () => void,
  displayOptions?: ToCDisplayOptions,
  classes: ClassesType<typeof styles>,
  hover?: boolean,
  commentCount?: number,
  answerCount?: number,
}) => {
  const { TableOfContentsRow, AnswerTocRow, Row, ForumIcon } = Components;

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;

  const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);
  const [hasLoaded, setHasLoaded] = useState(false);

  const postContext = usePostsPageContext();
  const disableProgressBar = (!postContext || isServer || postContext.shortform);

  const { readingProgressBarRef } = usePostReadProgress({
    updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),
    disabled: disableProgressBar || !hasLoaded,
    setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),
    useFirstViewportHeight: true
  });

  const jumpToAnchor = (anchor: string) => {
    if (isServer) return;

    const anchorY = getAnchorY(anchor);
    if (anchorY !== null) {
      delete query.commentId;
      navigate({
        search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,
        hash: `#${anchor}`,
      });
      let sectionYdocumentSpace = anchorY + window.scrollY;
      jumpToY(sectionYdocumentSpace);
    }
  }

  let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)
    ? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)
    : tocSections;

  if (displayOptions?.addedRows) {
    filteredSections = [...filteredSections, ...displayOptions.addedRows];
  }

  // Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
  if (filteredSections.some(section => section.answer)) {
    filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);
  }
  
  const { landmarkName: currentSection } = useScrollHighlight([
    ...filteredSections.map((section): ScrollHighlightLandmark => ({
      landmarkName: section.anchor,
      elementId: section.anchor,
      position: "centerOfElement",
      offset: -(getCurrentSectionMark() * 2)
    })),
    {
      landmarkName: "comments",
      elementId: "postBody",
      position: "bottomOfElement",
      offset: -(getCurrentSectionMark() * 2)
    },
  ]);

  const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {
    ev.preventDefault();
    if (onClickSection) {
      onClickSection();
      // One of the things this callback can do is expand folded-up text which
      // might contain the anchor we want to scroll to. We wait for a setTimeout
      // here, to allow React re-rendering to finish in that case.
      await new Promise((resolve,reject) => setTimeout(resolve, 0));
    }
    jumpToSection();
  }

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    //Get all elements with href corresponding to anchors from the table of contents
    const postImages = Array.from(postBodyRef.getElementsByTagName('img'));
    function updateImageLoadingState(this: HTMLImageElement) {
      if (postImages.every(image => image.complete)) setHasLoaded(true)
      this.removeEventListener('load', updateImageLoadingState);
    };
    postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));
    if (postImages.every(image => image.complete)) setHasLoaded(true);
    return () => {
      postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));
    }
  }, [])

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));
    const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));
    const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);
    const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);

    if (!isEqual(normalizedSections, newNormalizedSections)) {
      setNormalizedSections(newNormalizedSections);
    }
  }, [filteredSections, normalizedSections, hasLoaded]);

  const titleRow = (
    <div className={classes.rowWrapper} key={"#"}>
      <div className={classes.rowDotContainer}>
        <span className={classNames(classes.rowOpacity, classes.tocWrapper)}>
          <TableOfContentsRow indentLevel={1} key="postTitle" href="#" offset={0} fullHeight
            highlighted={currentSection === "above"}
            onClick={ev => {
              if (isRegularClick(ev)) {
              void handleClick(ev, () => {
                navigate("#");
                jumpToY(0)
              });
              }
            }}
          >
            <div className={classes.tocTitle}>
              {title?.trim()}
            </div>
          </TableOfContentsRow>
        </span>
      </div>
    </div>
  );
  
  const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");

  const rows = renderedSections.map((section, index) => {
    const offsetStyling = section.offset !== undefined ? { flex: section.offset } : undefined;

    const tocRow = (
      <TableOfContentsRow
        indentLevel={section.level}
        divider={section.divider}
        href={"#"+section.anchor}
        offset={section.offset}
        highlighted={section.anchor === currentSection}
        onClick={(ev) => {
          if (isRegularClick(ev)) {
            void handleClick(ev, () => {
              jumpToAnchor(section.anchor)
            });
          }
        }}
        answer={!!section.answer}
        fullHeight
      >
        {section.answer
          ? <AnswerTocRow answer={section.answer} />
          : <span>{adjustHeadingText(section.title)}</span>
        }
      </TableOfContentsRow>
    )

    return (
      <div className={classes.rowWrapper} style={offsetStyling} key={section.anchor}>
        <div className={classes.rowDotContainer}>
          <div className={classes.rowDot}>•</div>
          <span className={classes.rowOpacity}>
            {tocRow}
          </span>
        </div>
      </div>
    )
  });

  if (!tocSections || !hasLoaded)
    return <div/>




  return <div className={classNames(classes.root, { [classes.hover]: hover })}>
    <div className={classes.wrapper}>
      <div className={classes.progressBarContainer} ref={readingProgressBarRef}>
        <div className={classes.progressBar} />
        <div className={classes.unfilledProgressBar}/>
      </div>
      <div className={classes.rows}>
        {titleRow}
        {rows}
      </div>
    </div>
    <Row justifyContent="flex-start">
      {typeof answerCount === 'number' && <CommentsLink anchor="#answers" className={classes.comments}>
        <div className={classes.answerIcon}>A</div>
        {answerCount}
      </CommentsLink>}
      <CommentsLink anchor="#comments" className={classNames(classes.comments, classes.wideClickTarget)}>
        <ForumIcon icon="Comment" className={classes.commentsIcon} />
        {commentCount}
        {typeof answerCount !== 'number'  && <span className={classNames(classes.commentsLabel, classes.rowOpacity)}>Comments</span>}
      </CommentsLink>
    </Row>
  </div>
}

const FixedPositionTocComponent = registerComponent(
  "FixedPositionToC", FixedPositionToc, {
    hocs: [withErrorBoundary],
    styles
  }
);

declare global {
  interface ComponentTypes {
    FixedPositionToC: typeof FixedPositionTocComponent
  }
}

1	import React, { FC, MouseEvent, useEffect, useState } from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import withErrorBoundary from '../../common/withErrorBoundary'	1✔
4	import { isServer } from '../../../lib/executionEnvironment';	1✔
5	import { useLocation } from '../../../lib/routeUtil';	1✔
6	import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
7	import qs from 'qs'	1✔
8	import isEmpty from 'lodash/isEmpty';	1✔
9	import isEqual from 'lodash/isEqual';	1✔
10	import filter from 'lodash/filter';	1✔
11	import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';	1✔
12	import { useNavigate } from '../../../lib/reactRouterWrapper';	1✔
13	import { usePostReadProgress } from '../usePostReadProgress';	1✔
14	import { usePostsPageContext } from '../PostsPage/PostsPageContext';	1✔
15	import classNames from 'classnames';	1✔
16	import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';	1✔
17
18
19	function normalizeOffsets(sections: (ToCSection \| ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
20	if (sections.length === 0) {	×
21	return [];	×
22	}
23
24	const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };	×
25
26	const remainingSections = sections.slice(1);	×
27
28	const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({	×
29	...section,
30	offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))	×
31	}));
32
33	return [titleSection, ...normalizedSections];	×
34	};
35
36	function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
37	let sectionsWithOffsets;
38	const parentContainer = sectionHeaders[0]?.parentElement;	×
39	// If we have any section headers, assign offsets to them
40	if (parentContainer) {	×
41	const containerHeight = parentContainer.getBoundingClientRect().height;	×
42
43	const anchorOffsets = sectionHeaders.map(sectionHeader => ({	×
44	anchorHref: sectionHeader.getAttribute('id'),
45	offset: ((sectionHeader as HTMLElement).offsetTop - parentContainer.offsetTop) / containerHeight
46	}));
47
48	sectionsWithOffsets = filteredSections.map((section) => {	×
49	const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);	×
50	return {	×
51	...section,
52	offset: anchorOffset?.offset,	×
53	};
54	});
55	} else {
56	// Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
57	sectionsWithOffsets = filteredSections;	×
58	}
59	return sectionsWithOffsets;	×
60	}
61
62	const CommentsLink: FC<{
63	anchor: string,
64	children: React.ReactNode,
65	className?: string,
66	}> = ({anchor, children, className}) => {	1✔
NEW 67	const onClick = (e: MouseEvent<HTMLAnchorElement>) => {	×
NEW 68	e.preventDefault();	×
NEW 69	const elem = document.querySelector("#comments");	×
NEW 70	if (elem) {	×
71	// Match the scroll behaviour from TableOfContentsList
NEW 72	window.scrollTo({	×
73	top: window.scrollY + elem.getBoundingClientRect().top,
74	behavior: "smooth",
75	});
76	}
77	}
NEW 78	return (	×
79	<a className={className} href={anchor} onClick={onClick}>
80	{children}
81	</a>
82	);
83	}
84
85	const styles = (theme: ThemeType) => ({	1✔
86	root: {
87	left: 0,
88	top: 0,
89	maxHeight: '100vh',
90	height: '100%',
91	display: 'flex',
92	flexDirection: 'column',
93	paddingTop: 22,
94	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
95	'& .TableOfContentsRow-title': {
96	borderBottom: "none",
97	},
98	wordBreak: 'break-word',
99	transition: 'opacity .25s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
100	},
101	hover: {
102	'& $rowOpacity': {
103	opacity: 1,
104	},
105	'& $tocTitle': {
106	opacity: 1,
107	}
108	},
109	rowWrapper: {
110	position: "relative",
111	zIndex: 1,
112	display: "flex",
113	flexDirection: "column-reverse",
114	},
115	rowOpacity: {
116	transition: '.25s',
117	opacity: 0,
118	},
119	rowDotContainer: {
120	display: "flex",
121	alignItems: "center"
122	},
123	rowDot: {
124	fontSize: 9,
125	height: 9,
126	background: theme.palette.background.pageActiveAreaBackground,
127	marginLeft: 2,
128	marginRight: 8,
129	zIndex: 1,
130	color: theme.palette.grey[700]
131	},
132	tocWrapper: {
133	marginLeft: 13,
134	},
135	//Use our PostTitle styling with small caps
136	tocTitle: {
137	...theme.typography.postStyle,
138	...theme.typography.smallCaps,
139	fontSize: "1.3rem",
140	},
141	wrapper: {
142	display: 'flex',
143	flexDirection: 'row',
144	justifyContent: 'space-evenly',
145	flexGrow: 1,
146	},
147	progressBarContainer: {
148	display: 'flex',
149	flexDirection: 'column',
150	justifyContent: 'space-evenly',
151	'--scrollAmount': '0%',
152	marginRight: -4,
153	marginBottom: 20,
154	width: 1,
155	background: theme.palette.grey[400],
156	overflowY: 'clip',
157	},
158	progressBar: {
159	flex: 'var(--scrollAmount)',
160	display: 'flex',
161	[theme.breakpoints.down('sm')]: {
162	marginLeft: -8,
163	marginRight: -8
164	},
165	"&:after": {
166	content: "''",
167	marginLeft: -0.5,
168	paddingLeft: 2,
169	alignSelf: 'end',
170	height: 'var(--windowHeight)',
171	background: theme.palette.grey[600],
172	}
173	},
174	unfilledProgressBar: {
175	width: 1,
176	flex: 'calc(100% - var(--scrollAmount))',
177	[theme.breakpoints.down('sm')]: {
178	marginLeft: -8,
179	marginRight: -8
180	},
181	},
182	rows: {
183	display: 'flex',
184	flexDirection: 'column',
185	flexGrow: 1,
186	'& .TableOfContentsRow-link': {
187	background: theme.palette.panelBackground.default
188	},
189	'& .TableOfContentsDivider-divider': {
190	marginLeft: 4,
191	},
192	},
193	comments: {
194	paddingBottom: 20,
195	...theme.typography.body2,
196	...theme.typography.commentStyle,
197	color: theme.palette.link.tocLink,
198	display: "flex",
199	alignItems: "center",
200	marginRight: 20,
201	},
202	commentsIcon: {
203	fontSize: 20,
204	marginRight: 8,
205	color: theme.palette.grey[400],
206	position: 'relative',
207	top: 1
208	},
209	'@font-face': {
210	fontFamily: "ETBookBold",
211	src: "url('https://res.cloudinary.com/lesswrong-2-0/raw/upload/v1504470690/et-book-bold-line-figures_piiabg.woff') format('woff')",
212	},
213	answerIcon: {
214	fontSize: 24,
215	fontFamily: "ETBookBold",
216	fontWeight: 900,
217	marginRight: 7,
218	color: theme.palette.grey[400]
219	},
220	commentsLabel: {
221	marginLeft: 6
222	},
223	wideClickTarget: {
224	width: '100%',
225	}
226	});
227
228	const FixedPositionToc = ({tocSections, title, onClickSection, displayOptions, classes, hover, commentCount, answerCount}: {	1✔
229	tocSections: ToCSection[],
230	title: string\|null,
231	onClickSection?: () => void,
232	displayOptions?: ToCDisplayOptions,
233	classes: ClassesType<typeof styles>,
234	hover?: boolean,
235	commentCount?: number,
236	answerCount?: number,
237	}) => {
NEW 238	const { TableOfContentsRow, AnswerTocRow, Row, ForumIcon } = Components;	×
239
240	const navigate = useNavigate();	×
241	const location = useLocation();	×
242	const { query } = location;	×
243
UNCOV 244	const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);	×
245	const [hasLoaded, setHasLoaded] = useState(false);	×
246
247	const postContext = usePostsPageContext();	×
NEW 248	const disableProgressBar = (!postContext \|\| isServer \|\| postContext.shortform);	×
249
250	const { readingProgressBarRef } = usePostReadProgress({	×
251	updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),	×
252	disabled: disableProgressBar \|\| !hasLoaded,	×
253	setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),	×
254	useFirstViewportHeight: true
255	});
256
257	const jumpToAnchor = (anchor: string) => {	×
258	if (isServer) return;	×
259
260	const anchorY = getAnchorY(anchor);	×
261	if (anchorY !== null) {	×
262	delete query.commentId;	×
263	navigate({	×
264	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
265	hash: `#${anchor}`,
266	});
267	let sectionYdocumentSpace = anchorY + window.scrollY;	×
268	jumpToY(sectionYdocumentSpace);	×
269	}
270	}
271
272	let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)	×
273	? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)	×
274	: tocSections;
275
276	if (displayOptions?.addedRows) {	×
277	filteredSections = [...filteredSections, ...displayOptions.addedRows];	×
278	}
279
280	// Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
281	if (filteredSections.some(section => section.answer)) {	×
282	filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);	×
283	}
284
285	const { landmarkName: currentSection } = useScrollHighlight([	×
286	...filteredSections.map((section): ScrollHighlightLandmark => ({	×
287	landmarkName: section.anchor,
288	elementId: section.anchor,
289	position: "centerOfElement",
290	offset: -(getCurrentSectionMark() * 2)
291	})),
292	{
293	landmarkName: "comments",
294	elementId: "postBody",
295	position: "bottomOfElement",
296	offset: -(getCurrentSectionMark() * 2)
297	},
298	]);
299
300	const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {	×
301	ev.preventDefault();	×
302	if (onClickSection) {	×
303	onClickSection();	×
304	// One of the things this callback can do is expand folded-up text which
305	// might contain the anchor we want to scroll to. We wait for a setTimeout
306	// here, to allow React re-rendering to finish in that case.
307	await new Promise((resolve,reject) => setTimeout(resolve, 0));	×
308	}
309	jumpToSection();	×
310	}
311
312	useEffect(() => {	×
313	const postBodyRef = document.getElementById('postBody');	×
314	if (!postBodyRef) return;	×
315	//Get all elements with href corresponding to anchors from the table of contents
316	const postImages = Array.from(postBodyRef.getElementsByTagName('img'));	×
317	function updateImageLoadingState(this: HTMLImageElement) {
318	if (postImages.every(image => image.complete)) setHasLoaded(true)	×
319	this.removeEventListener('load', updateImageLoadingState);	×
320	};
321	postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));	×
322	if (postImages.every(image => image.complete)) setHasLoaded(true);	×
323	return () => {	×
324	postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));	×
325	}
326	}, [])
327
328	useEffect(() => {	×
329	const postBodyRef = document.getElementById('postBody');	×
330	if (!postBodyRef) return;	×
331	const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));	×
332	const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));	×
333	const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);	×
334	const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);	×
335
336	if (!isEqual(normalizedSections, newNormalizedSections)) {	×
337	setNormalizedSections(newNormalizedSections);	×
338	}
339	}, [filteredSections, normalizedSections, hasLoaded]);
340
341	const titleRow = (
NEW 342	<div className={classes.rowWrapper} key={"#"}>	×
343	<div className={classes.rowDotContainer}>
344	<span className={classNames(classes.rowOpacity, classes.tocWrapper)}>
345	<TableOfContentsRow indentLevel={1} key="postTitle" href="#" offset={0} fullHeight
346	highlighted={currentSection === "above"}
347	onClick={ev => {
NEW 348	if (isRegularClick(ev)) {	×
NEW 349	void handleClick(ev, () => {	×
NEW 350	navigate("#");	×
NEW 351	jumpToY(0)	×
352	});
353	}
354	}}
355	>
356	<div className={classes.tocTitle}>
357	{title?.trim()}	×
358	</div>
359	</TableOfContentsRow>
360	</span>
361	</div>
362	</div>
363	);
364
NEW 365	const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");	×
366
NEW 367	const rows = renderedSections.map((section, index) => {	×
NEW 368	const offsetStyling = section.offset !== undefined ? { flex: section.offset } : undefined;	×
369
370	const tocRow = (
UNCOV 371	<TableOfContentsRow	×
372	indentLevel={section.level}
373	divider={section.divider}
374	href={"#"+section.anchor}
375	offset={section.offset}
376	highlighted={section.anchor === currentSection}
377	onClick={(ev) => {
378	if (isRegularClick(ev)) {	×
379	void handleClick(ev, () => {	×
380	jumpToAnchor(section.anchor)	×
381	});
382	}
383	}}
384	answer={!!section.answer}
385	fullHeight
386	>
387	{section.answer
388	? <AnswerTocRow answer={section.answer} />	×
389	: <span>{adjustHeadingText(section.title)}</span>
390	}
391	</TableOfContentsRow>
392	)
393
NEW 394	return (	×
395	<div className={classes.rowWrapper} style={offsetStyling} key={section.anchor}>
396	<div className={classes.rowDotContainer}>
397	<div className={classes.rowDot}>•</div>
398	<span className={classes.rowOpacity}>
399	{tocRow}
400	</span>
401	</div>
402	</div>
403	)
404	});
405
406	if (!tocSections \|\| !hasLoaded)	×
407	return <div/>	×
408
409
410
411
NEW 412	return <div className={classNames(classes.root, { [classes.hover]: hover })}>	×
413	<div className={classes.wrapper}>
414	<div className={classes.progressBarContainer} ref={readingProgressBarRef}>
415	<div className={classes.progressBar} />
416	<div className={classes.unfilledProgressBar}/>
417	</div>
418	<div className={classes.rows}>
419	{titleRow}
420	{rows}
421	</div>
422	</div>
423	<Row justifyContent="flex-start">
424	{typeof answerCount === 'number' && <CommentsLink anchor="#answers" className={classes.comments}>	×
425	<div className={classes.answerIcon}>A</div>
426	{answerCount}
427	</CommentsLink>}
428	<CommentsLink anchor="#comments" className={classNames(classes.comments, classes.wideClickTarget)}>
429	<ForumIcon icon="Comment" className={classes.commentsIcon} />
430	{commentCount}
431	{typeof answerCount !== 'number' && <span className={classNames(classes.commentsLabel, classes.rowOpacity)}>Comments</span>}	×
432	</CommentsLink>
433	</Row>
434	</div>
435	}
436
437	const FixedPositionTocComponent = registerComponent(	1✔
438	"FixedPositionToC", FixedPositionToc, {
439	hocs: [withErrorBoundary],
440	styles
441	}
442	);
443
444	declare global {
445	interface ComponentTypes {
446	FixedPositionToC: typeof FixedPositionTocComponent
447	}
448	}

ForumMagnum / ForumMagnum / 10361229333

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous