From 067fce44ef19a9d32d533cc4a0165d48f6fbfeb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Thu, 29 Sep 2022 07:58:08 +0000
Subject: [PATCH] [IMP] web_editor: remove footer scroll effect during drag and
 drop

When the footer has the "Slide Hover" and the "Shadow" scroll effects,
and if it is in grid mode, the grid dropzone flickers a lot when we
drag a column over it. This happens because the scrolls caused by the
dragging, the growth of the grid and the scroll effect all happens at
the same time.

This commit removes temporarily the scroll effect of the footer during
the drag and drop to avoid this situation. It also has the advantage of
displaying the footer entirely, making it easier to see where we are
placing the elements.

task-2973198

X-original-commit: bbde919634aeaffcf421283445e25181a522f287
Part-of: odoo/odoo#102525
---
 .../static/src/js/editor/snippets.editor.js   | 17 +++++++++++++-
 .../static/src/js/editor/snippets.editor.js   | 23 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index bf1b1c25e8a..dae34100096 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -950,6 +950,16 @@ var SnippetEditor = Widget.extend({
         }
         previousDropzoneEl.classList.remove('invisible');
     },
+    /**
+     * Changes some behaviors before the drag and drop.
+     *
+     * @private
+     * @returns {Function} a function that restores what was changed when the
+     *  drag and drop is over.
+     */
+    _prepareDrag() {
+        return () => {};
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -975,8 +985,11 @@ var SnippetEditor = Widget.extend({
         this.trigger_up('drag_and_drop_start');
         this.options.wysiwyg.odooEditor.automaticStepUnactive();
         var self = this;
+        this.dragState = {};
         const rowEl = this.$target[0].parentNode;
 
+        this.dragState.restore = this._prepareDrag();
+
         // Allow the grid mode if the option is present in the right panel or
         // if the grid mode is already activated.
         let hasGridLayoutOption = false;
@@ -990,7 +1003,6 @@ var SnippetEditor = Widget.extend({
         // Number of grid columns and rows in the grid item (BS column).
         let columnColCount;
         let columnRowCount;
-        this.dragState = {};
         if (rowEl.classList.contains('row') && this.options.isWebsite) {
             if (allowGridMode) {
                 // Toggle grid mode if it is not already on.
@@ -1379,6 +1391,9 @@ var SnippetEditor = Widget.extend({
         if (!samePositionAsStart) {
             this.options.wysiwyg.odooEditor.historyStep();
         }
+
+        this.dragState.restore();
+
         delete this.$dropZones;
         delete this.dragState;
     },
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 8b1d907bec9..b104e154fba 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -449,6 +449,29 @@ weSnippetEditor.SnippetEditor.include({
         }
         return this._super(...arguments);
     },
+    /**
+     * Changes some behaviors before the drag and drop.
+     *
+     * @private
+     * @override
+     * @returns {Function} a function that restores what was changed when the
+     *  drag and drop is over.
+     */
+    _prepareDrag() {
+        const restore = this._super(...arguments);
+        // Remove the footer scroll effect if it has one (because the footer
+        // dropzone flickers otherwise when it is in grid mode).
+        const wrapwrapEl = this.$body[0].ownerDocument.defaultView.document.body.querySelector('#wrapwrap');
+        const hasFooterScrollEffect = wrapwrapEl && wrapwrapEl.classList.contains('o_footer_effect_enable');
+        if (hasFooterScrollEffect) {
+            wrapwrapEl.classList.remove('o_footer_effect_enable');
+            return () => {
+                wrapwrapEl.classList.add('o_footer_effect_enable');
+                restore();
+            };
+        }
+        return restore;
+    },
 });
 return {
     SnippetsMenu: wSnippetMenu,