From a9c194f06e1772a899cc795906e6d7cfaf33bf56 Mon Sep 17 00:00:00 2001
From: "Louis (loco)" <loco@odoo.com>
Date: Thu, 4 May 2023 14:19:12 +0000
Subject: [PATCH] [FIX] *: transfer the dataset when changing background
 options target

*: web_editor, website

Steps to reproduce the bug:
- Add a Cover snippet on the website.
- Put a "Blur" filter on the background image.
- Save.
- Change the parallax from "Fixed" to "None".
- Save and edit.
=> The "Filter" option displays "None" but should display "Blur".

When changing the parallax, `setTarget()` is called. The goal of this
function is to transfer the `background-image` from the old target to
the new one. The commit modifies this function by adding the transfer of
the dataset information relative to the background image from the old
target to the new one. It also transfers the `o_modified_image_to_save`
class from the old target to the new one if needed.

task-3287330

X-original-commit: https://github.com/odoo/odoo/commit/c06f39e3b6b44ffb433e17a457bd719a52842fa0
Part-of: odoo/odoo#121682
---
 .../static/src/js/editor/snippets.options.js  | 19 ++++++-
 addons/website/static/tests/tours/parallax.js | 53 +++++++++++++++++++
 addons/website/tests/test_snippets.py         |  3 ++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 addons/website/static/tests/tours/parallax.js

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 8161efbef8b2..09ae6d5168ca 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -6168,12 +6168,29 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      */
     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.
+        // background-image and the dataset information relative to this image
+        // from the old target to the new one.
         const oldBgURL = getBgImageURL(this.$target);
+        const isModifiedImage = this.$target[0].classList.contains("o_modified_image_to_save");
+        const filteredOldDataset = Object.entries(this.$target[0].dataset).filter(([key]) => {
+            return isBackgroundImageAttribute(key);
+        });
+        // Delete the dataset information relative to the background-image of
+        // the old target.
+        filteredOldDataset.forEach(([key]) => {
+            delete this.$target[0].dataset[key];
+        });
+        // It is important to delete ".o_modified_image_to_save" from the old
+        // target as its image source will be deleted.
+        this.$target[0].classList.remove("o_modified_image_to_save");
         this._setBackground('');
         this._super(...arguments);
         if (oldBgURL) {
             this._setBackground(oldBgURL);
+            filteredOldDataset.forEach(([key, value]) => {
+                this.$target[0].dataset[key] = value;
+            });
+            this.$target[0].classList.toggle("o_modified_image_to_save", isModifiedImage);
         }
 
         // TODO should be automatic for all options as equal to the start method
diff --git a/addons/website/static/tests/tours/parallax.js b/addons/website/static/tests/tours/parallax.js
new file mode 100644
index 000000000000..58463def4923
--- /dev/null
+++ b/addons/website/static/tests/tours/parallax.js
@@ -0,0 +1,53 @@
+odoo.define("website.tour.parallax", function (require) {
+"use strict";
+
+const tour = require("web_tour.tour");
+const wTourUtils = require("website.tour_utils");
+
+const coverSnippet = {id: "s_cover", name: "Cover"};
+
+tour.register("test_parallax", {
+    test: true,
+    url: "/",
+}, [
+    ...wTourUtils.clickOnEditAndWaitEditMode(),
+    wTourUtils.dragNDrop(coverSnippet),
+    wTourUtils.clickOnSnippet(coverSnippet),
+    wTourUtils.changeOption("BackgroundOptimize", "we-toggler"),
+    wTourUtils.changeOption("BackgroundOptimize", 'we-button[data-gl-filter="blur"]'),
+{
+    content: "Check that the Cover snippet has the Blur filter on its background image",
+    trigger: ".s_cover span[data-gl-filter='blur']",
+    run: () => {}, //it's a check
+},
+    wTourUtils.changeOption("Parallax", "we-toggler"),
+    wTourUtils.changeOption("Parallax", 'we-button[data-select-data-attribute="0"]'),
+{
+    content: "Check that the data related to the filter have been transferred to the new target",
+    trigger: ".s_cover[data-gl-filter='blur']",
+    run: () => {}, //it's a check
+},
+{
+    content: "Check that the 'o_modified_image_to_save' class has been transferred to the new target",
+    trigger: ".s_cover.o_modified_image_to_save",
+    run: () => {}, //it's a check
+},
+    wTourUtils.changeOption("Parallax", "we-toggler"),
+    wTourUtils.changeOption("Parallax", 'we-button[data-select-data-attribute="1"]'),
+{
+    content: "Check that the 'o_modified_image_to_save' class has been deleted from the old target",
+    trigger: ".s_cover:not(.o_modified_image_to_save)",
+    run: () => {}, //it's a check
+},
+{
+    content: "Check that the 'o_modified_image_to_save' class has been transferred to the new target",
+    trigger: "span.s_parallax_bg.o_modified_image_to_save",
+    run: () => {}, //it's a check
+},
+{
+    content: "Check that the data related to the filter have been transferred to the new target",
+    trigger: "span.s_parallax_bg[data-gl-filter='blur']",
+    run: () => {}, //it's a check
+},
+]);
+});
diff --git a/addons/website/tests/test_snippets.py b/addons/website/tests/test_snippets.py
index ad650f7a258d..a58f07a44891 100644
--- a/addons/website/tests/test_snippets.py
+++ b/addons/website/tests/test_snippets.py
@@ -56,3 +56,6 @@ class TestSnippets(odoo.tests.HttpCase):
 
     def test_07_snippet_images_wall(self):
         self.start_tour('/', 'snippet_images_wall', login='admin')
+
+    def test_08_parallax(self):
+        self.start_tour('/', 'test_parallax', login='admin')
-- 
GitLab