From e200eb2813f79424fcb2ad8c5072bb4624f97a98 Mon Sep 17 00:00:00 2001 From: "Robin Lejeune (role)" Date: Tue, 6 Jun 2023 15:33:10 +0000 Subject: [PATCH] [FIX] website_editor: use background image on the right element Commit [1] addressed the following situation: when we have a parallax on an element, it adds the background on a `` child of said element instead of applying it directly on the element. Retargeting the `` is needed to display all the options linked to the background image. Following [1], building blocks whose children are allowed to have a background image are also applied their 1st child's background when one of their children's background is modified. This happens because, when changing the background of a child item, `BackgroundOptimize` is called both on the child and on the main snippet due to `_onBackgroundChanged()` bubbling up and `_loadImageInfo()` targetting any child in the tree with the class `.oe_img_bg`. This commit prevents `_onBackgroundChanged()` from bubbling up and modifies the behavior from [1] by making sure the element identified as the target within `_loadImageInfo()` can only be either the original target or the parallax element. Steps to reproduce: - Drop a carousel building block - Change its style to bordered - Change the background image of the 2nd slide => the background of the entire snippet is also changed. It is then impossible to remove the image on the snippet. [1]: https://github.com/odoo/odoo/commit/31ba906 task-3349669 closes odoo/odoo#127756 X-original-commit: ab0ae8dadf55baa258d733835acc3a12771932be Signed-off-by: Outagant Mehdi (mou) --- .../web_editor/static/src/js/editor/snippets.options.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 feafcd135c3..4cde497dfe4 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -6567,8 +6567,13 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({ */ async _loadImageInfo() { this.img = new Image(); + // In the case of a parallax, the background of the snippet is actually + // set on a child and should be focused here. This is necessary + // because, at this point, the $target has not yet been updated in the + // notify() method ("option_update" event), although the event is + // properly fired from the parallax. const targetEl = this.$target[0].classList.contains("oe_img_bg") - ? this.$target[0] : this.$target[0].querySelector(".oe_img_bg"); + ? this.$target[0] : this.$target[0].querySelector(":scope > .s_parallax_bg.oe_img_bg"); if (targetEl) { Object.entries(targetEl.dataset).filter(([key]) => isBackgroundImageAttribute(key)).forEach(([key, value]) => { @@ -6626,6 +6631,7 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({ * @private */ async _onBackgroundChanged(ev, previewMode) { + ev.stopPropagation(); if (!previewMode) { this.trigger_up('snippet_edition_request', {exec: async () => { await this._autoOptimizeImage();