diff options
Diffstat (limited to 'addons/web_editor/static/src')
3 files changed, 30 insertions, 14 deletions
diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js index 1ed08a80792..61e8f648ee8 100644 --- a/addons/web_editor/static/src/js/common/utils.js +++ b/addons/web_editor/static/src/js/common/utils.js @@ -167,6 +167,26 @@ function _computeColorClasses(colorNames, prefix = 'bg-') { } return classes; } +/** + * @param {string} key + * @param {CSSStyleDeclaration} [htmlStyle] if not provided, it is computed + * @returns {string} + */ +function _getCSSVariableValue(key, htmlStyle) { + if (htmlStyle === undefined) { + htmlStyle = window.getComputedStyle(document.documentElement); + } + // Get trimmed value from the HTML element + let value = htmlStyle.getPropertyValue(`--${key}`).trim(); + // If it is a color value, it needs to be normalized + value = ColorpickerWidget.normalizeCSSColor(value); + // Normally scss-string values are "printed" single-quoted. That way no + // magic conversation is needed when customizing a variable: either save it + // quoted for strings or non quoted for colors, numbers, etc. However, + // Chrome has the annoying behavior of changing the single-quotes to + // double-quotes when reading them through getPropertyValue... + return value.replace(/"/g, "'"); +} return { CSS_SHORTHANDS: CSS_SHORTHANDS, @@ -178,5 +198,6 @@ return { areCssValuesEqual: _areCssValuesEqual, isColorCombinationName: _isColorCombinationName, computeColorClasses: _computeColorClasses, + getCSSVariableValue: _getCSSVariableValue, }; }); 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 285283f1fc8..daa53fb7dae 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1198,9 +1198,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({ const cssCompatible = this.options.dataAttributes.hasOwnProperty('cssCompatible'); if ((useCssColor || cssCompatible) && !ColorpickerWidget.isCSSColor(value)) { if (useCssColor) { - const style = window.getComputedStyle(document.documentElement); - value = style.getPropertyValue(`--${value}`).trim(); - value = ColorpickerWidget.normalizeCSSColor(value); + value = weUtils.getCSSVariableValue(value); } else { value = `var(--${value})`; } @@ -1840,8 +1838,7 @@ const SnippetOptionWidget = Widget.extend({ // At this point, the widget value is either a property/color name or // an actual css property value. If it is a property/color name, we will // apply a css variable as style value. - const htmlStyle = window.getComputedStyle(document.documentElement); - const htmlPropValue = htmlStyle.getPropertyValue('--' + widgetValue); + const htmlPropValue = weUtils.getCSSVariableValue(widgetValue); if (htmlPropValue) { widgetValue = `var(--${widgetValue})`; } @@ -2999,9 +2996,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({ */ _normalizeColor(color) { if (!ColorpickerWidget.isCSSColor(color)) { - const style = window.getComputedStyle(document.documentElement); - color = style.getPropertyValue('--' + color).trim(); - color = ColorpickerWidget.normalizeCSSColor(color); + color = weUtils.getCSSVariableValue(color); } return color; }, diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js index 5ed02d3a332..25e8dfa2835 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js @@ -115,7 +115,7 @@ const ColorPaletteWidget = Widget.extend({ } this.colorNames.push(colorName); if (!isCCName && !elem.classList.contains('d-none')) { - const color = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim()); + const color = weUtils.getCSSVariableValue(colorName, this.style); this.colorToColorNames[color] = colorName; } }); @@ -125,7 +125,7 @@ const ColorPaletteWidget = Widget.extend({ if (this.options.selectedColor) { let selectedColor = this.options.selectedColor; if (compatibilityColorNames.includes(selectedColor)) { - selectedColor = this.style.getPropertyValue('--' + selectedColor).trim() || selectedColor; + selectedColor = weUtils.getCSSVariableValue(selectedColor, this.style) || selectedColor; } selectedColor = ColorpickerWidget.normalizeCSSColor(selectedColor); if (selectedColor !== 'rgba(0, 0, 0, 0)') { @@ -138,7 +138,7 @@ const ColorPaletteWidget = Widget.extend({ // Colorpicker let defaultColor = this.selectedColor; if (defaultColor && !ColorpickerWidget.isCSSColor(defaultColor)) { - defaultColor = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + defaultColor).trim()); + defaultColor = weUtils.getCSSVariableValue(defaultColor, this.style); } this.colorPicker = new ColorpickerWidget(this, { defaultColor: defaultColor, @@ -175,8 +175,8 @@ const ColorPaletteWidget = Widget.extend({ }); }, }); - this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => { - const color = this.style.getPropertyValue(`--${v.substring(1, v.length - 1)}`).trim(); + weUtils.getCSSVariableValue('custom-colors', this.style).split(' ').forEach(v => { + const color = weUtils.getCSSVariableValue(v.substring(1, v.length - 1), this.style); if (ColorpickerWidget.isCSSColor(color)) { this._addCustomColor(existingColors, color); } @@ -201,7 +201,7 @@ const ColorPaletteWidget = Widget.extend({ return; } if (!ColorpickerWidget.isCSSColor(color)) { - color = this.style.getPropertyValue('--' + color).trim(); + color = weUtils.getCSSVariableValue(color, this.style); } const normColor = ColorpickerWidget.normalizeCSSColor(color); if (!existingColors.has(normColor)) { |