[FIX] odoo_theme: highlight all occurrences of a same entry in the menu
When a page is referenced multiple times in the global toctree, only its latest TOC entry was highlighted (and expanded if it's a TOC page). This commit allows a page to be referenced multiple times at any level of the global TOC while correctly highlighting all of its TOC entries. task-2551473
This commit is contained in:
parent
7efbf490f6
commit
675f7bc899
@ -21,22 +21,30 @@
|
|||||||
* TOC entries (<li> elements) that are on the path of the displayed page receive the
|
* TOC entries (<li> elements) that are on the path of the displayed page receive the
|
||||||
* `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
|
* `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
|
||||||
* the `show` (Bootstrap) class.
|
* the `show` (Bootstrap) class.
|
||||||
* Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
|
* Also, the deepest TOC entries of their respective branch receive the
|
||||||
* TOC entry list receives the `show` class.
|
* `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the `show` class.
|
||||||
*/
|
*/
|
||||||
const _flagActiveTocEntriesAndLists = () => {
|
const _flagActiveTocEntriesAndLists = () => {
|
||||||
let deepestTocEntry = undefined;
|
const regexLayer = /\btoctree-l(?<layer>\d+)\b/;
|
||||||
|
let lastLayer = undefined;
|
||||||
|
let lastTocEntry = undefined;
|
||||||
|
const deepestTocEntries = [];
|
||||||
this.navigationMenu.querySelectorAll('.current').forEach(element => {
|
this.navigationMenu.querySelectorAll('.current').forEach(element => {
|
||||||
if (element.tagName === 'UL') {
|
if (element.tagName === 'UL') {
|
||||||
// Expand all related <ul>
|
element.classList.add('show'); // Expand all related <ul>
|
||||||
element.classList.add('show');
|
|
||||||
} else if (element.tagName === 'LI') {
|
} else if (element.tagName === 'LI') {
|
||||||
// Highlight all <li> in the active hierarchy
|
element.classList.add('o_active_toc_entry'); // Highlight all active <li>
|
||||||
element.classList.add('o_active_toc_entry');
|
let match = regexLayer.exec(element.className);
|
||||||
deepestTocEntry = element;
|
let currentLayer = parseInt(match.groups.layer, 10);
|
||||||
|
if (lastLayer && currentLayer <= lastLayer) { // We just moved to another branch
|
||||||
|
deepestTocEntries.push(lastTocEntry);
|
||||||
|
}
|
||||||
|
lastLayer = currentLayer;
|
||||||
|
lastTocEntry = element;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (deepestTocEntry) {
|
deepestTocEntries.push(lastTocEntry); // The last TOC entry is the deepest of its branch
|
||||||
|
deepestTocEntries.forEach(deepestTocEntry => {
|
||||||
const childTocEntryList = deepestTocEntry.querySelector('ul');
|
const childTocEntryList = deepestTocEntry.querySelector('ul');
|
||||||
if (childTocEntryList) {
|
if (childTocEntryList) {
|
||||||
childTocEntryList.classList.add('show');
|
childTocEntryList.classList.add('show');
|
||||||
@ -44,7 +52,7 @@
|
|||||||
deepestTocEntry = deepestTocEntry.parentElement.parentElement;
|
deepestTocEntry = deepestTocEntry.parentElement.parentElement;
|
||||||
}
|
}
|
||||||
deepestTocEntry.classList.add('o_deepest_active_toc_entry');
|
deepestTocEntry.classList.add('o_deepest_active_toc_entry');
|
||||||
}
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('scroll', () => {
|
document.addEventListener('scroll', () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user