[IMP] website: review parallax option UI

Instead of two select:

Parallax: none/fixed/very slow/slow/...
Direction: Bottom to top/top to bottom

We now have:

Parallax: none/fixed/bottom to top/top to bottom
Intensity: slider

Part of https://github.com/odoo/odoo/pull/47313
task-46147

closes odoo/odoo#47313

Related: odoo/design-themes#335
Related: odoo/upgrade#1553
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 23 insertions, 8 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 76bb7c66f24..7de8fbef029 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -553,15 +553,11 @@ registry.Parallax = Animation.extend({
         this.ratio = this.speed * (this.viewport / 10);
 
         // Provide a "safe-area" to limit parallax
+        const absoluteRatio = Math.abs(this.ratio);
         this.$bg.css({
-            top: -this.ratio,
-            bottom: -this.ratio,
+            top: -absoluteRatio,
+            bottom: -absoluteRatio,
         });
-
-        // Get parallax direction
-        if (this.el.dataset.scrollBackgroundDirection === 'bottom') {
-            this.ratio = -this.ratio;
-        }
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index e8be8995e21..b4c6191d2b5 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1665,10 +1665,29 @@ options.registry.Parallax = options.Class.extend({
     /**
      * @override
      */
-    async _computeVisibility() {
+    async _computeVisibility(widgetName) {
         return !this.$target.hasClass('o_background_video');
     },
     /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'selectDataAttribute' && params.parallaxTypeOpt) {
+            const attrName = params.attributeName;
+            const attrValue = (this.$target[0].dataset[attrName] || params.attributeDefaultValue).trim();
+            switch (attrValue) {
+                case '0':
+                case '1': {
+                    return attrValue;
+                }
+                default: {
+                    return (attrValue.startsWith('-') ? '-1.5' : '1.5');
+                }
+            }
+        }
+        return this._super(...arguments);
+    },
+    /**
      * Updates external background-related option to work with the parallax
      * element instead of the original target when necessary.
      *