From 38dc9c82c58a37eb81271e0b0c40d3f07f0d944c Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Fri, 5 Mar 2021 16:40:27 +0000
Subject: [PATCH] [IMP] website, *: replace spacing selection by a slider

*: web_editor

The goal of this commit is to tweak the code of <we-range> widget
to be able to select a css using class values.
This way, the image spacing selection can be easily replaced by
a slider of 4 levels [0 -> none, 1 -> small, 2 -> medium, 3 -> big].

Part of https://github.com/odoo/odoo/pull/66544
task-2326573
---
 .../static/src/js/editor/snippets.options.js  | 36 ++++++++++++++++---
 .../views/snippets/s_image_gallery.xml        |  9 ++---
 2 files changed, 35 insertions(+), 10 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 cda84a6a0ea..af2973cede1 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -2013,9 +2013,7 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
             [min, max] = [max, min];
             this.input.classList.add('o_we_inverted_range');
         }
-        this.input.setAttribute('min', min);
-        this.input.setAttribute('max', max);
-        this.input.setAttribute('step', step);
+        this._setInputAttributes(min, max, step);
         this.containerEl.appendChild(this.input);
     },
 
@@ -2023,12 +2021,34 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    loadMethodsData(validMethodNames) {
+        this._super(...arguments);
+        for (const methodName of this._methodsNames) {
+            const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
+            if (possibleValues.length > 1) {
+                this._setInputAttributes(0, possibleValues.length - 1, 1);
+                break;
+            }
+        }
+    },
     /**
      * @override
      */
     async setValue(value, methodName) {
         await this._super(...arguments);
-        this.input.value = this._value;
+        const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
+        this.input.value = possibleValues.length > 1 ? possibleValues.indexOf(value) : this._value;
+    },
+    /**
+     * @override
+     */
+    getValue(methodName) {
+        const value = this._super(...arguments);
+        const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
+        return possibleValues.length > 1 ? possibleValues[+value] : value;
     },
 
     //--------------------------------------------------------------------------
@@ -2042,6 +2062,14 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
         this._value = ev.target.value;
         this._onUserValueChange(ev);
     },
+    /**
+     * @private
+     */
+    _setInputAttributes(min, max, step) {
+        this.input.setAttribute('min', min);
+        this.input.setAttribute('max', max);
+        this.input.setAttribute('step', step);
+    },
 });
 
 const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index 1cf19d560f1..8e8b27fd50b 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -97,12 +97,9 @@
                 <we-button data-columns="6">6</we-button>
                 <we-button data-columns="12">12</we-button>
             </we-select>
-            <we-select string="Images spacing" data-dependencies="!slideshow_mode_opt">
-                <we-button data-select-class="o_spc-none">None</we-button>
-                <we-button data-select-class="o_spc-small">Small</we-button>
-                <we-button data-select-class="o_spc-medium">Medium</we-button>
-                <we-button data-select-class="o_spc-big">Big</we-button>
-            </we-select>
+            <we-range string="Images Spacing"
+                data-dependencies="!slideshow_mode_opt"
+                data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big"/>
             <we-select string="Styling" data-apply-to="img">
                 <we-button data-select-class="">Standard</we-button>
                 <we-button data-select-class="img-thumbnail">Thumbnails</we-button>