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

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

Browse Source
This commit is contained in:
Antoine Vandevenne (anv) 2021-02-19 16:50:46 +01:00
parent 18011a7cbe
commit c4fac8733c
3 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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.
*/

27
extensions/odoo_theme/static/js/page_toc.js
View File

@ -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
* related TOC entry list (<ul> elements) receive the `show` class.
* TOC entries whose section is focused (<li> elements) receive the `o_active_toc_entry` 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';
})();

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

@ -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_${temp}`
tocEntryList.id = `o_target_${tocEntryListId++}`
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);
});
};