[IMP] website, *: enable the parallax option for all snippets

*: web_editor, website_blog

Unfortunately, this feature revealed a new batch of flaws in the
editor widgets system so some hacks were made to make it work. We will
always have the time to improve the pure technical side later.

This commit also separates the notion of color filter from the notion
of parallax. A color filter can now be applied independantly, when
there is either a background image or a background video. Applying a
color filter on top of a background video is actually a new feature.
Applying a color filter on top of a background image is actually now
achievable by two different ways: this new color filter layer or by
applying the color transformation on the image itself via the related
option. Depending on the user case, both could make sense at the same
time, but more importantly: having a CSS color filter is useful for
using those for default Odoo content (e.g. like the current contact us
page where we use a cover banner with an image with a black filter on
top of it: doing that without CSS color filter would mean to alter the
image directly which would not be ok when the user changes the image).
Also, sometimes you want the unfiltered image on a page and the exact
same one but filtered on another (for example: forum images).

Note: this commit also "fixes" an issue: the optimization feature for
images when parallax was enabled was not available before.

Part of https://github.com/odoo/odoo/pull/47313
task-46147

3 files changed, 136 insertions, 21 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index e752d07f66c..d8e35365174 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3265,6 +3265,20 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
 });
 
 registry.BackgroundToggler = SnippetOptionWidget.extend({
+    /**
+     * @override
+     */
+    start() {
+        this.$target.on('content_changed.BackgroundToggler', this._onExternalUpdate.bind(this));
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        this.$target.off('.BackgroundToggler');
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -3298,6 +3312,25 @@ registry.BackgroundToggler = SnippetOptionWidget.extend({
         // TODO: use setWidgetValue instead of calling shapeOption method directly when possible
         return shapeOption._toggleShape();
     },
+    /**
+     * Toggles background filter on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgFilter(previewMode, widgetValue, params) {
+        if (widgetValue) {
+            const bgFilterEl = document.createElement('div');
+            bgFilterEl.classList.add('o_we_bg_filter', 'bg-black-50');
+            const lastBackgroundEl = this._getLastPreFilterLayerElement();
+            if (lastBackgroundEl) {
+                $(lastBackgroundEl).after(bgFilterEl);
+            } else {
+                this.$target.prepend(bgFilterEl);
+            }
+        } else {
+            this.$target.find('.o_we_bg_filter').remove();
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -3313,6 +3346,9 @@ registry.BackgroundToggler = SnippetOptionWidget.extend({
                 const bgImageOpt = bgImageWidget.getParent();
                 return !!bgImageOpt._computeWidgetState('background', bgImageWidget.getMethodsParams('background'));
             }
+            case 'toggleBgFilter': {
+                return this._hasBgFilter();
+            }
             case 'toggleBgShape': {
                 const [shapeWidget] = this._requestUserValueWidgets('bg_shape_opt');
                 const shapeOption = shapeWidget.getParent();
@@ -3321,6 +3357,38 @@ registry.BackgroundToggler = SnippetOptionWidget.extend({
         }
         return this._super(...arguments);
     },
+    /**
+     * @private
+     */
+    _getLastPreFilterLayerElement() {
+        return null;
+    },
+    /**
+     * @private
+     * @returns {Boolean}
+     */
+    _hasBgFilter() {
+        return !!this.$target.find('> .o_we_bg_filter').length;
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onExternalUpdate() {
+        if (this._hasBgFilter()
+                && !this._getLastPreFilterLayerElement()
+                && !getBgImageURL(this.$target)) {
+            // No 'pre-filter' background layout anymore and no more background
+            // image: remove the background filter option.
+            // TODO there probably is a better system to implement to do that
+            const widget = this._requestUserValueWidgets('bg_filter_toggle_opt')[0];
+            widget.$el.click();
+        }
+    },
 });
 
 /**
@@ -3353,13 +3421,7 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
             this.__customImageSrc = widgetValue;
         }
 
-        if (widgetValue) {
-            this.$target.css('background-image', `url('${widgetValue}')`);
-            this.$target.addClass('oe_img_bg');
-        } else {
-            this.$target.css('background-image', '');
-            this.$target.removeClass('oe_img_bg');
-        }
+        this._setBackground(widgetValue);
 
         if (previewMode !== 'reset') {
             removeOnImageChangeAttrs.forEach(attr => delete this.$target[0].dataset[attr]);
@@ -3375,7 +3437,15 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      * @override
      */
     setTarget: function () {
+        // When we change the target of this option we need to transfer the
+        // background-image from the old target to the new one.
+        const oldBgURL = getBgImageURL(this.$target);
+        this._setBackground('');
         this._super(...arguments);
+        if (oldBgURL) {
+            this._setBackground(oldBgURL);
+        }
+
         // TODO should be automatic for all options as equal to the start method
         this.__customImageSrc = getBgImageURL(this.$target[0]);
     },
@@ -3393,6 +3463,19 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
         }
         return this._super(...arguments);
     },
+    /**
+     * @private
+     * @param {string} backgroundURL
+     */
+    _setBackground(backgroundURL) {
+        if (backgroundURL) {
+            this.$target.css('background-image', `url('${backgroundURL}')`);
+            this.$target.addClass('oe_img_bg');
+        } else {
+            this.$target.css('background-image', '');
+            this.$target.removeClass('oe_img_bg');
+        }
+    },
 });
 
 /**
@@ -3574,10 +3657,11 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
         }
         if (!shapeContainer) {
             shapeContainer = document.createElement('div');
-            target.prepend(shapeContainer);
-            if (shapeContainer.nextElementSibling.matches('.s_parallax_bg')) {
-                // Move parallax before shape so it shows on top.
-                target.prepend(shapeContainer.nextElementSibling);
+            const preShapeLayerElement = this._getLastPreShapeLayerElement();
+            if (preShapeLayerElement) {
+                $(preShapeLayerElement).after(shapeContainer);
+            } else {
+                target.prepend(shapeContainer);
             }
             target.style.position = 'relative';
         }
@@ -3610,6 +3694,16 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
         }
     },
     /**
+     * @private
+     */
+    _getLastPreShapeLayerElement() {
+        const $filterEl = this.$target.find('> .o_we_bg_filter');
+        if ($filterEl.length) {
+            return $filterEl[0];
+        }
+        return null;
+    },
+    /**
      * Returns the src of the shape corresponding to the current parameters.
      *
      * @private
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index b2fb1ef821e..0cd22143290 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -708,3 +708,33 @@ blockquote {
     @include bg-variant(".bg-#{$-color-name}", $-color);
     @include text-emphasis-variant(".text-#{$-color-name}", $-color);
 }
+
+// Base snippet rules
+%o-we-background-layer-parent {
+    &, & > * {
+        // Allow background layers to be placed accordingly and snippet content
+        // to be displayed on top. Note: we cannot just position the layers
+        // with z-index: -1, otherwise it would go under the snippet own
+        // background. Adding a z-index: 0 on the snippet to create its own
+        // stacking context won't solve that either as, in that case, any BS
+        // component inside would be using that stacking context (e.g. a
+        // dropdown inside snippet 1 of the page would go under snippet 2
+        // when opened since the dropdown z-index would be confined into
+        // snippet 1's stacking context.
+        position: relative;
+    }
+}
+%o-we-background-layer {
+    @include o-position-absolute(0, 0, 0, 0);
+    display: block;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    pointer-events: none;
+}
+
+section {
+    @extend %o-we-background-layer-parent;
+}
+.o_we_bg_filter {
+    @extend %o-we-background-layer;
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 172ab7fbe22..37ce7b974eb 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -33,16 +33,8 @@
 }
 
 // Background shapes
-[data-oe-shape-data] > * {
-    position: relative;
-}
-
 .o_we_shape {
-    @include o-position-absolute(0,0,0,0);
-    // position: absolute needs to be !important otherwise
-    // some classes (video background) override it with position: relative
-    position: absolute !important;
-    background-repeat: no-repeat;
+    @extend %o-we-background-layer;
 
     @each $module, $shapes in $o-bg-shapes {
         @each $shape, $style in $shapes {
@@ -68,7 +60,6 @@
         }
     }
 }
-
 .o_we_flip_x {
     transform: scaleX(-1);
 }