[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>
This commit is contained in:
Mehdi Outagant (MOU)
2024-03-25 11:43:38 +00:00
parent 88b016fdc4
commit d956199ddd
2 changed files with 15 additions and 1 deletions
@@ -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
@@ -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])
);
}