[IMP] web_editor: scroll to the last snippet dropped

After dropping a snippet. Scroll to this snippet if it is not an inner
snippet and if it is not dropped in a modal.

task-2332641

1 files changed, 30 insertions, 1 deletions

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 6941c7a8fdb..bb9438bad9a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1831,6 +1831,7 @@ var SnippetsMenu = Widget.extend({
     _makeSnippetDraggable: function ($snippets) {
         var self = this;
         var $toInsert, dropped, $snippet;
+        let scrollValue;
 
         const smoothScrollOptions = this._getScrollOptions({
             jQueryDraggableOptions: {
@@ -1875,6 +1876,7 @@ var SnippetsMenu = Widget.extend({
                         over: function () {
                             if (!dropped) {
                                 dropped = true;
+                                scrollValue = $(this).first().offset().top;
                                 $(this).first().after($toInsert).addClass('d-none');
                                 $toInsert.removeClass('oe_snippet_body');
                             }
@@ -1890,12 +1892,13 @@ var SnippetsMenu = Widget.extend({
                         },
                     });
                 },
-                stop: function (ev, ui) {
+                stop: async function (ev, ui) {
                     $toInsert.removeClass('oe_snippet_body');
 
                     if (!dropped && ui.position.top > 3 && ui.position.left > self.el.getBoundingClientRect().right) {
                         var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
                         if ($el.length) {
+                            scrollValue = $el.offset().top;
                             $el.after($toInsert);
                             dropped = true;
                         }
@@ -1923,6 +1926,7 @@ var SnippetsMenu = Widget.extend({
                         }
 
                         var $target = $toInsert;
+                        await self._scrollToSnippet($target, scrollValue);
 
                         _.defer(function () {
                             self.trigger_up('snippet_dropped', {$target: $target});
@@ -1991,6 +1995,31 @@ var SnippetsMenu = Widget.extend({
         this.$('.o_we_customize_snippet_btn').toggleClass('active', tab === this.tabs.OPTIONS)
                                              .prop('disabled', tab !== this.tabs.OPTIONS);
     },
+    /**
+     * Scroll to the dropped snippet.
+     *
+     * @private
+     * @param {jQuery} [$el] - dropped snippet
+     * @param {integer} [scrollValue] - scrollValue
+     */
+    _scrollToSnippet: function ($el, scrollValue) {
+        // return if it's an inner snippet or if it's dropped in a modal
+        if ($el.get(0).tagName.toLowerCase() !== 'section' || $el.parent().find("[class^='modal-']").length) {
+            return Promise.resolve();
+        }
+        let headerHeight = 0;
+        _.each($('.o_top_fixed_element'), el => headerHeight += $(el).outerHeight());
+        return new Promise(resolve => {
+          $('html, body').animate(
+              {
+                  scrollTop: scrollValue - headerHeight - 50,
+              },
+              700,
+              'swing',
+              resolve,
+          );
+        });
+    },
 
     //--------------------------------------------------------------------------
     // Handlers