[IMP] web_editor: add default opt selectAttribute

Add default option selectAttribute
Most of the logic is shared with selectDataAttribute

part of: https://github.com/odoo/odoo/pull/45397

task-2197008

1 files changed, 48 insertions, 16 deletions

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 060347f00e1..9586cd2d361 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1531,18 +1531,22 @@ const SnippetOptionWidget = Widget.extend({
      * @returns {Promise|undefined}
      */
     selectDataAttribute: function (previewMode, widgetValue, params) {
-        const dataName = params.attributeName;
-        if (dataName) {
-            if (params.saveUnit && !params.withUnit) {
-                // Values that come with an unit are saved without unit as
-                // data-attribute unless told otherwise.
-                widgetValue = widgetValue.split(params.saveUnit).join('');
-            }
-            this.$target[0].dataset[dataName] = widgetValue;
-        }
-        if (params.extraClass) {
-            this.$target.toggleClass(params.extraClass, params.defaultValue !== widgetValue);
-        }
+        const value = this._selectAttributeHelper(widgetValue, params);
+        this.$target[0].dataset[params.attributeName] = value;
+    },
+    /**
+     * Default option method which allows to select a value and set it on the
+     * associated snippet as an attribute. The name of the attribute is
+     * given by the attributeName parameter.
+     *
+     * @param {boolean} previewMode - @see this.selectClass
+     * @param {string} widgetValue
+     * @param {Object} params
+     * @returns {Promise|undefined}
+     */
+    selectAttribute: function (previewMode, widgetValue, params) {
+        const value = this._selectAttributeHelper(widgetValue, params);
+        this.$target[0].setAttribute(params.attributeName, value);
     },
     /**
      * Default option method which allows to select a value and set it on the
@@ -1847,13 +1851,20 @@ const SnippetOptionWidget = Widget.extend({
                 });
                 return activeClassNames;
             }
+            case 'selectAttribute':
             case 'selectDataAttribute': {
-                const dataName = params.attributeName;
-                let dataValue = (this.$target[0].dataset[dataName] || '').trim();
+                const attrName = params.attributeName;
+                let attrValue;
+                if (methodName === 'selectAttribute') {
+                    attrValue = this.$target[0].getAttribute(attrName);
+                } else if (methodName === 'selectDataAttribute') {
+                    attrValue = this.$target[0].dataset[attrName];
+                }
+                attrValue = (attrValue || '').trim();
                 if (params.saveUnit && !params.withUnit) {
-                    dataValue = dataValue.split(/\s+/g).map(v => v + params.saveUnit).join(' ');
+                    attrValue = attrValue.split(/\s+/g).map(v => v + params.saveUnit).join(' ');
                 }
-                return dataValue || params.attributeDefaultValue || '';
+                return attrValue || params.attributeDefaultValue || '';
             }
             case 'selectStyle': {
                 if (params.colorPrefix && params.colorNames) {
@@ -2079,6 +2090,27 @@ const SnippetOptionWidget = Widget.extend({
             }
         }
     },
+    /**
+     * Used to handle attribute or data attribute value change
+     *
+     * @param {string} value
+     * @param {Object} params
+     * @returns {string|undefined}
+     */
+    _selectAttributeHelper(value, params) {
+        if (!params.attributeName) {
+            throw new Error('Attribute name missing');
+        }
+        if (params.saveUnit && !params.withUnit) {
+            // Values that come with an unit are saved without unit as
+            // data-attribute unless told otherwise.
+            value = value.split(params.saveUnit).join('');
+        }
+        if (params.extraClass) {
+            this.$target.toggleClass(params.extraClass, params.defaultValue !== value);
+        }
+        return value;
+    },
 
     //--------------------------------------------------------------------------
     // Handlers