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

[FIX] web, website: avoid traceback when cookie bar is activated

Browse Source 
Before this commit, we had a traceback if we tried to activate
the cookie bar on the website:
`_updateScrollBar` function of s_popup's 000.js

This is due to the fact that _checkScrollbar, _setScrollbar and
_resetScrollbar doesn't exist anymore in BS5.
It's why overrides of these functions were already removed
during the migration as you can see here:
https://github.com/odoo/odoo/commit/0b94da214b7017e8580e671cbaa68ade6de2fbc7#diff-348097d5de2047358549a91803882338f589af18c5dafed9f653250e150ce679L116-L138

Because of this, we have to delete _updateScrollbar and its usage.
Instead of trying to control the scrollbar, another possibily would
be to simply manage it with 'overflow' css properties.

Desired behavior:
a) Popup/Cookie bar WITHOUT backdrop, we should be able to
 - scroll the content behind
 - scroll the popup content itself
 - click on elements behind
b) Popup/Cookie bar WITH backdrop, we shoudn't be able to
 - scroll the content behind
 - click on elements behind

To do this, we now allow the scroll on '#wrapwrap' (the content).
In BS a popup has a backdrop by default and there is nothing to do
to block scroll and clicks behind the modal (on '#wrapwrap').
If the popup doesn't have a backdrop, we set 'pointer-events' to 'none'
to allow pointer event to pass through the backdrop element and annihilate
his effect. Note that 'pointer-events' property is reset by BS to 'auto'
for the popup content to override inherited value from the parent.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#formal_definition

Also note that now we have the same behavior as on desktop. If the size is set to
'Full', the cookie bar is displayed without any margins and sticks
to the screen borders.

Steps to reproduce:
- Enable cookie bar in settings
- Access a website page

Related commits:
- https://github.com/odoo/odoo/commit/e5a5f98819b3a70b3e2564fb91722cab415ceea9
- https://github.com/odoo/odoo/commit/97c8cf3ac263884b3eeb9862b84a426162d9794e
- https://github.com/odoo/odoo/commit/a0ddaa8931601a3d5e91a5ba5859ba58658e8710
- https://github.com/odoo/odoo/commit/0b94da214b7017e8580e671cbaa68ade6de2fbc7
- https://github.com/odoo/odoo/commit/43ccc785546bbce7787ca2075aa18ebc76a6d36b

