[FIX] website_slides: load animations after slide loaded

Issue: When using the Fullscreen mode of slides for articles we do run
first the website animations before loading the slide, which will make
the content to stay invisible since we will never actually perform the
animation.

Steps to reproduce:

1. Create a new course with an article content.
2. Add any block (text, image).
3. Add an animation to this piece of block.
4. Go to Fullscreen mode.

Solution:

We manually instantiate and attach the WebsiteAnimate widget to
the wpContainer element to ensure animations are properly initialized
and applied after the slide has loaded, after that we get rid of this
instance after every new slide that load so we avoid having multiple
instances.

opw-3757919

closes odoo/odoo#159445

X-original-commit: 593ca1f36a4a9da753d8361840b07e2445f2d99b
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
Signed-off-by: Maruan Aguerdouh Mohtar (magm) <magm@odoo.com>
This commit is contained in:
Maruan Aguerdouh (magm)
2024-03-28 10:19:41 +00:00
committed by Aurélien Warnon
parent 469138e229
commit c357496609
@@ -651,6 +651,10 @@
var slide = this.get('slide');
var $content = this.$('.o_wslides_fs_content');
$content.empty();
if (this.websiteAnimateWidget) {
this.websiteAnimateWidget.destroy()
this.websiteAnimateWidget = null;
}
// display quiz slide, or quiz attached to a slide
if (slide.category === 'quiz' || slide.isQuiz) {
@@ -671,12 +675,14 @@
} else if (slide.category === 'video' && slide.videoSourceType === 'google_drive') {
$content.empty().append(renderToElement('website.slides.fullscreen.video.google_drive', {widget: this}));
} else if (slide.category === 'article'){
this.websiteAnimateWidget = new publicWidget.registry.WebsiteAnimate();
var $wpContainer = $('<div>').addClass('o_wslide_fs_article_content bg-white block w-100 overflow-auto p-3');
$wpContainer.html(slide.htmlContent);
$content.append($wpContainer);
this.trigger_up('widgets_start_request', {
$target: $content,
});
this.websiteAnimateWidget.attachTo($wpContainer);
}
unhideConditionalElements();
} finally {