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

[IMP] odoo_theme: expand top level menu items on the homepage

Browse Source 
When the user browses the homepage, it might be hard to figure out
where they want to go next. Expanding the top-level menu items could
help them with that.

task-3106339

X-original-commit: 5526f1ea07
Part-of: odoo/documentation#3239
This commit is contained in:
Antoine Vandevenne (anv) 2022-12-21 12:26:17 +00:00
parent a88ce0cb9e
commit 520cd5fb9e
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,10 +7,13 @@
// Allow to automatically collapse and expand TOC entries // Allow to automatically collapse and expand TOC entries
_prepareAccordion(navigationMenu); _prepareAccordion(navigationMenu);
// Allow to respectively highlight and expand the TOC entries and their related TOC // Allow to respectively highlight and expand the TOC entries and their related TOC entry
// entry list whose page is displayed. // list whose page is displayed.
_flagActiveTocEntriesAndLists(navigationMenu); _flagActiveTocEntriesAndLists(navigationMenu);
// Expand the top-level menu items on the homepage.
_expandTopMenus(navigationMenu);
// Show hidden menu when the css classes have been properly specified // Show hidden menu when the css classes have been properly specified
navigationMenu.removeAttribute('hidden'); navigationMenu.removeAttribute('hidden');
}); });
@ -20,9 +23,9 @@
* *
* TOC entries (<li> elements) that are on the path of the displayed page receive the * 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 * `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
* the `show` (Bootstrap) class. * the `show` (Bootstrap) class. Also, the deepest TOC entries of their respective branch
* Also, the deepest TOC entries of their respective branch receive the * receive the `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the
* `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the `show` class. * `show` class.
* *
* @param {HTMLElement} navigationMenu - The navigation menu. * @param {HTMLElement} navigationMenu - The navigation menu.
*/ */
@ -44,7 +47,7 @@
lastLayer = currentLayer; lastLayer = currentLayer;
lastTocEntry = element; lastTocEntry = element;
} }
}) });
if (lastTocEntry) { if (lastTocEntry) {
deepestTocEntries.push(lastTocEntry); // The last TOC entry is the deepest of its branch deepestTocEntries.push(lastTocEntry); // The last TOC entry is the deepest of its branch
} }
@ -59,6 +62,19 @@
}); });
}; };
/**
* Add the `show` class on top-level menus if the user is browsing the homepage.
*
* @param {HTMLElement} navigationMenu - The navigation menu.
*/
const _expandTopMenus = navigationMenu => {
navigationMenu.querySelectorAll('.toctree-l1').forEach(element => {
if (!element.parentElement.classList.contains('current')) { // For the homepage only.
element.querySelector('ul').classList.add('show'); // Expand the top-level menus.
}
});
};
document.addEventListener('scroll', () => { document.addEventListener('scroll', () => {
// Allow to hide the searchbar when the page is scrolled in mobile. // Allow to hide the searchbar when the page is scrolled in mobile.
_flagHeaderWithScrollPosition(); _flagHeaderWithScrollPosition();