From 675f7bc8995e9068cbf1a3f3ed31f80a0586a97a Mon Sep 17 00:00:00 2001
From: "Antoine Vandevenne (anv)" <anv@odoo.com>
Date: Fri, 4 Jun 2021 11:37:17 +0200
Subject: [PATCH] [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
---
 extensions/odoo_theme/static/js/menu.js | 28 ++++++++++++++++---------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index 2f4d3aef7..cc56dbd72 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -21,22 +21,30 @@
      * 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
      * the `show` (Bootstrap) class.
-     * Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
-     * TOC entry list receives the `show` class.
+     * Also, the deepest TOC entries of their respective branch receive the
+     * `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the `show` class.
      */
     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 => {
             if (element.tagName === 'UL') {
-                // Expand all related <ul>
-                element.classList.add('show');
+                element.classList.add('show'); // Expand all related <ul>
             } else if (element.tagName === 'LI') {
-                // Highlight all <li> in the active hierarchy
-                element.classList.add('o_active_toc_entry');
-                deepestTocEntry = element;
+                element.classList.add('o_active_toc_entry'); // Highlight all active <li>
+                let match = regexLayer.exec(element.className);
+                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');
             if (childTocEntryList) {
                 childTocEntryList.classList.add('show');
@@ -44,7 +52,7 @@
                 deepestTocEntry = deepestTocEntry.parentElement.parentElement;
             }
             deepestTocEntry.classList.add('o_deepest_active_toc_entry');
-        }
+        });
     };
 
      document.addEventListener('scroll', () => {