[IMP] website_blog: add consistent behaviors for cover options

There was no bug but now the behaviors are more consistent :

- Demo data now declare a black invisible filter instead of nothing.
This allows user to see the effect of filter intensity option
(otherwise it had no visible effect since there was no filter color).

- If the filter intensity is set to "None" (invisible filter) and that
a filter color option is highlighted or chosen, a "Low" filter
intensity is automatically highlighted or chosen so that the user see
the filter color he is chosing (instead of having to choose the filter
intensity first).

- Hide the "Size" option on the blog list page since it has not visible
effect there.

- Some code "performance" improvements in option selection.

2 files changed, 29 insertions, 12 deletions

diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index 957a4daf66a..d76b9a8f0ba 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -19,7 +19,7 @@
             <field name="published_date" eval="time.strftime('%Y-%m-%d %H:%M:%S')"/>
             <field name="website_meta_keywords">Odoo, email</field>
             <field name="website_meta_description">The Future of Emails</field>
-            <field name="cover_properties">{"background-image": "url(/web/image/website_blog.blog_post_cover_01)", "resize_class": "cover container cover_narrow"}</field>
+            <field name="cover_properties">{"background-image": "url(/web/image/website_blog.blog_post_cover_01)", "resize_class": "cover container cover_narrow", "background-color": "oe_black", "opacity": "0.0"}</field>
             <field name="content"><![CDATA[
 <section class="s_text_block">
     <div class="container">
@@ -133,7 +133,7 @@
             <field name="website_published" eval="True"/>
             <field name="published_date" eval="time.strftime('%Y-%m-%d %H:%M:%S')"/>
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_1'), ref('blog_tag_2')])]"/>
-            <field name="cover_properties">{"background-image": "url(/web/image/website_blog.blog_post_cover_02)", "resize_class": "cover container-fluid cover_full"}</field>
+            <field name="cover_properties">{"background-image": "url(/web/image/website_blog.blog_post_cover_02)", "resize_class": "cover container-fluid cover_full", "background-color": "oe_black", "opacity": "0.0"}</field>
             <field name="content"><![CDATA[
 <section class="s_image_text">
     <div class="container">
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index 7bd025439ae..c49ed85548b 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -89,6 +89,13 @@ odoo.define('website_blog.editor', function (require) {
 
             this.$image = this.$target.children(".o_blog_cover_image");
             this.$filter = this.$target.children(".o_blog_cover_filter");
+
+            this.$filter_value_options = this.$el.find('li[data-filter_value]');
+            this.$filter_color_options = this.$el.find('li[data-filter_color]');
+
+            this.filter_color_classes = this.$filter_color_options.map(function () {
+                return $(this).data("filter_color");
+            }).get().join(" ");
         },
         clear: function (type, value, $li) {
             if (type !== 'click') return;
@@ -119,30 +126,40 @@ odoo.define('website_blog.editor', function (require) {
             this.$target.addClass('o_dirty');
         },
         filter_color: function (type, value, $li) {
-            var $lis = this.$el.find("[data-filter_color]").addBack("[data-filter_color]");
-            var classes = $lis.map(function () {return $(this).data("filter_color");}).get().join(" ");
-            this.$filter.removeClass(classes);
+            this.$filter.removeClass(this.filter_color_classes);
             if (value) {
                 this.$filter.addClass(value);
             }
             this.$target.addClass("o_dirty");
+
+            var $first_visible_filter_option = this.$filter_value_options.eq(1);
+            if (parseFloat(this.$filter.css('opacity')) < parseFloat($first_visible_filter_option.data("filter_value"))) {
+                this.filter_value(type, $first_visible_filter_option.data("filter_value"), $first_visible_filter_option);
+            }
         },
         set_active: function () {
             this._super.apply(this, arguments);
             var self = this;
 
             this.$el.filter(":not([data-change])").toggleClass("hidden", !this.$target.hasClass("cover"));
+            this.$el.filter("li:has(li[data-select_class])").toggleClass("hidden", this.$target.hasClass("o_list_cover"));
+
+            this.$filter_value_options.removeClass("active");
+            this.$filter_color_options.removeClass("active");
+
+            var active_filter_value = this.$filter_value_options
+                .filter(function () {
+                    return (parseFloat($(this).data('filter_value')).toFixed(1) === parseFloat(self.$filter.css('opacity')).toFixed(1));
+                }).addClass("active").data("filter_value");
 
-            var $actives = this.$el.find('li[data-filter_value], li[data-filter_color]').removeClass("active")
+            var active_filter_color = this.$filter_color_options
                 .filter(function () {
-                    var data = $(this).data();
-                    return (parseFloat(data.filter_value).toFixed(1) === parseFloat(self.$filter.css('opacity')).toFixed(1)
-                        || self.$filter.hasClass(data.filter_color));
-                }).addClass("active");
+                    return self.$filter.hasClass($(this).data("filter_color"));
+                }).addClass("active").data("filter_color");
 
             this.$target.data("cover_class", this.$el.find(".active[data-select_class]").data("select_class") || "");
-            this.$target.data("filter_value", $actives.filter("[data-filter_value]").data("filter_value") || 0.0);
-            this.$target.data("filter_color", $actives.filter("[data-filter_color]").data("filter_color") || "");
+            this.$target.data("filter_value", active_filter_value || 0.0);
+            this.$target.data("filter_color", active_filter_color || "");
         },
     });
 });