10222300055

Committed 02 Aug 2024 09:30PM UTC coverage: 32.06%. Remained the same

Build # 10222300055

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

add image/audio

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40108 branches covered (12.31%)

Branch coverage included in aggregate %.

44 of 96 new or added lines in 14 files covered. (45.83%)

2 existing lines in 2 files now uncovered.

28755 of 64982 relevant lines covered (44.25%)

180.62 hits per line

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

10.82

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

import React, { FC, MouseEvent, useContext, 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 { SidebarsContext } from '../../common/SidebarsWrapper';
import classNames from 'classnames';
import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';
import { z } from 'zod';
import CommentsIcon from '@material-ui/icons/ModeComment';


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 / 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(anchor);
    if (elem) {
      // Match the scroll behaviour from TableOfContentsList
      window.scrollTo({
        top: elem.getBoundingClientRect().y - (window.innerHeight / 3) + 1,
        behavior: "smooth",
      });
    }
  }
  return (
    <a className={className} href={anchor}>
      {children}
    </a>
  );
}

const styles = (theme: ThemeType) => ({
  root: {
    left: 0,
    top: 0,
    maxHeight: '100vh',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
    wordBreak: 'break-word',
    transition: 'opacity .5s 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,
    },
  },
  rowWrapper: {
    position: "relative",
    zIndex: 1,
    transition: '.1s',
    display: "flex",
    flexDirection: "column-reverse",
  },
  rowOpacity: {
    opacity: 0,
  },
  rowDotContainer: {
    display: "flex",
    alignItems: "center"
  },
  rowDot: {
    fontSize: 9,
    height: 9,
    background: theme.palette.background.pageActiveAreaBackground,
    marginLeft: 2,
    marginRight: 8,
    zIndex: 1
  },
  fadeOut: {
    opacity: 0,
    transform: 'translateX(-50px)',
    transitionDelay: '0s',
  },
  fadeIn: {
  },
  //Use our PostTitle styling with small caps
  tocTitle: {
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
    marginTop: 16,
    marginBottom: 8,
  },
  tocPostedAt: {
    color: theme.palette.link.tocLink
  },
  belowTitle: {
    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
    },
  },
  nonTitleRows: {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 1,
    '& .TableOfContentsRow-link': {
      background: theme.palette.panelBackground.default
    },
    '& .TableOfContentsDivider-divider': {
      marginLeft: 4,
    },
  },
  comments: {
    paddingBottom: 18,
    ...theme.typography.body2,
    ...theme.typography.commentStyle,
    color: theme.palette.link.tocLink,
    display: "flex",
    alignItems: "center"
  },
  commentsIcon: {
    fontSize: 20,
    marginRight: 4,
    color: theme.palette.grey[400]
  }
});

const FixedPositionToc = ({tocSections, title, postedAt, onClickSection, displayOptions, classes}: {
  tocSections: ToCSection[],
  title: string|null,
  postedAt?: Date,
  onClickSection?: () => void,
  displayOptions?: ToCDisplayOptions,
  classes: ClassesType<typeof styles>,
}) => {
  const { TableOfContentsRow, AnswerTocRow, FormatDate } = Components;

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;
  const { tocVisible } = useContext(SidebarsContext)!;

  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 = (
    <TableOfContentsRow
      key="postTitle"
      href="#"
      offset={0}
      onClick={ev => {
        if (isRegularClick(ev)) {
          void handleClick(ev, () => {
            navigate("#");
            jumpToY(0)
          });
        }
      }}
      highlighted={currentSection === "above"}
      title
      fullHeight
    >
      {/* <div className={classes.tocTitle}>
        {title?.trim()}
      </div>
      {postedAt && <div className={classes.tocPostedAt}>
        <FormatDate date={postedAt} format={"Do MMM YYYY"} />
    </div> */}
    </TableOfContentsRow>
  );
  
  const renderedSections = normalizedSections.filter(row => !row.divider && row.anchor !== "comments");

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

    const tocRow = (
      <TableOfContentsRow
        indentLevel={section.level}
        divider={section.divider}
        href={"#"+section.anchor}
        offset={section.offset}
        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>
    )
  });

  const commentsRow = normalizedSections.slice(-1)?.[0]

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

  return <div className={classNames(classes.root, { [classes.fadeIn]: tocVisible, [classes.fadeOut]: !tocVisible })}>
    {titleRow}
    <div className={classes.belowTitle}>
      <div className={classes.progressBarContainer} ref={readingProgressBarRef}>
        <div className={classes.progressBar} />
        <div className={classes.unfilledProgressBar}/>
      </div>
      <div className={classes.nonTitleRows}>
        {rows}
      </div>
    </div>
    {commentsRow && <CommentsLink anchor="#comments" className={classes.comments}>
      <CommentsIcon className={classes.commentsIcon} />  {commentsRow?.title?.split(" ")[0]}
     
    </CommentsLink>}
  </div>
}

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

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

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

ForumMagnum / ForumMagnum / 10222300055

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