[FIX] web_editor: fix dropzones with open mega menu

When we start dragging an element with an open mega menu, the dropzones
should only appear:
- inside the mega menu: we therefore should not be able to drop a mega
menu element outside of it.
- after the clone of the element, so we can still drop it where we
started the drag (if it does not come from the mega menu).

This is well the case for normal dropzones but the grid dropzones case
was forgotten. Some "clone dropzones" are also not added for inner
contents that are in a grid mode snippet.

Steps to reproduce:
1)
- Add a mega menu with the menu editor.
- In edit mode, drop the "Text-Image" snippet and toggle the grid mode.
- Open the mega menu and start dragging one of its columns (note that it
toggles the grid mode).
=> A grid dropzone appeared in the "Text-Image" snippet, outside the
mega menu.

2)
- Drop an "Alert" snippet in "Text-Image".
- Open the mega menu.
- Start dragging the "Alert" snippet.
=> No dropzone appeared where we started the drag (so after the clone).

This commit fixes these issues. The first issue is solved by properly
filtering the `selectorGrids` when a modal or a dropdown (so the mega
menu) is open. They were already filtered for the modal case (see commit
[1] which was then refactored in [2]) but it should have been done in
`_activateInsertionZones` at the already dedicated place, instead of
before the call to this function in `_onDragAndDropStart`. This made the
siblings and children selectors filtering redundant and this code was
therefore removed.

The second issue was happening because the "clone dropzone" was only
added if there was no "closest" grid, instead of only checking the
parent. This therefore prevented it for inner contents inside grid items
instead of only for grid items. This commit fixes that. For the case
where we are dragging a grid item (still with an open mega menu), a grid
dropzone is added.

[1]: https://github.com/odoo/odoo/commit/cc406afcea7bf5846233a9f97a4a8ac5f618f3ec
[2]: https://github.com/odoo/odoo/commit/34b534f75dbf3e4c475ca8cc40c8fafde5dbea5d

task-3594979

closes odoo/odoo#146714

X-original-commit: 8eebef20de144fe223feace39546d827a0952b23
Signed-off-by: Robin Lejeune (role) <role@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-12-20 15:21:33 +00:00
parent f032256c4f
commit 497e953d67
@@ -1088,7 +1088,6 @@ var SnippetEditor = Widget.extend({
this.trigger_up('deactivate_snippet', {$snippet: self.$target});
}
const openModalEl = this.$target[0].closest('.modal');
const toInsertInline = window.getComputedStyle(this.$target[0]).display.includes('inline');
this.dropped = false;
@@ -1136,17 +1135,6 @@ var SnippetEditor = Widget.extend({
}
}
// Remove the siblings/children outside the open popup.
if (openModalEl) {
const filterFunc = (i, el) => el.closest('.modal') === openModalEl;
if ($selectorSiblings) {
$selectorSiblings = $selectorSiblings.filter(filterFunc);
}
if ($selectorChildren) {
$selectorChildren = $selectorChildren.filter(filterFunc);
}
}
const canBeSanitizedUnless = this._canBeSanitizedUnless(this.$target[0]);
// Remove the siblings/children that would add a dropzone as direct
@@ -2335,6 +2323,7 @@ var SnippetsMenu = Widget.extend({
if ($open.length) {
$selectorSiblings = $open.find($selectorSiblings);
$selectorChildren = $open.find($selectorChildren);
selectorGrids = new Set([...selectorGrids].filter(rowEl => $open[0].contains(rowEl)));
}
// Check if the drop zone should be horizontal or vertical
@@ -2385,7 +2374,7 @@ var SnippetsMenu = Widget.extend({
// Firstly, add a dropzone after the clone (if we are not in grid mode).
var $clone = this.$body.find('.oe_drop_clone');
if ($clone.length && $clone.closest('div.o_grid_mode').length === 0) {
if ($clone.length && !$clone[0].parentElement.classList.contains("o_grid_mode")) {
var $neighbor = $clone.prev();
if (!$neighbor.length) {
$neighbor = $clone.next();
@@ -2401,6 +2390,11 @@ var SnippetsMenu = Widget.extend({
}
self._insertDropzone($('<we-hook/>').insertAfter($clone), data.vertical, data.style, canBeSanitizedUnless);
}
// If a modal or a dropdown is open, add the grid of the clone in the
// grid selectors to still be able to drop where the drag started.
if ($clone.length && $open.length && $clone[0].parentElement.classList.contains("o_grid_mode")) {
selectorGrids.add($clone[0].parentElement);
}
if ($selectorChildren) {
$selectorChildren.each(function () {