From 18011a7cbe24b88c6302f239098d3c94d68744bb Mon Sep 17 00:00:00 2001
From: "Antoine Vandevenne (anv)" <anv@odoo.com>
Date: Fri, 19 Feb 2021 15:52:55 +0100
Subject: [PATCH] wrap <a> and <i> together in accordions

---
 extensions/odoo_theme/static/js/utils.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/extensions/odoo_theme/static/js/utils.js b/extensions/odoo_theme/static/js/utils.js
index a75748fdd..9c1d50bd2 100644
--- a/extensions/odoo_theme/static/js/utils.js
+++ b/extensions/odoo_theme/static/js/utils.js
@@ -1,5 +1,5 @@
 /**
- * Update the page TOC entries and heading references to allow collapsing them.
+ * Update the provided TOC to allow collapsing its entries with Bootstrap's accordion.
  *
  * The typical structure of a TOC menu is a follows:
  * <ul><li>
@@ -18,10 +18,11 @@
  * that need to be modified.
  *
  * For a given <a> and <ul> pair, the final structure must look like this:
- * <a href="#heading_with_children">
+ * <div class="o_toc_entry_wrapper">
  *     <i data-bs-target="#o_target_heading_with_children" data-bs-toggle="collapse"
  *        class="i-chevron-right"/>
- * </a>
+ *     <a href="#heading_with_children"/>
+ * </div>
  * <ul id="o_target_heading_with_children" class="collapse">...</ul>
  *
  * @param {HTMLElement} tocElement - The element containing the TOC
@@ -31,14 +32,21 @@ const _prepareAccordion = (tocElement) => {
     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('#', '')}`
+        // tocEntryList.id = `o_target_${relatedHeadingRef.getAttribute('href').replace('#', '')}` TODO ANV
+        tocEntryList.id = `o_target_${temp}`
         tocEntryList.classList.add('collapse');
-        // Create and configure an <li> element and insert it in the <a> element
+        // Create and configure an <li> element
         const arrowButton = document.createElement('I');
         arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`);
         arrowButton.setAttribute('data-bs-toggle', 'collapse');
         arrowButton.classList.add('i-chevron-right');
-        relatedHeadingRef.insertBefore(arrowButton, relatedHeadingRef.firstChild);
+        // Create a <div> element
+        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);
+        tocEntryList.parentNode.insertBefore(tocEntryWrapper, tocEntryList);
     });
 };
\ No newline at end of file