11013594187

Committed 24 Sep 2024 12:18PM UTC coverage: 31.847% (-0.003%) from 31.85%

Build # 11013594187

Build Type

Pull #9699

github

Committed by

Will-Howard

Commit Message

Fix (unreproduced) stuttering scroll

Pull Request Pull Request #9699: Improvements to in-context comment links

Run Details

5077 of 41414 branches covered (12.26%)

Branch coverage included in aggregate %.

33 of 161 new or added lines in 15 files covered. (20.5%)

9 existing lines in 7 files now uncovered.

29461 of 67037 relevant lines covered (43.95%)

184.52 hits per line

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

11.34

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

import React, { useEffect, useState } from 'react';
import { Components, registerComponent } from '@/lib/vulcan-lib/components';
import withErrorBoundary from '@/components/common/withErrorBoundary'
import { isServer } from '../../../lib/executionEnvironment';
import { useLocation } from '../../../lib/routeUtil';
import type { ToCSection, ToCSectionWithOffsetAndScale } from '../../../lib/tableOfContents';
import qs from 'qs'
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import filter from 'lodash/filter';
import { 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';
import { HOVER_CLASSNAME } from './MultiToCLayout';
import { getOffsetChainTop } from '@/lib/utils/domUtil';
import { scrollFocusOnElement, ScrollHighlightLandmark } from '@/lib/scrollUtils';
import { isLWorAF } from '@/lib/instanceSettings';


function normalizeToCScale({containerPosition, sections}: {
  sections: ToCSection[]
  containerPosition?: {top: number, bottom: number},
}): ToCSectionWithOffsetAndScale[] {
  return sections.map((section,idx) => {
    // The vertical scale (flex-grow amount) of a ToC element is proportional
    // to the offset of the next positioned element minus its own offset.
    // However, not every element necessarily has an offset; if an element
    // doesn't have one its vertical scale is 0 (ie it does not grow past its
    // minimum size), and it's skipped for purposes of deciding what counts as
    // the "next positioned element". (When we hit the end of the list, we use
    // containerPosition.bottom in place of the next offset)
    let nextPositionedIdx = idx+1;
    while (nextPositionedIdx<sections.length && !sections[nextPositionedIdx].offset)
      nextPositionedIdx++;
    
    const nextSectionOffset = (nextPositionedIdx>=sections.length)
      ? containerPosition?.bottom ?? 0
      : sections[nextPositionedIdx].offset ?? 0;
    return {
      ...section,
      offset: section.offset ?? 0,
      scale: section.divider
        ? 1
        : nextSectionOffset - (section.offset ?? 0)
    };
  });
};

function getSectionsWithOffsets(postContents: HTMLElement, sections: ToCSection[]): ToCSectionWithOffsetAndScale[] {
  // Filter out ToC entries which don't correspond to headings inside the post
  // body. This removes entries for the comment section, answers, and
  // dividers, which are included in the server-side ToC generation and are
  // used in the original ToC, but aren't used in the full-height ToC.
  const postBodyBlocks = Array.from(postContents.querySelectorAll('[id]'));
  const sectionHeaderIds = new Set<string>();
  for (const block of postBodyBlocks) {
    const id = block.getAttribute('id')
    if (id) {
      sectionHeaderIds.add(id);
    }
  }
  const filteredSections = sections.filter(section => sectionHeaderIds.has(section.anchor));

  // Measure the post contents container (distinct from the post body container,
  // in that it doesn't include the title and metadata).
  const containerTop = getOffsetChainTop(postContents);
  const containerHeight = postContents.offsetHeight;

  // Measure the vertical position of each anchor
  const sectionsWithOffsets = filteredSections.map((section) => {
    const anchor = document.getElementById(section.anchor);
    if (anchor) {
      return {
        ...section,
        offset: getOffsetChainTop(anchor),
      };
    } else {
      return section;
    }
  });
  
  // Using the vertical positions, compute scale factors
  return normalizeToCScale({
    sections: sectionsWithOffsets,
    containerPosition: {top: containerTop, bottom: containerTop+containerHeight},
  });
}

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",
  },
  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,
    },
  },
});

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 } = Components;

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

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

  const postContext = usePostsPageContext()?.fullPost;
  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;

      // This is forum-gating of a fairly subtle change in scroll behaviour, LW may want to adopt scrollFocusOnElement
      if (!isLWorAF) {
        scrollFocusOnElement({ id: anchor, options: {behavior: "smooth"}})
      } else {
        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",
    })),
    {
      landmarkName: "comments",
      elementId: "postBody",
      position: "bottomOfElement",
    },
  ]);

  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(() => {
    void (async () => {
      await waitForAllPostImagesToLoad();
      setHasLoaded(true);
    })();
  }, [])

  useEffect(() => {
    const postContent = document.getElementById('postContent');
    if (!postContent) return;
    const newNormalizedSections = getSectionsWithOffsets(postContent, filteredSections);

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

  const titleRow = (
    <div className={classes.rowWrapper} key={"#"}>
      <div className={classes.rowDotContainer}>
        <span className={classNames(HOVER_CLASSNAME, classes.rowOpacity, classes.tocWrapper)}>
          <TableOfContentsRow
            indentLevel={1}
            key="postTitle"
            href="#"
            scale={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 scaleStyling = section.scale !== undefined ? { flex: section.scale } : undefined;

    const tocRow = (
      <TableOfContentsRow
        indentLevel={section.level}
        divider={section.divider}
        href={"#"+section.anchor}
        scale={section.scale}
        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={scaleStyling} key={section.anchor}>
        <div className={classes.rowDotContainer}>
          <div className={classes.rowDot}>•</div>
          <span className={classNames(classes.rowOpacity, HOVER_CLASSNAME)}>
            {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>
  </div>
}

async function waitForAllPostImagesToLoad() {
  const postBody = document.getElementById('postBody');
  if (!postBody) return;
  const postImages = Array.from(postBody.getElementsByTagName('img'));

  for (const imageTag of postImages) {
    if (!imageTag.complete) {
      await waitForImageToLoad(imageTag);
    }
  }
}

function waitForImageToLoad(imageTag: HTMLImageElement): Promise<void> {
  return new Promise((resolve) => {
    if (imageTag.complete) {
      resolve();
      return;
    }
    
    function onImageLoaded(this: HTMLImageElement) {
      imageTag.removeEventListener("load", onImageLoaded);
      resolve();
    }
    imageTag.addEventListener("load", onImageLoaded);
  });
}

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

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

1	import React, { useEffect, useState } from 'react';	1✔
2	import { Components, registerComponent } from '@/lib/vulcan-lib/components';	1✔
3	import withErrorBoundary from '@/components/common/withErrorBoundary'	1✔
4	import { isServer } from '../../../lib/executionEnvironment';	1✔
5	import { useLocation } from '../../../lib/routeUtil';	1✔
6	import type { ToCSection, ToCSectionWithOffsetAndScale } 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 { 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	import { HOVER_CLASSNAME } from './MultiToCLayout';	1✔
18	import { getOffsetChainTop } from '@/lib/utils/domUtil';	1✔
19	import { scrollFocusOnElement, ScrollHighlightLandmark } from '@/lib/scrollUtils';	1✔
20	import { isLWorAF } from '@/lib/instanceSettings';	1✔
21
22
23	function normalizeToCScale({containerPosition, sections}: {
24	sections: ToCSection[]
25	containerPosition?: {top: number, bottom: number},
26	}): ToCSectionWithOffsetAndScale[] {
27	return sections.map((section,idx) => {	×
28	// The vertical scale (flex-grow amount) of a ToC element is proportional
29	// to the offset of the next positioned element minus its own offset.
30	// However, not every element necessarily has an offset; if an element
31	// doesn't have one its vertical scale is 0 (ie it does not grow past its
32	// minimum size), and it's skipped for purposes of deciding what counts as
33	// the "next positioned element". (When we hit the end of the list, we use
34	// containerPosition.bottom in place of the next offset)
35	let nextPositionedIdx = idx+1;	×
36	while (nextPositionedIdx<sections.length && !sections[nextPositionedIdx].offset)	×
37	nextPositionedIdx++;	×
38
39	const nextSectionOffset = (nextPositionedIdx>=sections.length)	×
40	? containerPosition?.bottom ?? 0	×
41	: sections[nextPositionedIdx].offset ?? 0;	×
42	return {	×
43	...section,
44	offset: section.offset ?? 0,	×
45	scale: section.divider
46	? 1	×
47	: nextSectionOffset - (section.offset ?? 0)	×
48	};
49	});
50	};
51
52	function getSectionsWithOffsets(postContents: HTMLElement, sections: ToCSection[]): ToCSectionWithOffsetAndScale[] {
53	// Filter out ToC entries which don't correspond to headings inside the post
54	// body. This removes entries for the comment section, answers, and
55	// dividers, which are included in the server-side ToC generation and are
56	// used in the original ToC, but aren't used in the full-height ToC.
57	const postBodyBlocks = Array.from(postContents.querySelectorAll('[id]'));	×
58	const sectionHeaderIds = new Set<string>();	×
59	for (const block of postBodyBlocks) {	×
60	const id = block.getAttribute('id')	×
61	if (id) {	×
62	sectionHeaderIds.add(id);	×
63	}
64	}
65	const filteredSections = sections.filter(section => sectionHeaderIds.has(section.anchor));	×
66
67	// Measure the post contents container (distinct from the post body container,
68	// in that it doesn't include the title and metadata).
69	const containerTop = getOffsetChainTop(postContents);	×
70	const containerHeight = postContents.offsetHeight;	×
71
72	// Measure the vertical position of each anchor
73	const sectionsWithOffsets = filteredSections.map((section) => {	×
74	const anchor = document.getElementById(section.anchor);	×
75	if (anchor) {	×
76	return {	×
77	...section,
78	offset: getOffsetChainTop(anchor),
79	};
80	} else {
81	return section;	×
82	}
83	});
84
85	// Using the vertical positions, compute scale factors
86	return normalizeToCScale({	×
87	sections: sectionsWithOffsets,
88	containerPosition: {top: containerTop, bottom: containerTop+containerHeight},
89	});
90	}
91
92	const styles = (theme: ThemeType) => ({	1✔
93	root: {
94	left: 0,
95	top: 0,
96	maxHeight: '100vh',
97	height: '100%',
98	display: 'flex',
99	flexDirection: 'column',
100	paddingTop: 22,
101	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
102	'& .TableOfContentsRow-title': {
103	borderBottom: "none",
104	},
105	wordBreak: 'break-word',
106	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',
107	},
108	hover: {
109	'& $rowOpacity': {
110	opacity: 1,
111	},
112	'& $tocTitle': {
113	opacity: 1,
114	}
115	},
116	rowWrapper: {
117	position: "relative",
118	zIndex: 1,
119	display: "flex",
120	flexDirection: "column",
121	},
122	rowOpacity: {
123	transition: '.25s',
124	opacity: 0,
125	},
126	rowDotContainer: {
127	display: "flex",
128	alignItems: "center"
129	},
130	rowDot: {
131	fontSize: 9,
132	height: 9,
133	background: theme.palette.background.pageActiveAreaBackground,
134	marginLeft: 2,
135	marginRight: 8,
136	zIndex: 1,
137	color: theme.palette.grey[700]
138	},
139	tocWrapper: {
140	marginLeft: 13,
141	},
142	//Use our PostTitle styling with small caps
143	tocTitle: {
144	...theme.typography.postStyle,
145	...theme.typography.smallCaps,
146	fontSize: "1.3rem",
147	},
148	wrapper: {
149	display: 'flex',
150	flexDirection: 'row',
151	justifyContent: 'space-evenly',
152	flexGrow: 1,
153	},
154	progressBarContainer: {
155	display: 'flex',
156	flexDirection: 'column',
157	justifyContent: 'space-evenly',
158	'--scrollAmount': '0%',
159	marginRight: -4,
160	marginBottom: 20,
161	width: 1,
162	background: theme.palette.grey[400],
163	overflowY: 'clip',
164	},
165	progressBar: {
166	flex: 'var(--scrollAmount)',
167	display: 'flex',
168	[theme.breakpoints.down('sm')]: {
169	marginLeft: -8,
170	marginRight: -8
171	},
172	"&:after": {
173	content: "''",
174	marginLeft: -0.5,
175	paddingLeft: 2,
176	alignSelf: 'end',
177	height: 'var(--windowHeight)',
178	background: theme.palette.grey[600],
179	}
180	},
181	unfilledProgressBar: {
182	width: 1,
183	flex: 'calc(100% - var(--scrollAmount))',
184	[theme.breakpoints.down('sm')]: {
185	marginLeft: -8,
186	marginRight: -8
187	},
188	},
189	rows: {
190	display: 'flex',
191	flexDirection: 'column',
192	flexGrow: 1,
193	'& .TableOfContentsRow-link': {
194	background: theme.palette.panelBackground.default
195	},
196	'& .TableOfContentsDivider-divider': {
197	marginLeft: 4,
198	},
199	},
200	});
201
202	const FixedPositionToc = ({tocSections, title, onClickSection, displayOptions, classes, hover, commentCount, answerCount}: {	1✔
203	tocSections: ToCSection[],
204	title: string\|null,
205	onClickSection?: () => void,
206	displayOptions?: ToCDisplayOptions,
207	classes: ClassesType<typeof styles>,
208	hover?: boolean,
209	commentCount?: number,
210	answerCount?: number,
211	}) => {
212	const { TableOfContentsRow, AnswerTocRow } = Components;	×
213
214	const navigate = useNavigate();	×
215	const location = useLocation();	×
216	const { query } = location;	×
217
218	const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffsetAndScale[]>([]);	×
219	const [hasLoaded, setHasLoaded] = useState(false);	×
220
221	const postContext = usePostsPageContext()?.fullPost;	×
222	const disableProgressBar = (!postContext \|\| isServer \|\| postContext.shortform);	×
223
224	const { readingProgressBarRef } = usePostReadProgress({	×
225	updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),	×
226	disabled: disableProgressBar \|\| !hasLoaded,	×
227	setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),	×
228	useFirstViewportHeight: true
229	});
230
231	const jumpToAnchor = (anchor: string) => {	×
232	if (isServer) return;	×
233
234	const anchorY = getAnchorY(anchor);	×
235	if (anchorY !== null) {	×
236	delete query.commentId;	×
237	navigate({	×
238	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
239	hash: `#${anchor}`,
240	});
241	let sectionYdocumentSpace = anchorY + window.scrollY;	×
242
243	// This is forum-gating of a fairly subtle change in scroll behaviour, LW may want to adopt scrollFocusOnElement
NEW 244	if (!isLWorAF) {	×
NEW 245	scrollFocusOnElement({ id: anchor, options: {behavior: "smooth"}})	×
246	} else {
NEW 247	jumpToY(sectionYdocumentSpace);	×
248	}
249	}
250	}
251
252	let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)	×
253	? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)	×
254	: tocSections;
255
256	if (displayOptions?.addedRows) {	×
257	filteredSections = [...filteredSections, ...displayOptions.addedRows];	×
258	}
259
260	// 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)
261	if (filteredSections.some(section => section.answer)) {	×
262	filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);	×
263	}
264
265	const { landmarkName: currentSection } = useScrollHighlight([	×
266	...filteredSections.map((section): ScrollHighlightLandmark => ({	×
267	landmarkName: section.anchor,
268	elementId: section.anchor,
269	position: "centerOfElement",
270	})),
271	{
272	landmarkName: "comments",
273	elementId: "postBody",
274	position: "bottomOfElement",
275	},
276	]);
277
278	const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {	×
279	ev.preventDefault();	×
280	if (onClickSection) {	×
281	onClickSection();	×
282	// One of the things this callback can do is expand folded-up text which
283	// might contain the anchor we want to scroll to. We wait for a setTimeout
284	// here, to allow React re-rendering to finish in that case.
285	await new Promise((resolve,reject) => setTimeout(resolve, 0));	×
286	}
287	jumpToSection();	×
288	}
289
290	useEffect(() => {	×
291	void (async () => {	×
292	await waitForAllPostImagesToLoad();	×
293	setHasLoaded(true);	×
294	})();
295	}, [])
296
297	useEffect(() => {	×
298	const postContent = document.getElementById('postContent');	×
299	if (!postContent) return;	×
300	const newNormalizedSections = getSectionsWithOffsets(postContent, filteredSections);	×
301
302	if (!isEqual(normalizedSections, newNormalizedSections)) {	×
303	setNormalizedSections(newNormalizedSections);	×
304	}
305	}, [filteredSections, normalizedSections, hasLoaded]);
306
307	const titleRow = (
308	<div className={classes.rowWrapper} key={"#"}>	×
309	<div className={classes.rowDotContainer}>
310	<span className={classNames(HOVER_CLASSNAME, classes.rowOpacity, classes.tocWrapper)}>
311	<TableOfContentsRow
312	indentLevel={1}
313	key="postTitle"
314	href="#"
315	scale={0}
316	fullHeight
317	highlighted={currentSection === "above"}
318	onClick={ev => {
319	if (isRegularClick(ev)) {	×
320	void handleClick(ev, () => {	×
321	navigate("#");	×
322	jumpToY(0)	×
323	});
324	}
325	}}
326	>
327	<div className={classes.tocTitle}>
328	{title?.trim()}	×
329	</div>
330	</TableOfContentsRow>
331	</span>
332	</div>
333	</div>
334	);
335
336	const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");	×
337
338	const rows = renderedSections.map((section, index) => {	×
339	const scaleStyling = section.scale !== undefined ? { flex: section.scale } : undefined;	×
340
341	const tocRow = (
342	<TableOfContentsRow	×
343	indentLevel={section.level}
344	divider={section.divider}
345	href={"#"+section.anchor}
346	scale={section.scale}
347	highlighted={section.anchor === currentSection}
348	onClick={(ev) => {
349	if (isRegularClick(ev)) {	×
350	void handleClick(ev, () => {	×
351	jumpToAnchor(section.anchor)	×
352	});
353	}
354	}}
355	answer={!!section.answer}
356	fullHeight
357	>
358	{section.answer
359	? <AnswerTocRow answer={section.answer} />	×
360	: <span>{adjustHeadingText(section.title)}</span>
361	}
362	</TableOfContentsRow>
363	)
364
365	return (	×
366	<div className={classes.rowWrapper} style={scaleStyling} key={section.anchor}>
367	<div className={classes.rowDotContainer}>
368	<div className={classes.rowDot}>•</div>
369	<span className={classNames(classes.rowOpacity, HOVER_CLASSNAME)}>
370	{tocRow}
371	</span>
372	</div>
373	</div>
374	)
375	});
376
377	if (!tocSections \|\| !hasLoaded)	×
378	return <div/>	×
379
380	return <div className={classNames(classes.root, { [classes.hover]: hover })}>	×
381	<div className={classes.wrapper}>
382	<div className={classes.progressBarContainer} ref={readingProgressBarRef}>
383	<div className={classes.progressBar} />
384	<div className={classes.unfilledProgressBar}/>
385	</div>
386	<div className={classes.rows}>
387	{titleRow}
388	{rows}
389	</div>
390	</div>
391	</div>
392	}
393
394	async function waitForAllPostImagesToLoad() {
395	const postBody = document.getElementById('postBody');	×
396	if (!postBody) return;	×
397	const postImages = Array.from(postBody.getElementsByTagName('img'));	×
398
399	for (const imageTag of postImages) {	×
400	if (!imageTag.complete) {	×
401	await waitForImageToLoad(imageTag);	×
402	}
403	}
404	}
405
406	function waitForImageToLoad(imageTag: HTMLImageElement): Promise<void> {
407	return new Promise((resolve) => {	×
408	if (imageTag.complete) {	×
409	resolve();	×
410	return;	×
411	}
412
413	function onImageLoaded(this: HTMLImageElement) {
414	imageTag.removeEventListener("load", onImageLoaded);	×
415	resolve();	×
416	}
417	imageTag.addEventListener("load", onImageLoaded);	×
418	});
419	}
420
421	const FixedPositionTocComponent = registerComponent(	1✔
422	"FixedPositionToC", FixedPositionToc, {
423	hocs: [withErrorBoundary],
424	styles
425	}
426	);
427
428	declare global {
429	interface ComponentTypes {
430	FixedPositionToC: typeof FixedPositionTocComponent
431	}
432	}

ForumMagnum / ForumMagnum / 11013594187

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