Skip to content

Commit

Permalink
[FIX] website: better match local anchor links
Browse files Browse the repository at this point in the history
When a menu link is defined towards an anchor, the scroll effect of the
browser does not trigger from within the translated pages where the URL
contains the additional path element about the used locale.

The language is added in `ir.http`'s `url_lang` method, but we cannot
always know the current URL at that point, nor during the template
rendering - making it impossible to determine if the rendered anchor
is local.

This commit solves this client-side by first uniformizing the current
and the target pathnames so that they both end with a `/`, and then, if
they match replacing the link's target pathname by the window pathname
so that the browser sees them as the same page.

Steps to reproduce:
- Install `website`.
- Install a second language on the website.
- Put some content in the Home page so that the bottom section requires
scrolling to be seen.
- Add a menu element that targets `#bottom`.
- Either be a visitor or a connected user.
- Go to the default language Home page.
- Click on the new link. => Page scrolls to the bottom.
- Switch to the second language Home page.
- Click on the new link.

=> Page reloads targeting the bottom instead of scrolling.

In master, remove `scroller_service.js` from `web`'s manifest.

opw-3956066

closes #169944

Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
  • Loading branch information
bso-odoo committed Aug 7, 2024
1 parent a16774b commit 5f45f6e
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion addons/website/static/src/js/content/snippets.animation.js
Original file line number Diff line number Diff line change
Expand Up @@ -1065,9 +1065,14 @@ registry.anchorSlide = publicWidget.Widget.extend({
* @private
*/
_onAnimateClick: function (ev) {
if (this.$target[0].pathname !== window.location.pathname) {
const ensureSlash = path => path.endsWith("/") ? path : path + "/";
if (ensureSlash(this.$target[0].pathname) !== ensureSlash(window.location.pathname)) {
return;
}
// Avoid flicker at destination in case of ending "/" difference.
if (this.$target[0].pathname !== window.location.pathname) {
this.$target[0].pathname = window.location.pathname;
}
var hash = this.$target[0].hash;
if (hash === '#top' || hash === '#bottom') {
// If the anchor targets #top or #bottom, directly call the
Expand Down

0 comments on commit 5f45f6e

Please sign in to comment.