From 076d7ac7795f86d48b532b6c2a1ff76e4503604e Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Tue, 8 Nov 2022 13:31:12 +0000
Subject: [PATCH] [FIX] website: scroll to the next visible element
Before this commit, the buttons to scroll to the next element might not
work if the next element was invisible.
Steps to reproduce the bug fixed by this commit:
(Note that these steps are only reproducible from 15.0. We decided to
merge this fix in 14.0 to be custo-friendly)
- Install two languages on a website
- Drop a cover block (1), with a height of 100% and a scroll down button
- Drop a new block (2) only visible for language B below the block 1
- Drop a new block (3) visible for everyone below the block 2
- Save and go to the site in language A
- Click on the scroll down button
=> No scroll at all while the user expects to scroll to the block
visible to everyone (3). This commit fixes that by making the user
scroll down to see the next visible element.
opw-2967706
closes odoo/odoo#105334
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
.../static/src/js/content/snippets.animation.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 967462a071a4..19dbec6cdc20 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1050,9 +1050,15 @@ registry.ScrollButton = registry.anchorSlide.extend({
*/
_onAnimateClick: function (ev) {
ev.preventDefault();
- const $nextElement = this.$el.closest('section').next();
- if ($nextElement.length) {
- this._scrollTo($nextElement);
+ // Scroll to the next visible element after the current one.
+ const currentSectionEl = this.el.closest('section');
+ let nextEl = currentSectionEl.nextElementSibling;
+ while (nextEl) {
+ if ($(nextEl).is(':visible')) {
+ this._scrollTo($(nextEl));
+ return;
+ }
+ nextEl = nextEl.nextElementSibling;
}
},
});
--
GitLab