[FIX] web_editor: fix history of a drag and drop after a resize

Steps to reproduce:
​- In a snippet in grid mode, resize a column.
- Drag and drop this column in a non-grid dropzone. 
​- Undo.
​=> The column is back in the grid but is still a normal column. The same
happens when doing these steps with a normal column to a grid. 

This happens because the class changes are not observed in these cases.
When fixing the drag and drop history in [1], only the style changes
were observed because the class changes are automatically recorded. But
it is not the case after a resize.

This commit fixes that by also observing the class changes.

[1]: https://github.com/odoo/odoo/commit/1dfb127f70832aa9e9022ac337af343b7dc17729

task-3151207

closes odoo/odoo#117854

X-original-commit: 48b3683c4753f1e385ea1692db9c1a15d32cae30
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-04-07 10:32:54 +02:00
parent 33dd221b45
commit 1ef31c2822
@@ -1205,7 +1205,9 @@ var SnippetEditor = Widget.extend({
// If the column doesn't come from a grid mode snippet.
if (!self.$target[0].classList.contains('o_grid_item')) {
// Converting the column to grid.
self.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
const spans = gridUtils._convertColumnToGrid(rowEl, self.$target[0], self.dragState.columnWidth, self.dragState.columnHeight);
self.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
columnColCount = spans.columnColCount;
columnRowCount = spans.columnRowCount;
@@ -1351,9 +1353,9 @@ var SnippetEditor = Widget.extend({
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
} else if (this.$target[0].classList.contains('o_grid_item') && this.dropped) {
// Case when dropping a grid item in a non-grid dropzone.
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
const gridSizeClasses = this.$target[0].className.match(/(g-col-lg|g-height)-[0-9]+/g);
this.$target[0].classList.remove('o_grid_item', 'o_grid_item_image', 'o_grid_item_image_contain', ...gridSizeClasses);
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
this.$target[0].style.removeProperty('z-index');
this.$target[0].style.removeProperty('grid-area');
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
@@ -1375,7 +1377,9 @@ var SnippetEditor = Widget.extend({
// If the column doesn't come from a snippet in grid mode,
// convert it.
if (!this.$target[0].classList.contains('o_grid_item')) {
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
const spans = gridUtils._convertColumnToGrid(rowEl, this.$target[0], this.dragState.columnWidth, this.dragState.columnHeight);
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
this.dragState.columnColCount = spans.columnColCount;
this.dragState.columnRowCount = spans.columnRowCount;
}
@@ -1397,9 +1401,9 @@ var SnippetEditor = Widget.extend({
if (this.$target[0].classList.contains('o_grid_item')) {
// Case when a grid column is dropped near a non-grid
// dropzone.
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
const gridSizeClasses = this.$target[0].className.match(/(g-col-lg|g-height)-[0-9]+/g);
this.$target[0].classList.remove('o_grid_item', 'o_grid_item_image', 'o_grid_item_image_contain', ...gridSizeClasses);
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
this.$target[0].style.removeProperty('z-index');
this.$target[0].style.removeProperty('grid-area');
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');