fix menu's accordion not expanding active <ul> + rename 'active' class to 'o_active_toc_entry'

extensions/odoo_theme/static/js/menu.js

@@ -6,10 +6,32 @@
         // Allow to automatically collapse and expand TOC entries
         _prepareAccordion(this.navigationMenu);
 
+        // Allow to respectively highlight and expand the TOC entries and their related TOC
+        // entry list whose page is displayed.
+        _flagActiveTocEntriesAndLists();
+
         // Add a class with the name of the file to each corresponding menu item
         _flagMenuItemsWithFileName();
     });
 
+    /**
+     * Add the relevant classes on the TOC entries (and lists) whose page is displayed.
+     *
+     * TOC entries whose page is displayed (<li> elements) receive the `o_active_toc_entry` class
+     * and their related TOC entry list (<ul> elements) receive the `show` (Bootstrap) class.
+     */
+    const _flagActiveTocEntriesAndLists = () => {
+        this.navigationMenu.querySelectorAll('.current').forEach(element => {
+            if (element.tagName === 'LI') {
+                // Highlight all <li> in the active hierarchy
+                element.classList.add('o_active_toc_entry');
+            } else if (element.tagName === 'UL') {
+                // Expand all related <ul>
+                element.classList.add('show');
+            }
+        })
+    };
+
     /**
      * Add the name of the file as class of the corresponding menu item.
      */

extensions/odoo_theme/static/js/page_toc.js

@@ -12,23 +12,28 @@
                 return;
             }
 
-            // Allow to hide the TOC entry referring the title (<h1> heading)
-            _flagFirstHeadingRef();
-
             // Allow to automatically collapse and expand TOC entries
             _prepareAccordion(this.pageToc);
 
             // Allow to respectively highlight and expand the TOC entries and their related TOC
             // entry list whose section is focused.
             _flagActiveTocEntriesAndLists();
+
+            // Allow to hide the TOC entry referring the title (<h1> heading)
+            _flagFirstHeadingRef();
         }
     });
 
+    /**
+     * Entirely hide the local tree of contents.
+     */
+    const _hidePageToc = () => this.pageToc.style.visibility = 'hidden';
+
     /**
      * Add the relevant classes on the TOC entries (and lists) whose section is focused.
      *
-     * TOC entries whose section is focused (<li> elements) receive the `active` class and their
+     * TOC entries whose section is focused (<li> elements) receive the `o_active_toc_entry` class
-     * related TOC entry list (<ul> elements) receive the `show` class.
+     * and their related TOC entry list (<ul> elements) receive the `show` (Bootstrap) class.
      */
     const _flagActiveTocEntriesAndLists = () => {
 
@@ -78,10 +83,13 @@
             let tocEntry = headingRef.parentElement;
             while (tocEntry !== this.pageToc) {
                 if (tocEntry.tagName === 'LI') {
-                    tocEntry.classList.add('active'); // Highlight all <li> in the active hierarchy
+                    // Highlight all <li> in the active hierarchy
+                    tocEntry.classList.add('o_active_toc_entry');
+
+                    // Expand all related <ul>
                     const relatedTocEntryList = tocEntry.querySelector('ul');
                     if (relatedTocEntryList) {
-                        relatedTocEntryList.classList.add('show'); // Expand all related <ul>
+                        relatedTocEntryList.classList.add('show');
                     }
                 }
                 tocEntry = tocEntry.parentElement;
@@ -110,9 +118,4 @@
      */
     const _flagFirstHeadingRef = () => this.headingRefs[0].classList.add('o_page_toc_title');
 
-    /**
-     * Entirely hide the local tree of contents.
-     */
-    const _hidePageToc = () => this.pageToc.style.visibility = 'hidden';
-
 })();

extensions/odoo_theme/static/js/utils.js

@@ -1,3 +1,4 @@
+let tocEntryListId = 0;  // Used to generate IDs of toc entry lists for both the menu and page TOC
 /**
  * Update the provided TOC to allow collapsing its entries with Bootstrap's accordion.
  *
@@ -31,13 +32,10 @@ const _prepareAccordion = (tocElement) => {
     // Start at the second TOC entry list (<ul>) to avoid collapsing the entire TOC
     const tocRoot = tocElement.querySelector('ul');
     tocRoot.querySelectorAll('ul').forEach(tocEntryList => {
-        const relatedHeadingRef = tocEntryList.previousSibling; // The preceding <a> element
-        const temp = relatedHeadingRef.getAttribute('href').replace('#', '').replaceAll('.', '_dot_').replaceAll('/', '_slash_')
         // Modify the <ul> element
-        // tocEntryList.id = `o_target_${relatedHeadingRef.getAttribute('href').replace('#', '')}` TODO ANV
+        tocEntryList.id = `o_target_${tocEntryListId++}`
-        tocEntryList.id = `o_target_${temp}`
         tocEntryList.classList.add('collapse');
-        // Create and configure an <li> element
+        // Create and configure an <i> element
         const arrowButton = document.createElement('I');
         arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`);
         arrowButton.setAttribute('data-bs-toggle', 'collapse');
@@ -46,7 +44,7 @@ const _prepareAccordion = (tocElement) => {
         const tocEntryWrapper = document.createElement('DIV');
         tocEntryWrapper.classList.add('o_toc_entry_wrapper');
         // Insert the <i> and <a> elements inside the <div> and prepend the <div> to the <ul>
-        tocEntryWrapper.append(arrowButton, relatedHeadingRef);
+        tocEntryWrapper.append(arrowButton, tocEntryList.previousSibling);
         tocEntryList.parentNode.insertBefore(tocEntryWrapper, tocEntryList);
     });
 };