[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#56496

X-original-commit: 6b400c433b352d7dbba0d3770600857df4872c50
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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);
     },

addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss

@@ -1,5 +0,0 @@
-
-#wrapwrap {
-    background-size: auto;
-    background-repeat: repeat;
-}

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,

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) {

addons/website/views/snippets/snippets.xml

@@ -886,18 +886,17 @@
             <we-colorpicker data-dependencies="!layout_full_opt"
                             data-customize-website-color=""
                             data-color="body"/>
-            <we-button-group>
+            <we-button-group data-imagepicker="body_bg_image_opt">
                 <we-button title="Image"
-                           data-customize-website-views="website.option_custom_body_image"
-                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-camera"/></we-button>
+                           data-customize-body-bg-type="'image'"><i class="fa fa-fw fa-camera"/></we-button>
                 <we-button title="Pattern"
-                           data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern"
-                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-th"/></we-button>
+                           data-customize-body-bg-type="'pattern'"><i class="fa fa-fw fa-th"/></we-button>
                 <we-button title="None"
-                           data-customize-website-views=""><i class="fa fa-fw fa-ban"/></we-button>
+                           data-customize-body-bg-type="NONE"><i class="fa fa-fw fa-ban"/></we-button>
             </we-button-group>
             <!-- Hidden imagepicker enabled by above button-group -->
-            <we-imagepicker data-name="body_bg_image_opt" data-customize-body-bg=""/>
+            <we-imagepicker data-name="body_bg_image_opt"
+                            data-customize-body-bg=""/>
         </we-row>
         <we-input string="Font size"
                   data-customize-website-variable="null"

addons/website/views/website_templates.xml

@@ -728,20 +728,6 @@
     </xpath>
 </template>
 
-<template id="option_custom_body_image" inherit_id="website.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <style>
-            <!-- Patched by JS option -->
-        </style>
-    </xpath>
-</template>
-
-<template id="option_custom_body_pattern" inherit_id="website.assets_frontend" active="False">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/layout/option_custom_body_pattern.scss"/>
-    </xpath>
-</template>
-
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>