[IMP] web_editor, website: add background shapes snippet option

This commit adds a new snippet option allowing the user to choose one of
a series of SVG shapes as their background, or to be overlaid over the
background image of a snippet and to customize the colors of those
shapes.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790

closes odoo/odoo#53017

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 15 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index aaa02c58589..c66bb75a47c 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -200,6 +200,20 @@ function _normalizeColor(color) {
     }
     return _getCSSVariableValue(color);
 }
+/**
+ * Parse an element's background-image's url.
+ *
+ * @param {string} string a css value in the form 'url("...")'
+ * @returns {string|false} the src of the image or false if not parsable
+ */
+function _getBgImageURL(el) {
+    const string = $(el).css('background-image');
+    const match = string.match(/^url\((['"])(.*?)\1\)$/);
+    if (!match) {
+        return '';
+    }
+    return match[2];
+}
 
 return {
     CSS_SHORTHANDS: CSS_SHORTHANDS,
@@ -213,5 +227,6 @@ return {
     computeColorClasses: _computeColorClasses,
     getCSSVariableValue: _getCSSVariableValue,
     normalizeColor: _normalizeColor,
+    getBgImageURL: _getBgImageURL,
 };
 });