10326049885

Committed 09 Aug 2024 09:37PM UTC coverage: 32.042% (+0.02%) from 32.024%

Build # 10326049885

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

answer count rewiring

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40208 branches covered (12.28%)

Branch coverage included in aggregate %.

46 of 103 new or added lines in 20 files covered. (44.66%)

6 existing lines in 4 files now uncovered.

28800 of 65081 relevant lines covered (44.25%)

180.33 hits per line

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

6.78

/packages/lesswrong/components/posts/usePostReadProgress.ts

import { useEffect, useRef } from "react";
import { getClamper } from "../../lib/utils/mathUtils";

interface UsePostReadProgressProps {
  /**
   * Accepts a ref for a progress bar and a "progress" percentage.
   * Should update the ref's styling (or whatever) to correspond to the progress %.
   */
  updateProgressBar: (element: HTMLDivElement, progressPercentage: number) => void;

  /**
   * Allow disabling the progress bar, e.g. because LW displays it in a different context than other forums
   */
  disabled?: boolean;

  /**
   * Number of pixels from the top of the post body by which to delay "starting" the progress bar.
   * Primary use case is for the ToC progress bar, where we want it to line up with the ToC landmarks
   * In that case, we need to delay it by 80% of window.innerHeight, since each section's "landmark" position is 20% of window.innerHeight from the top of the viewport,
   * rather than all the way at the bottom (100%).
   */
  delayStartOffset?: number;

  /**
   * Sets the height of the "sliding window" on the progress bar, which should represent the section of the post the user's viewport currently displays
   */
  setScrollWindowHeight?: (element: HTMLDivElement, height: number) => void;

  /**
   * Progress bars in the full-height ToC which display a sliding window need to include the height of the initial viewport when calculating the scroll percentage
   */
  useFirstViewportHeight?: boolean;
}

const clampPct = getClamper(0, 1);

export const usePostReadProgress = ({ updateProgressBar, disabled = false, delayStartOffset = 0, setScrollWindowHeight, useFirstViewportHeight = false }: UsePostReadProgressProps) => {
  const readingProgressBarRef = useRef<HTMLDivElement|null>(null);

  const getScrollPct = (postBodyElement: HTMLElement, delayStartOffset: number, clamp = true) => {
    // position of post body bottom relative to the bottom of the viewport
    const postBodyBottomPos = postBodyElement.getBoundingClientRect().bottom - window.innerHeight;
    // total distance from top of page to post body bottom
    const totalHeight = useFirstViewportHeight ? postBodyElement.getBoundingClientRect().height : window.scrollY + postBodyBottomPos;
  
    const scrollPercent = 1 - ((postBodyBottomPos + delayStartOffset) / totalHeight);
    const adjustedScrollPercent = clamp ? clampPct(scrollPercent) : scrollPercent;
    return adjustedScrollPercent * 100;
  }
  
  const getScrollWindowHeight = (postBodyElement: HTMLElement, readingProgressBarContainerElement: HTMLElement) => {
    const postBodyHeight = postBodyElement.getBoundingClientRect().height;
    const windowHeight = window.innerHeight;
    
    /**
     * What percent of the post body's height is revealed within the window viewport.
     * We want to show "scroll window" that's proportionally large, relative to the height of the entire progress bar container.
     */
    const windowBodyPercent = clampPct(windowHeight / postBodyHeight) * 100;
    const containerHeight = readingProgressBarContainerElement.getBoundingClientRect().height;
    const absoluteScrollWindowHeight = (windowBodyPercent / 100) * containerHeight;
    const currentScrollPct = getScrollPct(postBodyElement, delayStartOffset);
    
    const displayedScrollWindowPercent = clampPct(currentScrollPct / windowBodyPercent);
    const displayedWindowScrollHeight = absoluteScrollWindowHeight * displayedScrollWindowPercent;
    return { displayedWindowScrollHeight };
  }

  const updateReadingProgressBar = (postBodyElement: HTMLElement | null) => {
    if (!postBodyElement || !readingProgressBarRef.current) return;

    const scrollPercent = getScrollPct(postBodyElement, delayStartOffset);

    updateProgressBar(readingProgressBarRef.current, scrollPercent);
  };

  const updateWindowHeight = (postBodyElement: HTMLElement | null) => {
    if (!postBodyElement || !readingProgressBarRef.current || !setScrollWindowHeight) return;

    const { displayedWindowScrollHeight } = getScrollWindowHeight(postBodyElement, readingProgressBarRef.current);

    setScrollWindowHeight(readingProgressBarRef.current, displayedWindowScrollHeight);
  };

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (disabled) return;

    const updateFunc = () => {
      updateReadingProgressBar(postBodyRef);
      updateWindowHeight(postBodyRef);
    }
    updateFunc();
    window.addEventListener('scroll', updateFunc);

    return () => {
      window.removeEventListener('scroll', updateFunc);
    };
  }, [disabled]); // eslint-disable-line react-hooks/exhaustive-deps
  
  return { readingProgressBarRef };
};

