|
3 | 3 |
|
4 | 4 | // Customize the page TOC |
5 | 5 | document.addEventListener('DOMContentLoaded', () => { |
6 | | - this.pageToc = document.getElementById('o_page_toc'); // The tree of content of the page |
7 | | - if (this.pageToc) { // The local toctree is not included for toctree pages (see layout.html) |
8 | | - this.headingRefs = this.pageToc.querySelectorAll('a'); // The references to all headings |
| 6 | + // Loop on all tree of content of the page. There may be from 0 to 2 depending on the page. |
| 7 | + document.querySelectorAll('.o_page_toc').forEach(pageToc => { |
| 8 | + const headingRefs = pageToc.querySelectorAll('a'); // The references to all headings. |
9 | 9 |
|
10 | | - // If the page TOC has less than 2 headings, in addition to the title, hide it entirely |
11 | | - if (this.headingRefs.length <= 2) { |
12 | | - _hidePageToc(); |
| 10 | + // If the page TOC has less than 2 headings, in addition to the title, hide it entirely. |
| 11 | + if (headingRefs.length <= 2) { |
| 12 | + _hidePageToc(pageToc); |
13 | 13 | return; |
14 | 14 | } |
15 | 15 |
|
16 | 16 | // Allow to automatically collapse and expand TOC entries |
17 | | - _prepareAccordion(this.pageToc); |
| 17 | + _prepareAccordion(pageToc); |
18 | 18 |
|
19 | 19 | // Allow to respectively highlight and expand the TOC entries and their related TOC |
20 | 20 | // entry list whose section is focused. |
21 | | - _flagActiveTocEntriesAndLists(); |
| 21 | + _flagActiveTocEntriesAndLists(pageToc, headingRefs); |
22 | 22 |
|
23 | 23 | // Allow to hide the TOC entry referring the title (<h1> heading) |
24 | | - _flagFirstHeadingRef(); |
| 24 | + _flagFirstHeadingRef(headingRefs); |
25 | 25 |
|
26 | 26 | // Show hidden menu when the css classes have been properly specified |
27 | | - this.pageToc.removeAttribute('hidden'); |
28 | | - } |
| 27 | + pageToc.removeAttribute('hidden'); |
| 28 | + }); |
29 | 29 | }); |
30 | 30 |
|
31 | 31 | /** |
32 | 32 | * Entirely hide the local tree of contents. |
| 33 | + * |
| 34 | + * @param {HTMLElement} pageToc - The tree of content of the page. |
33 | 35 | */ |
34 | | - const _hidePageToc = () => this.pageToc.style.display = 'none'; |
| 36 | + const _hidePageToc = pageToc => pageToc.style.display = 'none'; |
35 | 37 |
|
36 | 38 | /** |
37 | 39 | * Add the relevant classes on the TOC entries (and lists) whose section is focused. |
38 | 40 | * |
39 | 41 | * TOC entries whose section is focused (<li> elements) receive the `o_active_toc_entry` class |
40 | 42 | * and their related TOC entry list (<ul> elements) receive the `show` (Bootstrap) class. |
| 43 | + * |
| 44 | + * @param {HTMLElement} pageToc - The tree of content of the page. |
| 45 | + * @param {NodeList} headingRefs - The references to all headings. |
41 | 46 | */ |
42 | | - const _flagActiveTocEntriesAndLists = () => { |
| 47 | + const _flagActiveTocEntriesAndLists = (pageToc, headingRefs) => { |
43 | 48 |
|
44 | 49 | const _updateFlags = () => { |
45 | 50 | const activeHeadingRef = clickedHeadingRef || _findActiveHeadingRef(); |
|
56 | 61 | }; |
57 | 62 |
|
58 | 63 | const _findActiveHeadingRef = () => { |
59 | | - let activeHeadingRef = this.headingRefs[0]; |
60 | | - this.headingRefs.forEach(headingRef => { |
| 64 | + let activeHeadingRef = headingRefs[0]; |
| 65 | + headingRefs.forEach(headingRef => { |
61 | 66 | const href = headingRef.getAttribute('href'); |
62 | 67 | if (href !== '#') { |
63 | 68 | const sectionId = href.replace('#', ''); |
|
78 | 83 | }; |
79 | 84 |
|
80 | 85 | const _unflagAll = () => { |
81 | | - this.pageToc.querySelectorAll('li,ul').forEach(element => { |
| 86 | + pageToc.querySelectorAll('li,ul').forEach(element => { |
82 | 87 | element.classList.remove('o_active_toc_entry', 'show'); |
83 | 88 | }); |
84 | | - this.pageToc.querySelectorAll('i').forEach(element => { |
| 89 | + pageToc.querySelectorAll('i').forEach(element => { |
85 | 90 | element.setAttribute('aria-expanded', false); |
86 | 91 | }); |
87 | 92 | }; |
88 | 93 |
|
89 | 94 | const _flagActiveHierarchy = (headingRef) => { |
90 | 95 | let tocEntry = headingRef.parentElement; |
91 | | - while (tocEntry !== this.pageToc) { |
| 96 | + while (tocEntry !== pageToc) { |
92 | 97 | if (tocEntry.tagName === 'LI') { |
93 | 98 | // Highlight all <li> in the active hierarchy |
94 | 99 | tocEntry.classList.add('o_active_toc_entry'); |
|
104 | 109 | }; |
105 | 110 |
|
106 | 111 | let clickedHeadingRef = undefined; |
107 | | - this.pageToc.addEventListener('click', ev => { |
| 112 | + pageToc.addEventListener('click', ev => { |
108 | 113 | clickedHeadingRef = ev.target.closest('a[href^="#"]'); // Highlight the clicked ref |
109 | 114 | }); |
110 | 115 | let timeoutId = undefined; |
|
122 | 127 |
|
123 | 128 | /** |
124 | 129 | * Add the class `o_page_toc_title` on the first heading reference. |
| 130 | + * |
| 131 | + * @param {NodeList} headingRefs - The references to all headings. |
125 | 132 | */ |
126 | | - const _flagFirstHeadingRef = () => { |
127 | | - this.headingRefs[0].parentNode.classList.add('o_page_toc_title'); |
| 133 | + const _flagFirstHeadingRef = headingRefs => { |
| 134 | + headingRefs[0].parentNode.classList.add('o_page_toc_title'); |
128 | 135 | } |
129 | 136 |
|
130 | 137 | })(); |
0 commit comments