pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor, *: fix animations on transformed images

Browse Source 
*: 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>
This commit is contained in:
Tom De Caluwé
2022-08-01 13:26:38 +02:00
committed by qsm-odoo
co-authored by qsm-odoo
parent e181eb6dd6
commit faff8ddb30
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+6
View File
@@ -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);
addons/web_editor/views/snippets.xml
+1 -1
View File
@@ -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>
addons/website/views/snippets/snippets.xml
+4 -2
View File
@@ -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>