[IMP] web_editor, website, *: create background-type toggler option

*: website_blog

Previously, background colors, images, and videos could all be applied
on the same section, such that the image can be used as a fallback for
the video, and the color as a fallback for the image. However, if you
wanted to change the background color behind the background image, the
background image would be removed. The background image and background
video also shared the same widget to pick the image or video.

This commit adds a background-type toggler, where the user can toggle
the background color, image and video individually. It also makes the
video picker into its own UserValueWidget, such that the user can pick
both an image and video without overriding the other.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790

1 files changed, 60 insertions, 38 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index be7a55f8111..c7dc9f75f98 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -626,16 +626,62 @@ options.Class.include({
     },
 });
 
-options.registry.BackgroundImage.include({
-    background: async function (previewMode, widgetValue, params) {
-        if (previewMode === 'reset' && this.videoSrc) {
-            return this._setBgVideo(false, this.videoSrc);
+options.registry.BackgroundToggler.include({
+    /**
+     * Toggles background video on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgVideo(previewMode, widgetValue, params) {
+        if (!widgetValue) {
+            // TODO: use setWidgetValue instead of calling background directly when possible
+            const [bgVideoWidget] = this._requestUserValueWidgets('bg_video_opt');
+            const bgVideoOpt = bgVideoWidget.getParent();
+            return bgVideoOpt._setBgVideo(false, '');
+        } else {
+            // TODO: use trigger instead of el.click when possible
+            this._requestUserValueWidgets('bg_video_opt')[0].el.click();
         }
+    },
 
-        const _super = this._super.bind(this);
-        if (!params.isVideo) {
-            await this._setBgVideo(previewMode, '');
-            return _super(...arguments);
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'toggleBgVideo') {
+            return this.$target[0].classList.contains('o_background_video');
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'bg_video_toggler_opt') {
+            return !this.$target.is('.parallax, .s_parallax_bg');
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.BackgroundVideo = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Sets the target's background video.
+     *
+     * @see this.selectClass for parameters
+     */
+    background: function (previewMode, widgetValue, params) {
+        if (previewMode === 'reset' && this.videoSrc) {
+            return this._setBgVideo(false, this.videoSrc);
         }
         return this._setBgVideo(previewMode, widgetValue);
     },
@@ -647,9 +693,12 @@ options.registry.BackgroundImage.include({
     /**
      * @override
      */
-    _computeWidgetState: function (methodName) {
-        if (methodName === 'background' && this.$target[0].classList.contains('o_background_video')) {
-            return this.$('> .o_bg_video_container iframe').attr('src');
+    _computeWidgetState: function (methodName, params) {
+        if (methodName === 'background') {
+            if (this.$target[0].classList.contains('o_background_video')) {
+                return this.$('> .o_bg_video_container iframe').attr('src');
+            }
+            return '';
         }
         return this._super(...arguments);
     },
@@ -677,33 +726,6 @@ options.registry.BackgroundImage.include({
         }
         await this._refreshPublicWidgets();
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-     _onBackgroundColorUpdate: async function (ev, previewMode) {
-        const ret = await this._super(...arguments);
-        if (ret) {
-            this._setBgVideo(previewMode, '');
-        }
-        return ret;
-    },
-});
-
-options.registry.BackgroundOptimize.include({
-    /**
-     * @override
-     */
-    _computeVisibility() {
-        if (this.$target.hasClass('o_background_video')) {
-            return false;
-        }
-        return this._super(...arguments);
-    },
 });
 
 options.registry.OptionsTab = options.Class.extend({