Description
One of our main open questions when testing the table of contents was: should the sub-sections of the ToC be expanded or collapsed by default? After asking community and staff members, and further considering it ourselves, we've realized that it should depend on the article (more specifically, the height of the fully expanded table of contents). For some articles where the fully expanded table of contents is able to fit within one screen length it seems useful to show it fully expanded. For other articles, with taller ToCs that are not able to fit within one screen length when fully expanded, it seems more useful to have all of the sub-sections collapsed.
We therefore would like to have a rule that dynamically expands/collapses the sub-sections of the table of contents based on whether or not the whole thing can fit on a screen in its fully expanded state. For example:
| short (expanded) | medium (expanded) | long (collapsed) |
|---|---|---|
 |  |  |
Expand/collapse logic
@Jdlrobson suggested using the number of headings in the article to determine the height of the fully expanded ToC. Based on font-size and line-height we can do some rough math to figure how many headings can fit into a standard screen height (~780px). Some headings will wrap onto more than one line so this isn't going to be perfect. We might also change the font-size and/or line-height in the future. So it is important that we're able to tweak the number in our logic here so we can fine-tune this until we get it right.
As a starting point we can say: if there are 19 headings or fewer on the page expand all the sub-sections, otherwise collapse all the sub-sections.
Developer notes
Pending merge of work from T299361, the default state of the TOC can be determined by passing in a config variable (to set the minimum number of sections for TOC to be expanded/collapsed) and comparing it to the total number of sections. See POC patch.
QA
Login to beta and enable vector-2022 skin
When article has < 20 sections
- Visit an article with < 20 sections. E.g.: https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1
- Assert that any section in the TOC that has subsections appears expanded
When article has >= 20 sections
- Visit an article with >= 20 sections. E.g.: https://en.wikipedia.beta.wmflabs.org/wiki/Cat?tableofcontents=1
- Assert that any section in the TOC that has subsections appears contracted
https://phabricator.wikimedia.org/T300973#7740516
QA Results - Beta|Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T300973#7740516 |
| 2 | ✅ | T300973#7740516 |
