From f2f117e9b659b6dba99eee456f4a17f730afc930 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 21 Apr 2022 12:45:44 +0000
Subject: [PATCH] [FIX] website_animate: fix animation in mega menu

Backport of [1].

Before this commit, the animations were never launched in a mega menu.

Indeed the animations are launched when the element to be animated
appears in the viewport according to the scroll. But in the case of a
mega menu we just want the animation to start when the mega menu is
opened. For that we don't need all the code that checks the scroll, etc.
The animation starts by itself when the element inside the mega menu is
made visible in CSS.

This commit also removes the "Each time it becomes visible" option for
an element animated in a mega menu because in this case this option does
not make sense.

[1]: https://github.com/odoo/odoo/commit/bae04041a528e1a1fe97387ca5b75943c1d0fe97

opw-2764895

closes odoo/design-themes#561

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/o_animate.editor.js           | 17 +++++++++++++++++
 .../static/src/js/o_animate.frontend.js         |  8 ++++++--
 .../static/src/scss/o_animate_frontend.scss     |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/website_animate/static/src/js/o_animate.editor.js b/website_animate/static/src/js/o_animate.editor.js
index a757d6375..36cbda320 100644
--- a/website_animate/static/src/js/o_animate.editor.js
+++ b/website_animate/static/src/js/o_animate.editor.js
@@ -43,5 +43,22 @@ sOptions.registry.o_animate = sOptions.Class.extend({
             this.$target.toggleClass('o_animate_preview o_animate', !!widgetValue);
         }
     },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        const classes = params.optionsPossibleValues.selectClass;
+        if (classes && classes.includes('o_animate_both_scroll')) {
+            // Hide the "Each time it becomes visible" option if the target is
+            // inside a dropdown (e.g. mega menu).
+            return !this.$target.closest('.dropdown').length;
+        }
+        return this._super(...arguments);
+    },
 });
 });
diff --git a/website_animate/static/src/js/o_animate.frontend.js b/website_animate/static/src/js/o_animate.frontend.js
index 51e508240..9e157f8d1 100644
--- a/website_animate/static/src/js/o_animate.frontend.js
+++ b/website_animate/static/src/js/o_animate.frontend.js
@@ -17,6 +17,10 @@ var WebsiteAnimate = {
         self.items = $("#wrapwrap .o_animate");
         self.items.each(function () {
             var $el = $(this);
+            if ($el[0].closest('.dropdown')) {
+                $el[0].classList.add('o_animate_in_dropdown');
+                return;
+            }
             // Set all monitored elements to initial state
             self.reset_animation($el);
         });
@@ -48,7 +52,7 @@ var WebsiteAnimate = {
             var direction = (windowTop < lastScroll) ? -1 : 1;
             lastScroll = windowTop;
 
-            $("#wrapwrap .o_animate").each(function () {
+            $("#wrapwrap .o_animate:not(.o_animate_in_dropdown)").each(function () {
                 var $el       = $(this);
                 var elHeight  = $el.height();
                 var elOffset  = direction * Math.max((elHeight * self.offsetRatio), self.offsetMin);
@@ -152,7 +156,7 @@ publicWidget.registry.WebsiteAnimate = publicWidget.Widget.extend({
         this._super.apply(this, arguments);
 
         this.$target.find('.o_animate')
-            .removeClass('o_animating o_animated o_animate_preview')
+            .removeClass('o_animating o_animated o_animate_preview o_animate_in_dropdown')
             .css({
                 'animation-name': '',
                 'animation-play-state': '',
diff --git a/website_animate/static/src/scss/o_animate_frontend.scss b/website_animate/static/src/scss/o_animate_frontend.scss
index 606a141e2..34e9cbcef 100644
--- a/website_animate/static/src/scss/o_animate_frontend.scss
+++ b/website_animate/static/src/scss/o_animate_frontend.scss
@@ -11,7 +11,7 @@
     text-rendering: geometricPrecision; // take care of animated titles
     visibility: hidden;
 
-    &:not(.o_animating) {
+    &:not(.o_animating):not(.o_animate_in_dropdown) {
         transform: none !important;
     }
 }