Commit graph

5 commits

Author SHA1 Message Date
Jon Robson e1f1899dae Add recursive template for toc
Depends-On: I5ceec7f7bdea8b16ba0b300486ec0c4f2202b602
Bug: T299065
Change-Id: I0205596f0f7c0f452e80bd6a1f49e59e8388b4b8
2022-01-28 19:58:57 +00:00
Nicholas Ray 3c433a5315 Add sectionObserver and tableOfContents component JS to respond to intersection changes
This commits sets up the Table of Contents to bold the active section
when the section is scrolled.

Unfortunately, because our content does not have actual sections but
instead has a flat list of headings and paragraphs, we can't use
IntersectionObserver in the conventional way as it is optimized to find
intersections of elements that are *within* the viewport and the
callback will not reliably fire during certain scenarios (e.g. with fast
scrolling or when the headings are not currently within the viewport).
Furthermore, iterating through a list of elements and calling
`getBoundingClientRect()` can be expensive and can also cause
significant forced synchronous layouts that block the main thread.

The best compromise in terms of performance and function that I've found
is to use a combination of a throttled scroll event listener and
IntersectionObserver's ability to asyncronously find the
boundingClientRect of all elements off the main thread when `.observe`
is called which is the approach this patch takes. Although this is an
unorthodox way to use IntersectionObserver, performance profiles
recorded while holding the "down" arrow and scrolling for 10 seconds
with a 6x CPU throttle are comparable between master and this patch:

master: https://phabricator.wikimedia.org/F34930737
this patch:  https://phabricator.wikimedia.org/F34930738

Bug: T297614
Change-Id: I4077d86a1786cc1f4a7d85b20b7cf402960940e7
2022-01-26 14:11:43 -07:00
bwang 3abd70392b Avoid escaping TOC section titles
Change-Id: I81f92627642c20d0770b2bc3223e056fc646365a
2022-01-20 12:31:11 -06:00
bwang 8a957c0163 Use 'toc' skin option and render with new TableOfContents mustache template
Bug: T297611
Change-Id: I8332f7b9c9574d8dece4f7111b299b95533cf386
2022-01-19 14:38:51 -06:00
Clare Ming 72fecd41f2 Add feature flag for sticky table of contents
- Add TOC feature requirement.
- Update data for SkinVector.
- Add TOC template.

Bug: T297610
Change-Id: I90bc5e21ba187ac9dd74d5e97763834795a0545b
2021-12-14 16:26:58 -07:00