[MOV] website: add s_progress_bar snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157

6 files changed, 157 insertions, 2 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 079fb14cf8d..6be9edd2a81 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -64,6 +64,7 @@
         'views/snippets/s_timeline.xml',
         'views/snippets/s_process_steps.xml',
         'views/snippets/s_text_highlight.xml',
+        'views/snippets/s_progress_bar.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png
new file mode 100644
index 00000000000..21a9a948a71
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png
diff --git a/addons/website/static/src/snippets/s_progress_bar/options.js b/addons/website/static/src/snippets/s_progress_bar/options.js
new file mode 100644
index 00000000000..06644e3f168
--- /dev/null
+++ b/addons/website/static/src/snippets/s_progress_bar/options.js
@@ -0,0 +1,113 @@
+odoo.define('website.s_progress_bar_options', function (require) {
+'use strict';
+
+const core = require('web.core');
+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
+    //--------------------------------------------------------------------------
+
+    /**
+     * Changes the position of the progressbar text.
+     *
+     * @see this.selectClass for parameters
+     */
+    display: function (previewMode, widgetValue, params) {
+        // retro-compatibility
+        if (this.$target.hasClass('progress')) {
+            this.$target.removeClass('progress');
+            this.$target.find('.progress-bar').wrap($('<div/>', {
+                class: 'progress',
+            }));
+            this.$target.find('.progress-bar span').addClass('s_progress_bar_text');
+        }
+
+        let $text = this.$target.find('.s_progress_bar_text');
+        if (!$text.length) {
+            $text = $('<span/>').addClass('s_progress_bar_text').html(_t('80% Development'));
+        }
+
+        if (widgetValue === 'inline') {
+            $text.appendTo(this.$target.find('.progress-bar'));
+        } else {
+            $text.insertBefore(this.$target.find('.progress'));
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState: function (methodName, params) {
+        switch (methodName) {
+            case 'display': {
+                const isInline = this.$target.find('.s_progress_bar_text')
+                                        .parent('.progress-bar').length;
+                return isInline ? 'inline' : 'below';
+            }
+        }
+        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/assets.xml b/addons/website/views/assets.xml
index 45c52729e90..f946a7bc5f4 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -116,6 +116,7 @@
     <script type="text/javascript" src="/website/static/src/snippets/s_chart/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_rating/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
diff --git a/addons/website/views/snippets/s_progress_bar.xml b/addons/website/views/snippets/s_progress_bar.xml
new file mode 100644
index 00000000000..cbd4c8c638b
--- /dev/null
+++ b/addons/website/views/snippets/s_progress_bar.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Progress Bar" id="s_progress_bar">
+    <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%">
+                <span class="s_progress_bar_text">80% Development</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<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-select string="Display">
+                <we-button data-display="inline">Inline</we-button>
+                <we-button data-display="below">Below Each Other</we-button>
+            </we-select>
+            <we-colorpicker string="Colors" data-apply-to=".progress-bar"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="bg-"/>
+            <we-checkbox string="Striped" data-select-class="progress-bar-striped" data-apply-to=".progress-bar"/>
+            <we-checkbox string="Animated" data-select-class="progress-bar-animated" data-apply-to=".progress-bar"/>
+        </div>
+    </xpath>
+    <xpath expr="//div[@id='so_content_addition']" position="attributes">
+        <attribute name="data-selector" add=".s_progress_bar" separator=","/>
+        <attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
+    </xpath>
+</template>
+
+<!-- No related CSS but there is some in theme overrides -->
+<template id="assets_snippet_s_progress_bar_css_000" inherit_id="website.assets_frontend">
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5d7f322f3f7..21973cd0dbf 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -96,7 +96,7 @@
                     <t id="mass_mailing_newsletter_hook"/>
                     <t t-snippet="website.s_text_highlight" t-thumbnail="/website/static/src/img/snippets_thumbs/s_color_block.png"/>
                     <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
-                    <!-- Progress Bar -->
+                    <t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.png"/>
                     <!-- Tags -->
                     <!-- Quote -->
                     <t id="event_speaker_bio_hook"/>
@@ -326,7 +326,7 @@
         t-att-data-selector="so_snippet_addition_selector"
         data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
 
-    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight</t>
+    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar</t>
     <div id="so_content_addition"
         t-att-data-selector="so_content_addition_selector"
         t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"