diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js index 110ab83add4c208b9cf9175dbe0941dba1ecbaa2..4b9b7c3d5a47fec0229a32796d0c282f8c750675 100644 --- a/addons/web_editor/static/src/js/common/utils.js +++ b/addons/web_editor/static/src/js/common/utils.js @@ -47,6 +47,13 @@ const DEFAULT_PALETTE = { '4': '#FFFFFF', '5': '#383E45', }; +/** + * Set of all the data attributes relative to the background images. + */ +const BACKGROUND_IMAGE_ATTRIBUTES = new Set([ + "originalId", "originalSrc", "mimetype", "resizeWidth", "glFilter", "quality", "bgSrc", + "filterOptions", +]); /** * Computes the number of "px" needed to make a "rem" unit. Subsequent calls @@ -350,6 +357,24 @@ function _getColorClass(el, colorNames, prefix) { const prefixedColorNames = _computeColorClasses(colorNames, prefix); return el.classList.value.split(' ').filter(cl => prefixedColorNames.includes(cl)).join(' '); } +/** + * Add one or more new attributes related to background images in the + * BACKGROUND_IMAGE_ATTRIBUTES set. + * + * @param {...string} newAttributes The new attributes to add in the + * BACKGROUND_IMAGE_ATTRIBUTES set. + */ +function _addBackgroundImageAttributes(...newAttributes) { + BACKGROUND_IMAGE_ATTRIBUTES.add(...newAttributes); +} +/** + * Check if an attribute is in the BACKGROUND_IMAGE_ATTRIBUTES set. + * + * @param {string} attribute The attribute that has to be checked. + */ +function _isBackgroundImageAttribute(attribute) { + return BACKGROUND_IMAGE_ATTRIBUTES.has(attribute); +} return { CSS_SHORTHANDS: CSS_SHORTHANDS, @@ -369,5 +394,7 @@ return { backgroundImageCssToParts: _backgroundImageCssToParts, backgroundImagePartsToCss: _backgroundImagePartsToCss, getColorClass: _getColorClass, + addBackgroundImageAttributes: _addBackgroundImageAttributes, + isBackgroundImageAttribute: _isBackgroundImageAttribute, }; }); 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 f87dbf81e4d59a5494c104bca3c114a0a65a9aa0..324cd5822498fee1dfbfdb7280f8cf1c1387fc1f 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -17,6 +17,7 @@ const { backgroundImageCssToParts, backgroundImagePartsToCss, DEFAULT_PALETTE, + isBackgroundImageAttribute, } = weUtils; var weWidgets = require('wysiwyg.widgets'); const { @@ -5919,15 +5920,18 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({ */ async _loadImageInfo() { this.img = new Image(); - Object.entries(this.$target[0].dataset).filter(([key]) => - // Avoid copying dynamic editor attributes - !['oeId','oeModel', 'oeField', 'oeXpath', 'noteId'].includes(key) - ).forEach(([key, value]) => { - this.img.dataset[key] = value; - }); - const src = getBgImageURL(this.$target[0]); - // Don't set the src if not relative (ie, not local image: cannot be modified) - this.img.src = src.startsWith('/') ? src : ''; + const targetEl = this.$target[0].classList.contains("oe_img_bg") + ? this.$target[0] : this.$target[0].querySelector(".oe_img_bg"); + if (targetEl) { + Object.entries(targetEl.dataset).filter(([key]) => + isBackgroundImageAttribute(key)).forEach(([key, value]) => { + this.img.dataset[key] = value; + }); + const src = getBgImageURL(targetEl); + // Don't set the src if not relative (ie, not local image: cannot be + // modified) + this.img.src = src.startsWith("/") ? src : ""; + } return await this._super(...arguments); }, /**