[FIX] web_editor, website: stop snippet animations before cloning

Before this commit, when a snippet was cloned, its animation was not destroyed
first. The flow was:
1. Clone the snippet (DOM) - web_editor trigger `snippet_cloned`
2. Start cloned snippet animation - website listen `snippet_cloned`

This was causing bugs, eg facebook snippet for which the animation is to create
an iframe containing the facebook widget.
When cloning this snippet, its iframe would be cloned to, then its animation
would be started, creating another iframe.

To fix such flows, the snippet cloning flow should be:
1. Strop the snippet animation
2. Clone the snippet (DOM) - web_editor trigger `snippet_cloned`
3. Start cloned snippet animation - website listen `snippet_cloned`
4. Restart the original snippet animation

task-1951466

closes odoo/odoo#35029

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -337,6 +337,9 @@ var SnippetEditor = Widget.extend({
      */
     _onCloneClick: function (ev) {
         ev.preventDefault();
+
+        this.trigger_up('snippet_will_be_cloned', {$target: this.$target});
+
         var $clone = this.$target.clone(false);
 
         this.trigger_up('request_history_undo_record', {$target: this.$target});
@@ -352,7 +355,7 @@ var SnippetEditor = Widget.extend({
                 }
             },
         });
-        this.trigger_up('snippet_cloned', {$target: $clone});
+        this.trigger_up('snippet_cloned', {$target: $clone, $origin: this.$target});
     },
     /**
      * Called when the overlay dimensions/positions should be recomputed.

addons/website/static/src/js/content/website_root.js

@@ -43,6 +43,7 @@ var WebsiteRoot = BodyManager.extend({
     }),
     custom_events: _.extend({}, BodyManager.prototype.custom_events || {}, {
         animation_start_demand: '_onAnimationStartDemand',
+        animation_stop_demand: '_onAnimationStopDemand',
         ready_to_clean_for_save: '_onAnimationStopDemand',
     }),
 

addons/website/static/src/js/menu/edit.js

@@ -17,6 +17,7 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
     custom_events: _.extend({}, websiteNavbarData.WebsiteNavbarActionWidget.custom_events || {}, {
         content_will_be_destroyed: '_onContentWillBeDestroyed',
         content_was_recreated: '_onContentWasRecreated',
+        snippet_will_be_cloned: '_onSnippetWillBeCloned',
         snippet_cloned: '_onSnippetCloned',
         snippet_dropped: '_onSnippetDropped',
     }),
@@ -111,9 +112,22 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             $target: ev.data.$target,
         });
     },
+    /**
+     * Called when a snippet is about to be cloned in the page. Notifies the
+     * WebsiteRoot that is should destroy the animations for this snippet.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onSnippetWillBeCloned: function (ev) {
+        this.trigger_up('animation_stop_demand', {
+            $target: ev.data.$target,
+        });
+    },
     /**
      * Called when a snippet is cloned in the page. Notifies the WebsiteRoot
-     * that is should start the animations for this snippet.
+     * that is should start the animations for this snippet and the snippet it
+     * was cloned from.
      *
      * @private
      * @param {OdooEvent} ev
@@ -123,6 +137,13 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
             editableMode: true,
             $target: ev.data.$target,
         });
+        // TODO: remove in saas-12.5, undefined $origin will restart #wrapwrap
+        if (ev.data.$origin) {
+            this.trigger_up('animation_start_demand', {
+                editableMode: true,
+                $target: ev.data.$origin,
+            });
+        }
     },
     /**
      * Called when a snippet is dropped in the page. Notifies the WebsiteRoot