[FIX] website: prevent submenus overflow in edit mode

Since [this first commit], the elements that make up the submenu of the
navbar of a website can no longer overflow the page. Depending on
whether the content is too long, the elements are aligned to the left or
to the right. Unfortunately, since [the merge of the frontend into the
backend], the dynamic alignment no longer works in edit mode. This commit
restores the dynamic alignment of the submenu items so that they no
longer overflow the page in edit mode.

Steps to reproduce the bug:
- Have a submenu with a long element in it
- In edit mode align the navbar elements to the right

=> When opening the submenu in edit mode, the long element goes over the
page instead of being aligned with the right side of the menu.

Technical explanation:
In edit mode, the dropdown opening in the navbar is done by
`WebsiteWysiwyg` which is instantiated in the backend while the function
that allows to align the submenu elements correctly is declared in
`menuDirection` in the iframe. So the dropdown must be opened with the
Bootsrap instance of the iframe in order for the iframe to detect that
the dropdown has been opened.

[the merge of the frontend into the backend]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[this first commit]: https://github.com/odoo/odoo/commit/392c91cda3133b921e9aca9a7b1c511231027438

task-2904507

closes odoo/odoo#115607

X-original-commit: 11f817e8d0b0764427f0db7d62fb0cdd403e3012
Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-03-17 19:22:25 +01:00
parent 8689241f86
commit dc842ecfca
@@ -18,7 +18,9 @@ let socialMediaOptions = require('@website/snippets/s_social_media/options')[Sym
*/
function toggleDropdown($toggles, show) {
return Promise.all(_.map($toggles, toggle => {
const $toggle = $(toggle);
// We must select the element via the iframe so that the event handlers
// declared on the iframe are triggered.
const $toggle = toggle.ownerDocument.defaultView.$(toggle);
const shown = toggle.classList.contains('show');
if (shown === show) {
return;