[FIX] website{_slides}: scroll animation in fullscreen

Current behaviour:
When you make content of type article in eLearning,
then add an animation on scroll on an element,
when you put the article in fullscreen,
the animations do not trigger.

Steps to reproduce:
1. Go to eLearning
2. Select a course with articles
3. Click on Go to website
4. Go on the article content
5. Open the editor
6. Drag and drop the columns block at the end
7. Select "feature one" and add an animation on scroll
8. After saving, scroll, the animation works
9. Click on "Fullscreen"
10. Scroll again, animation doesn't trigger

Cause of the issue:
In website_slide, fullscreen mode, the right scrollable
element is not #wrapwrap, but .o_wslide_fs_article_content

Note:
If the animation is not complete, but the page is scrolled
at maximum, animation intensity can be lowered in the
editor panel, so that the animation can finish earlier.

opw-4151770

closes odoo#188156

X-original-commit: 02acb08
Signed-off-by: Quentin Smetz (qsm) <[email protected]>
Signed-off-by: Antoine Demany (ande) <[email protected]>

addons/website/static/src/js/content/snippets.animation.js

@@ -1459,7 +1459,7 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
      */
     start() {
         this.lastScroll = 0;
-        this.$scrollingElement = $().getScrollingElement();
+        this.$scrollingElement = this.findScrollingElement();
         this.$scrollingTarget = $().getScrollingTarget(this.$scrollingElement);
         this.$animatedElements = this.$('.o_animate');
 
@@ -1525,6 +1525,10 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
         this.$scrollingElement[0].classList.remove('o_wanim_overflow_xy_hidden');
     },
 
+    findScrollingElement() {
+        return $().getScrollingElement();
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------

addons/website_slides/__manifest__.py

@@ -103,6 +103,7 @@
             'website_slides/static/src/js/slides_course_quiz_question_form.js',
             'website_slides/static/src/js/slides_course_tag_add.js',
             'website_slides/static/src/js/slides_course_unsubscribe.js',
+            'website_slides/static/src/js/snippets.animation.js',
             'website_slides/static/src/js/portal_rating_composer.js',
             'website_slides/static/src/xml/website_slides_sidebar.xml',
             'website_slides/static/src/xml/website_slides_fullscreen.xml',

addons/website_slides/static/src/js/snippets.animation.js

@@ -0,0 +1,22 @@
+/** @odoo-module **/
+
+import publicWidget from '@web/legacy/js/public/public_widget';
+import '@website/js/content/snippets.animation';
+
+publicWidget.registry.WebsiteAnimate.include({
+    /**
+     * @override
+     * @todo This should be avoided: the natural scrollbar of the browser should
+     * always be preferred. Indeed, moving the main scroll of the page to a
+     * different location causes a lot of issues. See 189a7c96e6e26825dc05c0c64
+     * for more information (improvement of 18.0 for general scrolling behaviors
+     * in all website pages). E.g. issue in eLearning: go to an article in full
+     * screen mode, try to use the up/down arrow keys to scroll: it does not
+     * work (you first have to focus the article which should not be needed as
+     * it is the only main scrollable element of the page).
+     */
+    findScrollingElement() {
+        const articleContent = document.querySelector('.o_wslide_fs_article_content');
+        return articleContent ? $(articleContent) : this._super(...arguments);
+    }
+});