NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] odoo_theme: highlight all occurrences of a same entry in the menu

Browse Source 
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:
Antoine Vandevenne (anv) 2021-06-04 11:37:17 +02:00 committed by Antoine Vandevenne (anv)
parent 7efbf490f6
commit 675f7bc899
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
extensions/odoo_theme/static/js/menu.js
View File

@ -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', () => {