mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
3c433a5315
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
17 lines
631 B
Plaintext
17 lines
631 B
Plaintext
<nav id="mw-panel-toc" class="sidebar-toc" role="navigation" aria-labelledby="sidebar-toc-header">
|
|
<div class="sidebar-toc-header">
|
|
<h2 class="sidebar-toc-title" aria-hidden="true">Contents</h2>
|
|
</div>
|
|
<ul id="table-of-contents">
|
|
{{#array-sections}}
|
|
<li id="toc-{{anchor}}" class="sidebar-toc-list-item sidebar-toc-level-{{toclevel}}">
|
|
<a class="sidebar-toc-link" href="#{{anchor}}">
|
|
<div class="sidebar-toc-text">
|
|
<span class="sidebar-toc-numb">{{number}}</span>{{{line}}}</div>
|
|
</a>
|
|
{{#has-subsections}}<ul>{{/has-subsections}}
|
|
{{#is-last-item}}</li></ul>{{/is-last-item}}
|
|
{{/array-sections}}
|
|
</ul>
|
|
</nav>
|