[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

5 files changed, 77 insertions, 83 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 => {
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index d159c10ee16..2d5747e57e3 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -9,9 +9,29 @@ var options = require('web_editor.snippets.options');
 var _t = core._t;
 var qweb = core.qweb;
 
+// TODO should we refresh public widgets for all option changes by default ?
 options.Class.include({
 
     //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    setDataAttribute: function (previewMode, dataName, $opt) {
+        this._super(...arguments);
+        this._refreshPublicWidgets();
+    },
+    /**
+     * @override
+     */
+    selectDataAttribute: function (previewMode, value, $opt) {
+        this._super(...arguments);
+        this._refreshPublicWidgets();
+    },
+
+    //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
@@ -690,33 +710,6 @@ options.registry.parallax = options.Class.extend({
     onMove: function () {
         this._refreshPublicWidgets();
     },
-
-    //--------------------------------------------------------------------------
-    // Options
-    //--------------------------------------------------------------------------
-
-    /**
-     * Changes the scrolling speed of the parallax effect.
-     *
-     * @see this.selectClass for parameters
-     */
-    scroll: function (previewMode, value) {
-        this.$target.attr('data-scroll-background-ratio', value);
-        this._refreshPublicWidgets();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _setActive: function () {
-        this._super.apply(this, arguments);
-        this.$el.find('[data-scroll]').removeClass('active')
-            .filter('[data-scroll="' + (this.$target.attr('data-scroll-background-ratio') || 0) + '"]').addClass('active');
-    },
 });
 
 var FacebookPageDialog = weWidgets.Dialog.extend({
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 79fbc30e51b..c8c89c0bebe 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1244,15 +1244,15 @@
 
     <!-- Parallax -->
     <div data-js="parallax" data-selector=".parallax">
-        <we-select string="Scroll Speed">
-            <we-button data-scroll="0">No-scroll</we-button>
+        <we-select string="Scroll Speed" data-attribute-name="scrollBackgroundRatio" data-attribute-default-value="0">
+            <we-button data-select-data-attribute="0">No-scroll</we-button>
             <we-divider/>
-            <we-button data-scroll="1">Fixed</we-button>
+            <we-button data-select-data-attribute="1">Fixed</we-button>
             <we-divider/>
-            <we-button data-scroll="0.6">Very Slow</we-button>
-            <we-button data-scroll="1.2">Slow</we-button>
-            <we-button data-scroll="1.6">Fast</we-button>
-            <we-button data-scroll="2">Very Fast</we-button>
+            <we-button data-select-data-attribute="0.6">Very Slow</we-button>
+            <we-button data-select-data-attribute="1.2">Slow</we-button>
+            <we-button data-select-data-attribute="1.6">Fast</we-button>
+            <we-button data-select-data-attribute="2">Very Fast</we-button>
         </we-select>
     </div>
 
diff --git a/addons/website_blog/static/src/js/s_latest_posts_editor.js b/addons/website_blog/static/src/js/s_latest_posts_editor.js
index 0c6ae3fc948..6000b2d27a7 100644
--- a/addons/website_blog/static/src/js/s_latest_posts_editor.js
+++ b/addons/website_blog/static/src/js/s_latest_posts_editor.js
@@ -1,46 +1,9 @@
 odoo.define('website_blog.s_latest_posts_editor', function (require) {
 'use strict';
 
-var core = require('web.core');
 var sOptions = require('web_editor.snippets.options');
 var wUtils = require('website.utils');
 
-var _t = core._t;
-
-sOptions.registry.js_get_posts_limit = sOptions.Class.extend({
-
-    //--------------------------------------------------------------------------
-    // Options
-    //--------------------------------------------------------------------------
-
-    /**
-     * @see this.selectClass for parameters
-     */
-    postsLimit: function (previewMode, value, $opt) {
-        value = parseInt(value);
-        this.$target.attr('data-posts-limit', value).data('postsLimit', value);
-        this.trigger_up('widgets_start_request', {
-            editableMode: true,
-            $target: this.$target,
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _setActive: function () {
-        this._super.apply(this, arguments);
-        var activeLimit = this.$target.data('postsLimit') || 3;
-
-        this.$el.find('[data-posts-limit]').removeClass('active');
-        this.$el.find('[data-posts-limit=' + activeLimit + ']').addClass('active');
-    },
-});
-
 sOptions.registry.js_get_posts_selectBlog = sOptions.Class.extend({
     /**
      * @override
diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml
index 3e9c8e0bfbe..388bf6e0fbb 100644
--- a/addons/website_blog/views/snippets.xml
+++ b/addons/website_blog/views/snippets.xml
@@ -17,18 +17,18 @@
             </we-select>
         </div>
 
-        <div data-js="js_get_posts_limit" data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
-            <we-select string="Posts limit" data-no-preview="true">
-                <we-button data-posts-limit="1">1 post max</we-button>
-                <we-button data-posts-limit="2">2 posts max</we-button>
-                <we-button data-posts-limit="3">3 posts max</we-button>
-                <we-button data-posts-limit="4">4 posts max</we-button>
-                <we-button data-posts-limit="5">5 posts max</we-button>
-                <we-button data-posts-limit="6">6 posts max</we-button>
-                <we-button data-posts-limit="7">7 posts max</we-button>
-                <we-button data-posts-limit="8">8 posts max</we-button>
-                <we-button data-posts-limit="9">9 posts max</we-button>
-                <we-button data-posts-limit="10">10 posts max</we-button>
+        <div data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
+            <we-select string="Posts limit" data-no-preview="true" data-attribute-name="postsLimit" data-attribute-default-value="3">
+                <we-button data-select-data-attribute="1">1 post max</we-button>
+                <we-button data-select-data-attribute="2">2 posts max</we-button>
+                <we-button data-select-data-attribute="3">3 posts max</we-button>
+                <we-button data-select-data-attribute="4">4 posts max</we-button>
+                <we-button data-select-data-attribute="5">5 posts max</we-button>
+                <we-button data-select-data-attribute="6">6 posts max</we-button>
+                <we-button data-select-data-attribute="7">7 posts max</we-button>
+                <we-button data-select-data-attribute="8">8 posts max</we-button>
+                <we-button data-select-data-attribute="9">9 posts max</we-button>
+                <we-button data-select-data-attribute="10">10 posts max</we-button>
             </we-select>
         </div>
     </xpath>