[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

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;
     },

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,