From dfe0466e472df4ad829b76bd797c40ddf69cc02d Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 9 Feb 2024 11:59:25 +0100
Subject: [PATCH] [FIX] web_editor, website: fix undo after enabling hover
 effects.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Steps to reproduce the bug:

- In Website edit mode, drag & drop a text-image snippet onto the page.
- Click on the image of the snippet.
- In the image options, select "On Hover" for the "Animation" option.
- Click on the "Undo" button in the top bar of the editor panel.
- Bug: The "Animation" option has not been deactivated, the "Hover
Effect" is still present when hovering over the image.

task-3495241

closes odoo/odoo#134979

Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
---
 .../web_editor/static/src/js/editor/snippets.options.js   | 8 ++++++++
 .../website/static/src/js/content/snippets.animation.js   | 4 ++--
 addons/website/static/src/js/editor/snippets.options.js   | 4 ++++
 3 files changed, 14 insertions(+), 2 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 12b34d04138..4d209042509 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -6754,6 +6754,13 @@ registry.ImageTools = ImageHandlerOption.extend({
             }
         }
         await this._reapplyCurrentShape();
+        // When the hover effects are first activated from the "animationMode"
+        // function of the "WebsiteAnimate" class, the history was paused to
+        // avoid recording intermediate steps. That's why we unpause it here.
+        if (this.firstHoverEffect) {
+            this.options.wysiwyg.odooEditor.historyUnpauseSteps();
+            delete this.firstHoverEffect;
+        }
     },
     /**
      * @see this.selectClass for parameters
@@ -6801,6 +6808,7 @@ registry.ImageTools = ImageHandlerOption.extend({
                     shapeImgSquareWidget.getParent().close(); // FIXME remove this ugly hack asap
                 }
                 // Add the "Overlay" hover effect to the shape.
+                this.firstHoverEffect = true;
                 const hoverEffectOverlayWidget = this._requestUserValueWidgets("hover_effect_overlay_opt")[0];
                 hoverEffectOverlayWidget.enable();
                 hoverEffectOverlayWidget.getParent().close(); // FIXME remove this ugly hack asap
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 17f24dda245..9bc48f935cf 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1776,7 +1776,7 @@ registry.ImageShapeHoverEffet = publicWidget.Widget.extend({
      * @private
      */
     _onMouseEnter() {
-        if (!this.originalImgSrc) {
+        if (!this.originalImgSrc || !this.$target[0].dataset.hoverEffect) {
             return;
         }
         this.lastMouseEvent = this.lastMouseEvent.then(() => new Promise((resolve) => {
@@ -1812,7 +1812,7 @@ registry.ImageShapeHoverEffet = publicWidget.Widget.extend({
      */
     _onMouseLeave() {
         this.lastMouseEvent = this.lastMouseEvent.then(() => new Promise((resolve) => {
-            if (!this.originalImgSrc || !this.svgInEl) {
+            if (!this.originalImgSrc || !this.svgInEl || !this.$target[0].dataset.hoverEffect) {
                 resolve();
                 return;
             }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index d1ed6f4b55f..3cf21b0d27a 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3557,6 +3557,10 @@ options.registry.WebsiteAnimate = options.Class.extend({
             this._toggleImagesLazyLoading(true);
         }
         if (widgetValue === "onHover") {
+            // Pause the history until the hover effect is applied in
+            // "setImgShapeHoverEffect". This prevents saving the intermediate
+            // steps done (in a tricky way) up to that point.
+            this.options.wysiwyg.odooEditor.historyPauseSteps();
             this.trigger_up("option_update", {
                 optionName: "ImageTools",
                 name: "enable_hover_effect",