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

wrap <a> and <i> together in accordions

Browse Source
This commit is contained in:
Antoine Vandevenne (anv) 2021-02-19 15:52:55 +01:00
parent 673777a48c
commit 18011a7cbe
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
extensions/odoo_theme/static/js/utils.js
View File

@ -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: * The typical structure of a TOC menu is a follows:
* <ul><li> * <ul><li>
@ -18,10 +18,11 @@
* that need to be modified. * that need to be modified.
* *
* For a given <a> and <ul> pair, the final structure must look like this: * 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" * <i data-bs-target="#o_target_heading_with_children" data-bs-toggle="collapse"
* class="i-chevron-right"/> * class="i-chevron-right"/>
* </a> * <a href="#heading_with_children"/>
* </div>
* <ul id="o_target_heading_with_children" class="collapse">...</ul> * <ul id="o_target_heading_with_children" class="collapse">...</ul>
* *
* @param {HTMLElement} tocElement - The element containing the TOC * @param {HTMLElement} tocElement - The element containing the TOC
@ -31,14 +32,21 @@ const _prepareAccordion = (tocElement) => {
const tocRoot = tocElement.querySelector('ul'); const tocRoot = tocElement.querySelector('ul');
tocRoot.querySelectorAll('ul').forEach(tocEntryList => { tocRoot.querySelectorAll('ul').forEach(tocEntryList => {
const relatedHeadingRef = tocEntryList.previousSibling; // The preceding <a> element const relatedHeadingRef = tocEntryList.previousSibling; // The preceding <a> element
const temp = relatedHeadingRef.getAttribute('href').replace('#', '').replaceAll('.', '_dot_').replaceAll('/', '_slash_')
// Modify the <ul> element // 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'); 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'); const arrowButton = document.createElement('I');
arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`); arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`);
arrowButton.setAttribute('data-bs-toggle', 'collapse'); arrowButton.setAttribute('data-bs-toggle', 'collapse');
arrowButton.classList.add('i-chevron-right'); 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);
}); });
}; };