From ed6bd2e9afde927cbfe21ef17a8e90f5c39ae74d Mon Sep 17 00:00:00 2001
From: jem-odoo <jem@openerp.com>
Date: Mon, 18 Feb 2019 15:50:02 +0000
Subject: [PATCH] [FIX] website_slides: use progressbar from bootstrap to avoid
 too much code

This commit replaces a widget with standard boostrap code: the progress bar
classes. Creating a widget was a little bit over engineered, and since the
progress animation is handle in CSS, this replacement does not cause any loss
of feature.

Commit linked to task ID 1942852 and PR #31394.
---
 .../src/js/slides_course_fullscreen_player.js |  9 ++--
 .../src/js/slides_course_progress_bar.js      | 47 -------------------
 .../src/scss/slides_slide_fullscreen.scss     |  4 +-
 addons/website_slides/views/assets.xml        |  1 -
 .../views/website_slides_templates_lesson.xml |  7 ++-
 ...ite_slides_templates_lesson_fullscreen.xml |  8 ++--
 6 files changed, 16 insertions(+), 60 deletions(-)
 delete mode 100644 addons/website_slides/static/src/js/slides_course_progress_bar.js

diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index 034f67231a1..12269298668 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -249,11 +249,10 @@ odoo.define('website_slides.fullscreen', function (require) {
                 }
             });
         },
-        _updateProgressbar: function (){
-            var self = this;
-            var completion = self.channelCompletion <= 100 ? self.channelCompletion : 100;
-            $('.o_wslides_fs_sidebar_progress_gauge').css('width', completion + "%" );
-            $('.o_wslides_progress_percentage').text(completion);
+        _updateProgressbar: function () {
+            var completion = _.min([this.channelCompletion, 100]);
+            this.$('.o_wslides_fs_sidebar_progressbar .progress-bar').css('width', completion + "%" );
+            this.$('.o_wslides_progress_percentage').text(completion);
         },
         /**
          * @private
diff --git a/addons/website_slides/static/src/js/slides_course_progress_bar.js b/addons/website_slides/static/src/js/slides_course_progress_bar.js
deleted file mode 100644
index 2412368018f..00000000000
--- a/addons/website_slides/static/src/js/slides_course_progress_bar.js
+++ /dev/null
@@ -1,47 +0,0 @@
-odoo.define('website_slides.progress.bar', function (require) {
-
-    var sAnimations = require('website.content.snippets.animation');
-    var Widget = require('web.Widget');
-
-    var ProgressBar = Widget.extend({
-
-        /**
-         * @override
-         * @param {Object} el
-         * @param {number} channel_id
-         */
-        init: function (el, completion) {
-            this._super(el);
-            this.completion = completion;
-        },
-        /**
-         * @override
-         */
-        start: function () {
-            this._renderProgressBar();
-            return this._super.apply(this, arguments);
-        },
-        //--------------------------------------------------------------------------
-        // Handlers
-        //--------------------------------------------------------------------------
-        _renderProgressBar: function (ev) {
-            var self = this;
-            $('.oe_slide_js_progress_bar').css('width', (self.completion <= 100 ? self.completion : 100)  + '%');
-        },
-    });
-
-    sAnimations.registry.websiteSlidesProgressBar = sAnimations.Class.extend({
-        selector: '.oe_slide_js_progress_bar',
-        /**
-         * @override
-         */
-        start: function () {
-            var completion = parseInt($('.oe_slide_js_progress_bar').attr('channel_completion'));
-            var progressBar = new ProgressBar(this, completion);
-            progressBar.appendTo(".oe_slide_js_progress_bar");
-            return this._super.apply(this, arguments);
-        },
-    });
-
-    return ProgressBar;
-    });
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index 3310b570c8e..f6612d5d04f 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -97,7 +97,7 @@
             padding-left: 20px;
         }
 
-        .o_wslides_fs_sidebar_header{
+        .o_wslides_fs_sidebar_header {
             height: 100px;
             padding: 20px 0;
             display: flex;
@@ -115,7 +115,7 @@
                     margin-right: 40px;
                     overflow: hidden;
                 }
-                .o_wslides_fs_sidebar_progress_gauge {
+                .progress-bar {
                     background-color: $primary;
                     height: 100%;
                     width: 0;
diff --git a/addons/website_slides/views/assets.xml b/addons/website_slides/views/assets.xml
index 635bf2d2dbd..eb000518491 100644
--- a/addons/website_slides/views/assets.xml
+++ b/addons/website_slides/views/assets.xml
@@ -18,7 +18,6 @@
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_slide_archive.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_slide_like.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_slides_list.js"/>
-                <script type="text/javascript" src="/website_slides/static/src/js/slides_course_progress_bar.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_fullscreen_player.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_join.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_quiz.js"/>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index e58935d34b2..98f7577b848 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -12,9 +12,12 @@
                 <div class="o_wslides_slide_header_container">
                     <div class="o_wslides_slide_header_box">
                         <a t-attf-href="/slides/#{slug(slide.channel_id)}" t-field="slide.channel_id.name"/>
+
                         <div t-if="slide.channel_id.channel_type == 'training'" class="d-flex align-items-end">
-                            <div class="o_wslides_slide_progress_bar">
-                                <div class="o_wslides_progress_gauge m-0 oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar"
+                                    t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
+                                    t-att-style="'width: %s' % (slide.channel_id.completion)"/>
                             </div>
                             <i class="fa fa-trophy ml-2 mb-0 p-0" style="font-size:1.8rem; color: #cdcdcd;"></i>
                         </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 8a20c4b2d5a..8b7a649d107 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -29,10 +29,12 @@
                                     <span t-field="slide.channel_id.name"/>
                                 </a>
                                 <div class="o_wslides_slide_fs_progress_box">
-                                    <div class="o_wslides_fs_sidebar_progressbar">
-                                        <div class="o_wslides_fs_sidebar_progress_gauge oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+                                    <div class="progress o_wslides_fs_sidebar_progressbar">
+                                        <div class="progress-bar" role="progressbar"
+                                            t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
+                                            t-att-style="'width: %s' % (slide.channel_id.completion)"/>
                                     </div>
-                                    <span><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</span>
+                                    <div><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</div>
                                 </div>
                             </div>
                         </li>