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

[FIX] website: fix animation in mega menu

Browse Source 
Before this commit, the animations were never launched in a mega menu
with the navbar option "sub menus = on hover" enabled.

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.

A first attempt to fix this was made by this commit [1], but this fix
was wrong. Indeed, as explained above, animations in a dropdown do not
need to be triggered on scroll. And moreover, it didn't work properly
because the animations were never reset when the dropdown was closed.

[1]: https://github.com/odoo/odoo/commit/7a96557b839a69a9d44aac4242af2d21bc7f0e38

opw-2764895

closes odoo/odoo#90826

X-original-commit: bae04041a528e1a1fe97387ca5b75943c1d0fe97
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2022-05-07 21:20:52 +02:00
committed by qsm-odoo
parent fd5a5875e7
commit 2f87046f56
2 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/snippets.animation.js
+8 -9
View File
@@ -1196,6 +1196,10 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
// Render elements and trigger the animation then pause it in state 0.
this.$animatedElements = this.$target.find('.o_animate');
_.each(this.$animatedElements, el => {
if (el.closest('.dropdown')) {
el.classList.add('o_animate_in_dropdown');
return;
}
this._resetAnimation($(el));
});
// Then we render all the elements, the ones which are invisible
@@ -1209,14 +1213,9 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
this.__onScrollWebsiteAnimate = _.throttle(this._onScrollWebsiteAnimate.bind(this), 200);
this.$scrollingElement[0].addEventListener('scroll', this.__onScrollWebsiteAnimate, {capture: true});
$(window).on('resize.o_animate, shown.bs.modal.o_animate, slid.bs.carousel.o_animate, shown.bs.dropdown.o_animate', () => {
$(window).on('resize.o_animate, shown.bs.modal.o_animate, slid.bs.carousel.o_animate', () => {
this.windowsHeight = $(window).height();
let $scrollingElement = this.$scrollingElement;
const $openDropdown = $('.dropdown-menu.show:has(.o_animate)');
if ($openDropdown.length) {
$scrollingElement = $openDropdown;
}
this._scrollWebsiteAnimate($scrollingElement[0]);
this._scrollWebsiteAnimate(this.$scrollingElement[0]);
}).trigger("resize");
return this._super(...arguments);
@@ -1227,7 +1226,7 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
destroy() {
this._super(...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': '',
@@ -1314,7 +1313,7 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
const direction = (scroll < this.lastScroll) ? -1 : 1;
this.lastScroll = scroll;
_.each(this.$target.find('.o_animate'), el => {
_.each(this.$target.find('.o_animate:not(.o_animate_in_dropdown)'), el => {
const $el = $(el);
const elHeight = $el.height();
const elOffset = direction * Math.max((elHeight * this.offsetRatio), this.offsetMin);
addons/website/static/src/scss/website.scss
+1 -1
View File
@@ -1543,7 +1543,7 @@ ul.o_checklist > li.o_checked::after {
text-rendering: geometricPrecision; // take care of animated titles
visibility: hidden;
&:not(.o_animating) {
&:not(.o_animating):not(.o_animate_in_dropdown) {
transform: none !important;
}
}