[IMP] web_editor: add new way to edit data-* on a target

Now, the editor UI can suggest options the same way as select-class but
for editing a data attribute.

Note: the public widgets are now refreshed on data attribute changes
through the select-data-attribute and set-data-attribute methods.

Part of https://github.com/odoo/odoo/pull/40282
In preparation of task-2122935 and other tasks

1 files changed, 38 insertions, 0 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 7667291ca0b..509fa04089f 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -295,6 +295,27 @@ var SnippetOption = Widget.extend({
         }
     },
     /**
+     * Default option method which allows to select one and only one value in
+     * the option values set and set it on the associated snippet as a data
+     * attribute. The name of the data attribute is given by the closest
+     * ancestor's data value for 'attributeName'.
+     *
+     * @param {boolean} previewMode - @see this.selectClass
+     * @param {Object} value - the data attribute value to set
+     * @param {jQuery} $opt - the related DOMElement option
+     */
+    selectDataAttribute: function (previewMode, value, $opt) {
+        const $ancestor = $opt && $opt.closest('[data-attribute-name]');
+        if (!$ancestor || !$ancestor.length) {
+            return;
+        }
+        const dataName = $ancestor[0].dataset.attributeName;
+        if (!dataName) {
+            return;
+        }
+        this.$target[0].dataset[dataName] = value || '';
+    },
+    /**
      * Default option method which allows to select one or multiple classes in
      * the option classes set and set it on the associated snippet. The common
      * case is having a sub-collapse with each item having a `data-toggle-class`
@@ -528,6 +549,23 @@ var SnippetOption = Widget.extend({
                 .addClass('active');
         }
 
+        // --- SELECT DATA ATTRIBUTE ---
+
+        this.$el.find('[data-select-data-attribute]')
+            .removeClass('active')
+            .filter((i, el) => {
+                const ancestorEl = el.closest('[data-attribute-name]');
+                if (!ancestorEl) {
+                    return false;
+                }
+                const dataName = ancestorEl.dataset.attributeName;
+                const defaultValue = ancestorEl.dataset.attributeDefaultValue;
+                const dataValue = el.dataset.selectDataAttribute;
+                const targetValue = this.$target[0].dataset[dataName] || defaultValue;
+                return (!targetValue && !dataValue) || targetValue === dataValue;
+            })
+            .addClass('active');
+
         // --- SET DATA ATTRIBUTE --- (note: important to be done last because of active removal)
 
         this.el.querySelectorAll('[data-set-data-attribute]').forEach(el => {