From 43ccc785546bbce7787ca2075aa18ebc76a6d36b Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 4 Feb 2022 16:20:27 +0000 Subject: [PATCH] [FIX] website: update modal scrolling behavior after image loading With commit [1] (and the parent commit here which reviews it), we move the scrollbar to the modal instead of the website content if the modal has scrollable content even in the case there is no backdrop. An exemple would be the cookie bar, configured in popup mode, with a tall content inside. This was however not enough: the computation which determines if the modal should be scrollable or not was not re-done after an image was loaded. So if the popup was around the height of the window, it could be smaller than the window's height before images loading and taller after which would result in having the scrollbar on the body instead of the scrollable popup. [1]: https://github.com/odoo/odoo/commit/8f1dd6d6087ad8252d6e7b22d13aad2c4a3f19c6 closes odoo/odoo#84139 X-original-commit: b83b465dd98345afeca3844a4796e4a83d15f72b Signed-off-by: Romain Derie (rde) Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/snippets/s_popup/000.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/addons/website/static/src/snippets/s_popup/000.js b/addons/website/static/src/snippets/s_popup/000.js index 57ac11c3925..3246c7ad7b9 100644 --- a/addons/website/static/src/snippets/s_popup/000.js +++ b/addons/website/static/src/snippets/s_popup/000.js @@ -153,6 +153,10 @@ $.fn.modal.Constructor.prototype._showElement = function () { // opened is a very specific Odoo behavior. $(this._element).on('content_changed.update_scrollbar', this, _updateScrollbar); $(window).on('resize.update_scrollbar', this, _updateScrollbar); + + this._odooLoadEventCaptureHandler = _.debounce(() => _updateScrollbar({ data: this }, 100)); + this._element.addEventListener('load', this._odooLoadEventCaptureHandler, true); + _updateScrollbar({ data: this }); } }; @@ -168,6 +172,11 @@ $.fn.modal.Constructor.prototype._hideModal = function () { $(this._element).off('content_changed.update_scrollbar'); $(window).off('resize.update_scrollbar'); + + if (this._odooLoadEventCaptureHandler) { + this._element.removeEventListener('load', this._odooLoadEventCaptureHandler, true); + delete this._odooLoadEventCaptureHandler; + } }; const _baseSetScrollbar = $.fn.modal.Constructor.prototype._setScrollbar;