[IMP] website: implement body image as a SCSS variable

This is unfortunately replacing old hacks by new ones but using SCSS
variables for this is more consistent with the rest of our website
customization possibilities.

The hack here is for the UI which is controlling two SCSS variables at
the same time (body-image and body-image-type). This has to be improved.

closes odoo/odoo#56420

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 34 insertions, 44 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 548172fd0a1..6b4c5414fe1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -782,43 +782,25 @@ options.registry.OptionsTab = options.Class.extend({
         });
     },
     /**
-     * @todo use scss customization instead (like for user colors)
      * @see this.selectClass for parameters
      */
-    async customizeBodyBg(previewMode, widgetValue, params) {
-        const xmlID = 'website.option_custom_body_image';
-        if (widgetValue) {
-            await this._rpc({
-                model: 'ir.model.data',
-                method: 'get_object_reference',
-                args: xmlID.split('.'),
-            }).then(data => {
-                return this._rpc({
-                    model: 'ir.ui.view',
-                    method: 'save',
-                    args: [
-                        data[1],
-                        `#wrapwrap { background-image: url("${widgetValue}"); }`,
-                        '//style',
-                    ],
-                });
-            });
-        } else {
-            await this._customizeWebsiteViews('', {possibleValues: ['', xmlID]});
+    async customizeBodyBgType(previewMode, widgetValue, params) {
+        if (widgetValue === 'NONE') {
+            this.bodyImageType = 'image';
+            return this.customizeBodyBg(previewMode, '', params);
         }
-
-        await this._reloadBundles();
+        // TODO improve: hack to click on external image picker
+        this.bodyImageType = widgetValue;
+        const widget = this._requestUserValueWidgets(params.imagepicker)[0];
+        widget.$el.click();
     },
     /**
-     * @see this.selectClass for parameters
+     * @override
      */
-    async enableImagepicker(previewMode, widgetValue, params) {
-        if (widgetValue) {
-            // TODO improve: here we make a hack so that a hidden imagepicker
-            // widget opens...
-            const widget = this._requestUserValueWidgets(widgetValue)[0];
-            widget.$el.click();
-        }
+    async customizeBodyBg(previewMode, widgetValue, params) {
+        // TODO improve: customize two variables at the same time...
+        await this.customizeWebsiteVariable(previewMode, this.bodyImageType, {variable: 'body-image-type'});
+        await this.customizeWebsiteVariable(previewMode, widgetValue ? `'${widgetValue}'` : '', {variable: 'body-image'});
     },
     /**
      * @see this.selectClass for parameters
@@ -940,10 +922,12 @@ options.registry.OptionsTab = options.Class.extend({
      * @override
      */
     async _computeWidgetState(methodName, params) {
-        if (methodName === 'customizeBodyBg') {
-            const bgURL = $('#wrapwrap').css('background-image');
-            const srcValueWrapper = /url\(['"]*|['"]*\)|^none$/g;
-            return bgURL && bgURL.replace(srcValueWrapper, '') || '';
+        if (methodName === 'customizeBodyBgType') {
+            const bgImage = $('#wrapwrap').css('background-image');
+            if (bgImage === 'none') {
+                return "NONE";
+            }
+            return weUtils.getCSSVariableValue('body-image-type');
         }
         return this._super(...arguments);
     },
diff --git a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss b/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
deleted file mode 100644
index 1e75db342be..00000000000
--- a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-#wrapwrap {
-    background-size: auto;
-    background-repeat: repeat;
-}
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 3351c9da5ec..c4c6d80a446 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -244,6 +244,9 @@ $o-base-website-values-palette: (
     'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files
     'google-fonts': null,
 
+    'body-image': null,
+    'body-image-type': 'image', // 'image' or 'pattern'
+
     'color-palettes-number': null, // Default to the individual variables for each color palette type
 
     'btn-primary-outline': false,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6b2421d3b4f..a4c517cb1b3 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -59,10 +59,18 @@ $-seen-urls: ();
 }
 
 #wrapwrap {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-attachment: fixed;
+    @if o-website-value('body-image') {
+        background-image: url("/#{str-slice(o-website-value('body-image'), 2)}");
+        background-position: center;
+        background-attachment: fixed;
+        @if o-website-value('body-image-type') == 'pattern' {
+            background-size: auto;
+            background-repeat: repeat;
+        } @else {
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+    }
 
     @if ($o-theme-layout == 'boxed') {
         @include media-breakpoint-up(md) {