From 4e090b2a5ef71d45c4b5034230a6e12b5ec1e6ba Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 3 Oct 2017 09:56:26 +0200
Subject: [PATCH] [FIX] web_editor: properly reset to custom background option

This commit solves a bug when using custom background option: if a
custom background was selected, then hovering a non-custom background
and leaving the dropdown was selecting the non-custom background for
good instead of resetting back to the custom one. This is because the
custom background option is a non-preview one (you have to click) so
there should not be any need of resetting... except that the non-custom
background option is a preview one and messes with the same DOM
attributes as the custom background option.
---
 .../static/src/js/editor/snippets.options.js  | 53 ++++++++++++++-----
 1 file changed, 41 insertions(+), 12 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 fbcf364a057..08694882603 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -827,6 +827,7 @@ registry.background = SnippetOption.extend({
     start: function () {
         var res = this._super.apply(this, arguments);
         this.bindBackgroundEvents();
+        this.__customImageSrc = this._getSrcFromCssValue();
         return res;
     },
 
@@ -840,9 +841,16 @@ registry.background = SnippetOption.extend({
      * @see this.selectClass for parameters
      */
     background: function (previewMode, value, $li) {
+        if (previewMode === 'reset' && value === undefined) {
+            // No background has been selected and we want to reset back to the
+            // original custom image
+            this._setCustomBackground(this.__customImageSrc);
+            return;
+        }
+
         if (value && value.length) {
             this.$target.css('background-image', 'url(\'' + value + '\')');
-            this.$target.addClass('oe_img_bg');
+            this.$target.removeClass('oe_custom_bg').addClass('oe_img_bg');
         } else {
             this.$target.css('background-image', '');
             this.$target.removeClass('oe_img_bg oe_custom_bg');
@@ -868,11 +876,7 @@ registry.background = SnippetOption.extend({
         _editor.$('[href="#editor-media-video"], [href="#editor-media-icon"]').addClass('hidden');
 
         _editor.on('save', this, function () {
-            var value = $image.attr('src');
-            this.background(previewMode, value, $li);
-            this.$target.addClass('oe_custom_bg');
-            this._setActive();
-            this.$target.trigger('snippet-option-change', [this]);
+            this._setCustomBackground($image.attr('src'));
         });
         _editor.on('closed', this, function () {
             $image.remove();
@@ -907,17 +911,27 @@ registry.background = SnippetOption.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Returns the src value from a css value related to a background image
+     * (e.g. "url('blabla')" => "blabla" / "none" => "").
+     *
+     * @private
+     * @param {string} value
+     * @returns {string}
+     */
+    _getSrcFromCssValue: function (value) {
+        if (value === undefined) {
+            value = this.$target.css('background-image');
+        }
+        return value.replace(/url\(['"]*|['"]*\)|^none$/g, '');
+    },
     /**
      * @override
      */
     _setActive: function () {
         this._super.apply(this, arguments);
 
-        var src = this.$target.css('background-image').replace(/url\(['"]*|['"]*\)|^none$/g, '');
-        if (this.$target.hasClass('oe_custom_bg')) {
-            this.$el.find('li[data-choose-image]').data('background', src).attr('data-background', src);
-        }
-
+        var src = this._getSrcFromCssValue();
         this.$el.find('li[data-background]')
             .removeClass('active')
             .filter(function () {
@@ -925,7 +939,22 @@ registry.background = SnippetOption.extend({
                 return (bgOption === '' && src === '' || bgOption !== '' && src.indexOf(bgOption) >= 0);
             })
             .addClass('active');
-    }
+
+        this.$el.find('li[data-choose-image]').toggleClass('active', this.$target.hasClass('oe_custom_bg'));
+    },
+    /**
+     * Sets the given value as custom background image.
+     *
+     * @private
+     * @param {string} value
+     */
+    _setCustomBackground: function (value) {
+        this.__customImageSrc = this._getSrcFromCssValue(value);
+        this.background(false, this.__customImageSrc);
+        this.$target.addClass('oe_custom_bg');
+        this._setActive();
+        this.$target.trigger('snippet-option-change', [this]);
+    },
 });
 
 /**