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

[FIX] website, *: make scroll to anchor consider the fixed header

Browse Source 
*: website_blog

This was fixed and rebroken quite a few times. Hopefully, with this
commit and the next ones, the feature will be more robust: when clicking
on a link anchor, the animation now considers the fixed header height if
any *even if the header becomes fixed during the animation*.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

X-original-commit: 416b125803d043badef8e4b022c100e33d1dba04
This commit is contained in:
qsm-odoo
2020-09-22 10:09:35 +00:00
parent 80d35e420e
commit e3c23b50ee
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/content/snippets.animation.js
+22 -6
View File
@@ -899,12 +899,28 @@ registry.anchorSlide = publicWidget.Widget.extend({
* @param {jQuery} $el the element to scroll to.
* @param {string} [scrollValue='true'] scroll value
*/
_scrollTo: function ($el, scrollValue = 'true') {
const headerHeight = this._computeHeaderHeight();
const offset = $el.css('position') !== 'fixed' ? $el.offset().top : $el.position().top;
$('html, body').animate({
scrollTop: offset - headerHeight,
}, scrollValue === 'true' ? 500 : 0);
_scrollTo: function ($el, scrollValue = 'true', forcedDelay = undefined) {
const _computeScrollTo = () => {
const headerHeight = this._computeHeaderHeight();
const offset = $el.css('position') !== 'fixed' ? $el.offset().top : $el.position().top;
return offset - headerHeight;
};
const originalScrollTo = _computeScrollTo();
return new Promise(resolve => {
$('html, body').animate({
scrollTop: originalScrollTo,
}, {
duration: forcedDelay || (scrollValue === 'true' ? 500 : 0),
progress: (a, b, remainingMs) => {
const scrollTo = _computeScrollTo();
if (Math.abs(scrollTo - originalScrollTo) >= 1.0) {
$('html, body').stop();
this._scrollTo($el, scrollValue, remainingMs).then(() => resolve());
}
},
complete: () => resolve(),
});
});
},
/**
* @private
addons/website_blog/static/src/js/website_blog.js
+3 -9
View File
@@ -2,8 +2,9 @@ odoo.define('website_blog.website_blog', function (require) {
'use strict';
var publicWidget = require('web.public.widget');
require('website.content.snippets.animation');
publicWidget.registry.websiteBlog = publicWidget.Widget.extend({
publicWidget.registry.websiteBlog = publicWidget.registry.anchorSlide.extend({
selector: '.website_blog',
events: {
'click #o_wblog_next_container': '_onNextBlogClick',
@@ -92,14 +93,7 @@ publicWidget.registry.websiteBlog = publicWidget.Widget.extend({
* @param {Function} callback - to be executed after the scroll is performed
*/
_forumScrollAction: function ($el, duration, callback) {
const $main = $('#wrapwrap > main');
var gap = $main.offset().top + parseInt($main.css('padding-top'));
$('html, body').stop().animate({
scrollTop: $el.offset().top - gap
}, duration, 'swing', function () {
callback();
});
this._scrollTo($el, 'true', duration).then(() => callback());
},
});
});