[IMP] website: review progress bar snippet

Add an input field to define the value of the progress bar instead of
the previous system by mousedown. Disable animated by default.

Part of https://github.com/odoo/odoo/pull/46503
task-2194309

2 files changed, 22 insertions, 54 deletions

diff --git a/addons/website/static/src/snippets/s_progress_bar/options.js b/addons/website/static/src/snippets/s_progress_bar/options.js
index 06644e3f168..d3f544a0515 100644
--- a/addons/website/static/src/snippets/s_progress_bar/options.js
+++ b/addons/website/static/src/snippets/s_progress_bar/options.js
@@ -2,20 +2,12 @@ odoo.define('website.s_progress_bar_options', function (require) {
 'use strict';
 
 const core = require('web.core');
+const utils = require('web.utils');
 const options = require('web_editor.snippets.options');
 
 const _t = core._t;
 
 options.registry.progress = options.Class.extend({
-    /**
-     * @override
-     */
-    start: function () {
-        if (this.$overlay) {
-            this._bindMoveProgress();
-        }
-        this._super();
-    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -47,6 +39,22 @@ options.registry.progress = options.Class.extend({
             $text.insertBefore(this.$target.find('.progress'));
         }
     },
+    /**
+     * Sets the progress bar value.
+     *
+     * @see this.selectClass for parameters
+     */
+    progressBarValue: function (previewMode, widgetValue, params) {
+        let value = parseInt(widgetValue);
+        value = utils.confine(value, 0, 100);
+        const $progressBar = this.$target.find('.progress-bar');
+        const $progressBarText = this.$target.find('.s_progress_bar_text');
+        // Target precisely the XX% not only XX to not replace wrong element
+        // eg 'Since 1978 we have completed 45%' <- don't replace 1978
+        $progressBarText.text($progressBarText.text().replace(/[0-9]+%/, value + '%'));
+        $progressBar.attr("aria-valuenow", value);
+        $progressBar.css("width", value + "%");
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -62,52 +70,11 @@ options.registry.progress = options.Class.extend({
                                         .parent('.progress-bar').length;
                 return isInline ? 'inline' : 'below';
             }
+            case 'progressBarValue': {
+                return this.$target.find('.progress-bar').attr('aria-valuenow') + '%';
+            }
         }
         return this._super(...arguments);
     },
-    /**
-     * Binds the editor padding feature to the progress bar width.
-     */
-    _bindMoveProgress: function () {
-        var self = this;
-        var $e = this.$overlay.find(".o_handle.e").removeClass("readonly");
-        const $progressBar = this.$target.find('.progress-bar');
-        const $parent = $progressBar.parent();
-        var pos = $parent.offset();
-        var width = $parent.width();
-        var time;
-        function move(event) {
-            clearTimeout(time);
-            time = setTimeout(function () {
-                var value = (event.clientX - pos.left) / width * 100 | 0;
-                if (value > 100) {
-                    value = 100;
-                }
-                if (value < 0) {
-                    value = 0;
-                }
-                const $progressBarText = self.$target.find('.s_progress_bar_text');
-                // Target precisely the XX% not only XX to not replace wrong element
-                // eg 'Since 1978 we have completed 45%' <- don't replace 1978
-                $progressBarText.text($progressBarText.text().replace(/[0-9]+%/, value + '%'));
-                $progressBar.attr("data-value", value);
-                $progressBar.attr("aria-valuenow", value);
-                if (value < 3) {
-                    value = 3;
-                }
-                $progressBar.css("width", value + "%");
-            }, 5);
-        }
-        $e.on("mousedown", function () {
-            self.$overlay.addClass('d-none');
-            $(document)
-                .on("mousemove", move)
-                .one("mouseup", function () {
-                    self.$overlay.removeClass('d-none');
-                    $(document).off("mousemove", move);
-                    self.trigger_up('cover_update');
-                });
-        });
-    },
 });
 });
diff --git a/addons/website/views/snippets/s_progress_bar.xml b/addons/website/views/snippets/s_progress_bar.xml
index cbd4c8c638b..a6fcaa73c08 100644
--- a/addons/website/views/snippets/s_progress_bar.xml
+++ b/addons/website/views/snippets/s_progress_bar.xml
@@ -5,7 +5,7 @@
     <div class="s_progress_bar" data-display="inline">
         <h4>We are almost done!</h4>
         <div class="progress">
-            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+            <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%; min-width: 3%">
                 <span class="s_progress_bar_text">80% Development</span>
             </div>
         </div>
@@ -15,6 +15,7 @@
 <template id="s_progress_bar_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-js="progress" data-selector=".s_progress_bar" >
+            <we-input string="Value" data-progress-bar-value="" data-unit="%"/>
             <we-select string="Display">
                 <we-button data-display="inline">Inline</we-button>
                 <we-button data-display="below">Below Each Other</we-button>