Part-of: odoo/odoo#99338
This commit is contained in:
Adrien Dieudonné
2022-09-14 21:21:24 +02:00
committed by Adrien Dieudonne
parent bcce093ed3
commit cb7cf77ed0
6 changed files with 38 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/scss/base_frontend.scss
-3
View File
@@ -24,6 +24,3 @@ html, body, #wrapwrap {
flex: 1 0 auto;
}
}
.modal-open #wrapwrap {
overflow: hidden;
}
addons/web/static/src/legacy/scss/bootstrap_review.scss
Vendored
+17 -14
View File
@@ -66,21 +66,24 @@
// Modify modals so that their scrollable element is the modal-body (except in
// mobile).
// TODO: should be replaced by .modal-dialog-scrollable class
@include media-breakpoint-up(sm) {
.modal-dialog {
height: 100%;
padding: $modal-dialog-margin-y-sm-up 0;
margin: 0 auto;
}
.modal-content {
max-height: 100%;
}
.modal-header, .modal-footer {
flex: 0 0 auto;
}
.modal-body {
overflow: auto;
min-height: 0;
:not(.s_popup) > .modal {
.modal-dialog {
height: 100%;
padding: $modal-dialog-margin-y-sm-up 0;
margin: 0 auto;
}
.modal-content {
max-height: 100%;
}
.modal-header, .modal-footer {
flex: 0 0 auto;
}
.modal-body {
overflow: auto;
min-height: 0;
}
}
}
addons/website/static/src/scss/website.scss
-3
View File
@@ -1478,9 +1478,6 @@ $ribbon-padding: 100px;
// Cookies Bar
#website_cookies_bar {
:not(.o_cookies_popup) {
bottom: 0;
}
.o_cookies_discrete {
.js_close_popup.o_cookies_bar_text_button, .o_cookies_bar_text_policy {
@include media-breakpoint-down(lg) {
addons/website/static/src/snippets/s_popup/000.js
-63
View File
@@ -2,7 +2,6 @@ odoo.define('website.s_popup', function (require) {
'use strict';
const config = require('web.config');
const dom = require('web.dom');
const publicWidget = require('web.public.widget');
const utils = require('web.utils');
@@ -52,7 +51,6 @@ const PopupWidget = publicWidget.Widget.extend({
display = 'afterDelay';
delay = 5000;
}
this.$('.modal').removeClass('s_popup_middle').addClass('s_popup_bottom');
}
if (display === 'afterDelay') {
@@ -118,66 +116,5 @@ const PopupWidget = publicWidget.Widget.extend({
publicWidget.registry.popup = PopupWidget;
// Try to update the scrollbar based on the current context (modal state)
// and only if the modal overflowing has changed
function _updateScrollbar(ev) {
const context = ev.data;
const isOverflowing = dom.hasScrollableContent(context._element);
if (context._isOverflowingWindow !== isOverflowing) {
context._isOverflowingWindow = isOverflowing;
context._checkScrollbar();
context._setScrollbar();
if (isOverflowing) {
document.body.classList.add('modal-open');
} else {
document.body.classList.remove('modal-open');
context._resetScrollbar();
}
}
}
// Prevent bootstrap to prevent scrolling and to add the strange body
// padding-right they add if the popup does not use a backdrop (especially
// important for default cookie bar).
const _baseShowElement = Modal.prototype._showElement;
Modal.prototype._showElement = function () {
_baseShowElement.apply(this, arguments);
if (this._element.classList.contains('s_popup_no_backdrop')) {
// Update the scrollbar if the content changes or if the window has been
// resized. Note this could technically be done for all modals and not
// only the ones with the s_popup_no_backdrop class but that would be
// useless as allowing content scroll while a modal with that class is
// 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 });
}
};
const _baseHideModal = Modal.prototype._hideModal;
Modal.prototype._hideModal = function () {
_baseHideModal.apply(this, arguments);
// Note: do this in all cases, not only for popup with the
// s_popup_no_backdrop class, as the modal may have lost that class during
// edition before being closed.
this._element.classList.remove('s_popup_overflow_page');
$(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;
}
};
return PopupWidget;
});
addons/website/static/src/snippets/s_popup/001.scss
+21 -30
View File
@@ -1,20 +1,11 @@
.s_popup[data-vcss='001'] {
.modal-content {
min-height: $font-size-lg * 2;
max-height: none;
border: 0;
border-radius: 0;
box-shadow: $modal-content-box-shadow-sm-up;
}
.modal-dialog {
height: auto;
min-height: 100%;
@include media-breakpoint-down(sm) {
min-height: calc(100% - 2 * #{$modal-dialog-margin});
}
}
// Close icon
.s_popup_close {
z-index: $zindex-modal;
@@ -42,39 +33,39 @@
}
}
// Position option - Middle
.s_popup_middle .modal-dialog {
align-items: center;
}
// Position option - Top/Bottom
.s_popup_top,
.s_popup_bottom {
.modal-dialog {
margin-right: 0;
&:not(.s_popup_size_full) {
padding: $spacer !important;
}
// Position option
.modal-dialog {
margin: 0 0 0 auto;
min-height: 100%;
&:not(.s_popup_size_full) {
padding: $spacer !important;
}
}
.s_popup_top .modal-dialog {
align-items: flex-start;
}
.s_popup_middle .modal-dialog {
align-items: center;
margin-right: auto;
}
.s_popup_bottom .modal-dialog {
align-items: flex-end;
}
// No backdrop
.s_popup_no_backdrop {
// If the popup is taller than the page you should not be able to
// interact with the elements behind, otherwise you should (when there
// is no backdrop).
&:not(.s_popup_overflow_page) {
pointer-events: none;
}
// Allow scrolling on elements behind
pointer-events: none;
.modal-content {
pointer-events: auto;
// Allow Chrome to scroll the modal content even if there is no scroll on the document behind.
// Not needed for Firefox and Safari
.modal-dialog {
height: 100%;
.modal-content {
max-height:100%;
overflow: auto;
}
}
}
}
addons/website/static/src/snippets/s_popup/options.js
-6
View File
@@ -79,12 +79,6 @@ options.registry.SnippetPopup = options.Class.extend({
this.$bsTarget.modal('hide');
});
},
/**
* @override
*/
cleanForSave: function () {
this.$target.removeClass("s_popup_overflow_page");
},
//--------------------------------------------------------------------------
// Options