From faff8ddb300a44b3b84bc44dd40d1bd712f7b2b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20De=20Caluw=C3=A9?= <tdc@odoo.com>
Date: Mon, 28 Mar 2022 10:26:24 +0000
Subject: [PATCH] [FIX] web_editor, *: fix animations on transformed images

*: website

Setting transformations on images is handled by the jQuery transfo
plugin. This plugin, however, also manipulates animations related css
properties allowing the plugin to work on animated images.

After closing the transformation tools these properties stay in the DOM,
preventing the animation options to work properly. Animations are not
played when previewing or selecting a choice from the dropdown list.
Instead they remain stuck in their initial keyframe.

To avoid complications from the interaction between both options, this
commit hides either option when the other is activated. Additionally,
css properties added by the transform option are cleaned, avoiding
potential interactions after the transform option is reset again.

opw-2765529

closes odoo/odoo#97137

X-original-commit: 3ac59a7f841b528a32c14a2111e7a1a7e11c830a
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/web_editor/static/src/js/editor/snippets.options.js | 6 ++++++
 addons/web_editor/views/snippets.xml                       | 2 +-
 addons/website/views/snippets/snippets.xml                 | 6 ++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 441c4e5bcc4..8af5dd6f1e4 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -5316,11 +5316,17 @@ registry.ImageTools = ImageHandlerOption.extend({
         this.trigger_up('disable_loading_effect');
 
         const document = this.$target[0].ownerDocument;
+        const playState = this.$target[0].style.animationPlayState;
+        const transition = this.$target[0].style.transition;
         this.$target.transfo({document});
         const mousedown = mousedownEvent => {
             if (!$(mousedownEvent.target).closest('.transfo-container').length) {
                 this.$target.transfo('destroy');
                 $(document).off('mousedown', mousedown);
+                // Restore animation css properties potentially affected by the
+                // jQuery transfo plugin.
+                this.$target[0].style.animationPlayState = playState;
+                this.$target[0].style.transition = transition;
             }
         };
         $(document).on('mousedown', mousedown);
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 68cccecc69f..5be36ca5454 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -564,7 +564,7 @@
             <we-button class="ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
                 Reset
             </we-button>
-            <we-button class="fa fa-fw fa-object-ungroup" data-transform="true" data-no-preview="true" title="Transform the picture"/>
+            <we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture" t-att-data-dependencies="image_transform_dependencies"/>
             <we-button class="ms-0 border-start-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
                 Reset
             </we-button>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 0122351c84f..2b50ecd95e9 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -337,7 +337,9 @@
 </template>
 
 <template id="snippet_options">
-    <t t-call="web_editor.snippet_options"/>
+    <t t-call="web_editor.snippet_options">
+        <t t-set="image_transform_dependencies" t-valuef="no_animation_opt"/>
+    </t>
 
     <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
     <div data-js="Box"
@@ -1250,7 +1252,7 @@
     <div data-js="WebsiteAnimate"
          data-selector=".o_animable, section .row > div, img, .fa, .btn, .o_animated_text"
          data-exclude="[data-oe-xpath], .o_not-animable, .s_col_no_resize.row > div, .s_col_no_resize">
-        <we-select string="Animate" data-is-animation-type-selection="true">
+        <we-select string="Animate" data-dependencies="!image_transform_opt" data-is-animation-type-selection="true">
             <we-button data-select-class="" data-name="no_animation_opt">No Animation</we-button>
             <we-divider/>
             <we-button data-select-class="o_anim_fade_in">Fade In</we-button>