[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>

3 files changed, 44 insertions, 20 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.
      *
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index cea28813620..5f3f3a63bb2 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -144,23 +144,32 @@
             <we-select string=" ⌙ Parallax"
                        data-attribute-name="scrollBackgroundRatio"
                        data-attribute-default-value="0"
+                       data-parallax-type-opt="true"
                        data-no-preview="true"
                        data-dependencies="bg_image_opt">
                 <we-button data-name="parallax_none_opt" data-select-data-attribute="0">None</we-button>
                 <we-button data-select-data-attribute="1">Fixed</we-button>
-                <we-button data-name="parallax_very_slow_opt" data-select-data-attribute="0.6">Very Slow</we-button>
-                <we-button data-name="parallax_slow_opt" data-select-data-attribute="1.2">Slow</we-button>
-                <we-button data-name="parallax_fast_opt" data-select-data-attribute="1.6">Fast</we-button>
-                <we-button data-name="parallax_very_fast_opt" data-select-data-attribute="2">Very Fast</we-button>
-            </we-select>
-            <we-select string="  ⌙ Direction"
-                       data-attribute-name="scrollBackgroundDirection"
-                       data-attribute-default-value="top"
-                       data-no-preview="true"
-                       data-dependencies="parallax_very_slow_opt, parallax_slow_opt, parallax_fast_opt, parallax_very_fast_opt">
-                <we-button data-select-data-attribute="top">Bottom to Top</we-button>
-                <we-button data-select-data-attribute="bottom">Top to Bottom</we-button>
+                <we-button data-name="parallax_top_opt" data-select-data-attribute="1.5">Bottom to Top</we-button>
+                <we-button data-name="parallax_bottom_opt" data-select-data-attribute="-1.5">Top to Bottom</we-button>
             </we-select>
+            <we-range string="  ⌙ Intensity"
+                      data-dependencies="parallax_top_opt"
+                      data-select-data-attribute=""
+                      data-attribute-name="scrollBackgroundRatio"
+                      data-attribute-default-value="0"
+                      data-no-preview="true"
+                      data-min="0"
+                      data-max="3"
+                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
+            <we-range string="  ⌙ Intensity"
+                      data-dependencies="parallax_bottom_opt"
+                      data-select-data-attribute=""
+                      data-attribute-name="scrollBackgroundRatio"
+                      data-attribute-default-value="0"
+                      data-no-preview="true"
+                      data-min="0"
+                      data-max="-3"
+                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
         </div>
         <div data-js="BackgroundVideo"
              t-att-data-selector="selector"