1	import { useEffect, useRef } from "react";	54✔
2	import { getClamper } from "../../lib/utils/mathUtils";	18✔
3
4	interface UsePostReadProgressProps {
5	/**
6	* Accepts a ref for a progress bar and a "progress" percentage.
7	* Should update the ref's styling (or whatever) to correspond to the progress %.
8	*/
9	updateProgressBar: (element: HTMLDivElement, progressPercentage: number) => void;
10
11	/**
12	* Allow disabling the progress bar, e.g. because LW displays it in a different context than other forums
13	*/
14	disabled?: boolean;
15
16	/**
17	* Number of pixels from the top of the post body by which to delay "starting" the progress bar.
18	* Primary use case is for the ToC progress bar, where we want it to line up with the ToC landmarks
19	* In that case, we need to delay it by 80% of window.innerHeight, since each section's "landmark" position is 20% of window.innerHeight from the top of the viewport,
20	* rather than all the way at the bottom (100%).
21	*/
22	delayStartOffset?: number;
23
24	/**
25	* Sets the height of the "sliding window" on the progress bar, which should represent the section of the post the user's viewport currently displays
26	*/
27	setScrollWindowHeight?: (element: HTMLDivElement, height: number) => void;
28
29	/**
30	* Progress bars in the full-height ToC which display a sliding window need to include the height of the initial viewport when calculating the scroll percentage
31	*/
32	useFirstViewportHeight?: boolean;
33	}
34
35	const clampPct = getClamper(0, 1);	18✔
36
37	export const usePostReadProgress = ({ updateProgressBar, disabled = false, delayStartOffset = 0, setScrollWindowHeight, useFirstViewportHeight = false }: UsePostReadProgressProps) => {	18!
38	const readingProgressBarRef = useRef<HTMLDivElement\|null>(null);	×
39
40	const getScrollPct = (postBodyElement: HTMLElement, delayStartOffset: number, clamp = true) => {	×
41	// position of post body bottom relative to the bottom of the viewport
42	const postBodyBottomPos = postBodyElement.getBoundingClientRect().bottom - window.innerHeight;	×
43	// total distance from top of page to post body bottom
44	const totalHeight = useFirstViewportHeight ? postBodyElement.getBoundingClientRect().height : window.scrollY + postBodyBottomPos;	×
45
46	const scrollPercent = 1 - ((postBodyBottomPos + delayStartOffset) / totalHeight);	×
47	const adjustedScrollPercent = clamp ? clampPct(scrollPercent) : scrollPercent;	×
48	return adjustedScrollPercent * 100;	×
49	}
50
51	const getScrollWindowHeight = (postBodyElement: HTMLElement, readingProgressBarContainerElement: HTMLElement) => {	×
52	const postBodyHeight = postBodyElement.getBoundingClientRect().height;	×
53	const windowHeight = window.innerHeight;	×
54
55	/**
56	* What percent of the post body's height is revealed within the window viewport.
57	* We want to show "scroll window" that's proportionally large, relative to the height of the entire progress bar container.
58	*/
59	const windowBodyPercent = clampPct(windowHeight / postBodyHeight) * 100;	×
60	const containerHeight = readingProgressBarContainerElement.getBoundingClientRect().height;	×
61	const absoluteScrollWindowHeight = (windowBodyPercent / 100) * containerHeight;	×
62	const currentScrollPct = getScrollPct(postBodyElement, delayStartOffset);	×
63
64	const displayedScrollWindowPercent = clampPct(currentScrollPct / windowBodyPercent);	×
65	const displayedWindowScrollHeight = absoluteScrollWindowHeight * displayedScrollWindowPercent;	×
UNCOV 66	return { displayedWindowScrollHeight };	×
67	}
68
69	const updateReadingProgressBar = (postBodyElement: HTMLElement \| null) => {	×
70	if (!postBodyElement \|\| !readingProgressBarRef.current) return;	×
71
72	const scrollPercent = getScrollPct(postBodyElement, delayStartOffset);	×
73
74	updateProgressBar(readingProgressBarRef.current, scrollPercent);	×
75	};
76
77	const updateWindowHeight = (postBodyElement: HTMLElement \| null) => {	×
78	if (!postBodyElement \|\| !readingProgressBarRef.current \|\| !setScrollWindowHeight) return;	×
79
80	const { displayedWindowScrollHeight } = getScrollWindowHeight(postBodyElement, readingProgressBarRef.current);	×
81
82	setScrollWindowHeight(readingProgressBarRef.current, displayedWindowScrollHeight);	×
83	};
84
85	useEffect(() => {	×
86	const postBodyRef = document.getElementById('postBody');	×
87	if (disabled) return;	×
88
89	const updateFunc = () => {	×
90	updateReadingProgressBar(postBodyRef);	×
91	updateWindowHeight(postBodyRef);	×
92	}
93	updateFunc();	×
94	window.addEventListener('scroll', updateFunc);	×
95
96	return () => {	×
97	window.removeEventListener('scroll', updateFunc);	×
98	};
99	}, [disabled]); // eslint-disable-line react-hooks/exhaustive-deps
100
101	return { readingProgressBarRef };	×
102	};

ForumMagnum / ForumMagnum / 10326049885

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