From d956199dddec93418a6fc139b2a58dae2fa4cd31 Mon Sep 17 00:00:00 2001
From: "Mehdi Outagant (MOU)" <mou@odoo.com>
Date: Fri, 22 Mar 2024 15:29:07 +0100
Subject: [PATCH] [FIX] web_editor, website: adapt hover animations to shape
 availability

Steps to reproduce:

- Go to website in "Edit" mode (on a blog post page).
- Select one of the default images in the blog content.
- Click on the "Animation" option and select "On Hover" > Traceback!

Starting from [1], the "On hover" image animation was implemented to be
able to pick an animation that triggers when hovering an image.

This feature is setting a default "Square" shape (required for the
hover effects to work) on the target. Which means that an error can
always occur if the "On Hover" animation option is available while the
targeted image is not linked to an attachment and can't support image
shapes (which is the case here).

The goal of this commit is to fix this issue by only allowing the
"On Hover" animations when it's possible to apply shapes to the image.

[1]: https://github.com/odoo/odoo/commit/7f730f81ec541cc7791fc6b3fded17c838433f85

opw-3795599

closes odoo/odoo#158433

Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 .../static/src/js/editor/snippets.options.js       | 14 ++++++++++++++
 .../static/src/js/editor/snippets.options.js       |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

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 0b769afde97..d3fd4442efc 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -7410,6 +7410,10 @@ registry.ImageTools = ImageHandlerOption.extend({
      * @returns {boolean}
      */
     _canHaveHoverEffect() {
+        // TODO Remove this comment in master:
+        // Note that this method does not ensure that a shape can be applied,
+        // which is required for hover effects. It should be preferably merged
+        // with the `_isImageSupportedForShapes()` method.
         return !this._isDeviceShape() && !this._isAnimatedShape();
     },
     /**
@@ -7570,6 +7574,16 @@ registry.ImageTools = ImageHandlerOption.extend({
             }
         }
     },
+    /**
+     * Checks if a shape can be applied on the target.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _isImageSupportedForShapes() {
+        const imgEl = this._getImg();
+        return imgEl.dataset.originalId && this._isImageSupportedForProcessing(imgEl);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 2bbaa9f5e33..d8f8b0246e3 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3655,7 +3655,7 @@ options.registry.WebsiteAnimate = options.Class.extend({
                     const hoverEffectWidget = hoverEffectOverlayWidget.getParent();
                     const imageToolsOpt = hoverEffectWidget.getParent();
                     return (
-                        imageToolsOpt._canHaveHoverEffect()
+                        imageToolsOpt._canHaveHoverEffect() && imageToolsOpt._isImageSupportedForShapes()
                         && !await isImageCorsProtected(this.$target[0])
                     );
                 }