diff options
Diffstat (limited to 'addons/website/static/src/js')
4 files changed, 27 insertions, 39 deletions
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index 27000cfd48d..bcf9ebbaf78 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -76,10 +76,8 @@ const BaseAnimatedHeader = animations.Animation.extend({ this._updateMainPaddingTop(); this.el.classList.toggle('o_top_fixed_element', this.fixedHeader && this._isShown()); - const bottom = this.el.getBoundingClientRect().bottom - || (this.el.nextElementSibling.getBoundingClientRect().top + window.scrollY); for (const callback of extraMenuUpdateCallbacks) { - callback(bottom); + callback(); } }, /** @@ -130,6 +128,14 @@ const BaseAnimatedHeader = animations.Animation.extend({ _toggleFixedHeader: function (useFixed = true) { this.fixedHeader = useFixed; this.el.classList.toggle('o_header_affixed', useFixed); + // Compensate scrollbar + if (useFixed) { + const scrollableEl = this.$el.parent().closestScrollable()[0]; + const style = window.getComputedStyle(this.el); + this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important'); + } else { + this.el.style.removeProperty('right'); + } this._adaptToHeaderChange(); }, /** diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 81640cde197..368be2e810b 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -8,6 +8,7 @@ odoo.define('website.content.snippets.animation', function (require) { var Class = require('web.Class'); var config = require('web.config'); var core = require('web.core'); +const dom = require('web.dom'); var mixins = require('web.mixins'); var publicWidget = require('web.public.widget'); var utils = require('web.utils'); @@ -123,12 +124,13 @@ var AnimationEffect = Class.extend(mixins.ParentedMixin, { // Initialize the animation startEvents, startTarget, endEvents, endTarget and callbacks this._updateCallback = updateCallback; this.startEvents = startEvents || 'scroll'; - this.$startTarget = $($startTarget || window); + this.$startTarget = $($startTarget ? $startTarget : this.startEvents === 'scroll' ? $().getScrollingElement()[0] : window); if (options.getStateCallback) { this._getStateCallback = options.getStateCallback; - } else if (this.startEvents === 'scroll' && this.$startTarget[0] === window) { + } else if (this.startEvents === 'scroll' && this.$startTarget[0] === $().getScrollingElement()[0]) { + const $scrollable = this.$startTarget; this._getStateCallback = function () { - return window.pageYOffset; + return $scrollable.scrollTop(); }; } else if (this.startEvents === 'resize' && this.$startTarget[0] === window) { this._getStateCallback = function () { @@ -898,38 +900,19 @@ registry.anchorSlide = publicWidget.Widget.extend({ * @private * @param {jQuery} $el the element to scroll to. * @param {string} [scrollValue='true'] scroll value + * @returns {Promise} */ - _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(), - }); + async _scrollTo($el, scrollValue = 'true') { + return dom.scrollTo($el[0], { + duration: scrollValue === 'true' ? 500 : 0, + extraOffset: this._computeExtraOffset(), }); }, /** * @private */ - _computeHeaderHeight: function () { - let headerHeight = 0; - const $navbarFixed = $('.o_top_fixed_element'); - _.each($navbarFixed, el => headerHeight += $(el).outerHeight()); - return headerHeight; + _computeExtraOffset() { + return 0; }, //-------------------------------------------------------------------------- diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index e226fd70543..40f999f836c 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -100,6 +100,7 @@ weSnippetEditor.Class.include({ if (!options.offsetElements || !options.offsetElements.$top) { const $header = $('#top'); if ($header.length) { + finalOptions.offsetElements = finalOptions.offsetElements || {}; finalOptions.offsetElements.$top = $header; } } diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 5819402c93a..3b53a594bd7 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -5,6 +5,7 @@ const {ColorpickerWidget} = require('web.Colorpicker'); const config = require('web.config'); var core = require('web.core'); var Dialog = require('web.Dialog'); +const dom = require('web.dom'); const weUtils = require('web_editor.utils'); var options = require('web_editor.snippets.options'); const wUtils = require('website.utils'); @@ -2504,13 +2505,10 @@ options.registry.SnippetMove = options.Class.extend({ break; } if (params.name === 'move_up_opt' || params.name === 'move_down_opt') { - $('html, body').animate( - { - scrollTop: this.$target.offset().top - $(window).height() / 2, - }, - 500, - 'linear', - ); + dom.scrollTo(this.$target[0], { + extraOffset: 50, + easing: 'linear', + }); } }, }); |