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 4b42eb3fbcb..21e86bcb7cd 100644 --- a/addons/website_blog/static/src/js/website_blog.editor.js +++ b/addons/website_blog/static/src/js/website_blog.editor.js @@ -69,11 +69,21 @@ if (!$('.website_blog').length) { } rte.Class.include({ - // Destroy popOver and stop listening mouseup event on edit mode + /** + * @override + */ start: function () { - $(".js_tweet, .js_comment").off('mouseup').trigger('mousedown'); + $('.js_tweet, .js_comment').off('mouseup').trigger('mousedown'); return this._super.apply(this, arguments); }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ _saveElement: function ($el, context) { var defs = [this._super.apply(this, arguments)]; // TODO the o_dirty class is not put on the right element for blog cover @@ -86,12 +96,12 @@ rte.Class.include({ defs.push(this._rpc({ route: '/blog/post_change_background', params: { - post_id: parseInt($el.closest("[name=\"blog_post\"], .website_blog").find("[data-oe-model=\"blog.post\"]").first().data("oe-id"), 10), + post_id: parseInt($el.closest('[name="blog_post"], .website_blog').find('[data-oe-model="blog.post"]').first().data('oe-id'), 10), cover_properties: { - "background-image": $el.children(".o_blog_cover_image").css("background-image").replace(/"/g, '').replace(window.location.protocol + "//" + window.location.host, ''), - "background-color": $el.data("filter_color"), - "opacity": $el.data("filter_value"), - "resize_class": $el.data("cover_class"), + 'background-image': $el.children('.o_blog_cover_image').css('background-image').replace(/"/g, '').replace(window.location.protocol + "//" + window.location.host, ''), + 'background-color': $el.data('filterColor'), + 'opacity': $el.data('filterValue'), + 'resize_class': $el.data('coverClass'), }, }, })); @@ -101,16 +111,24 @@ rte.Class.include({ }); options.registry.many2one.include({ - _selectRecord: function ($li) { + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _selectRecord: function ($opt) { var self = this; this._super.apply(this, arguments); - if (this.$target.data('oe-field') === "author_id") { + if (this.$target.data('oe-field') === 'author_id') { var $nodes = $('[data-oe-model="blog.post"][data-oe-id="'+this.$target.data('oe-id')+'"][data-oe-field="author_avatar"]'); $nodes.each(function () { - var $img = $(this).find("img"); + var $img = $(this).find('img'); var css = window.getComputedStyle($img[0]); $img.css({ width: css.width, height: css.height }); - $img.attr("src", "/web/image/res.partner/"+self.ID+"/image"); + $img.attr('src', '/web/image/res.partner/'+self.ID+'/image'); }); setTimeout(function () { $nodes.removeClass('o_dirty'); },0); } @@ -118,29 +136,46 @@ options.registry.many2one.include({ }); options.registry.blog_cover = options.Class.extend({ + /** + * @constructor + */ init: function () { this._super.apply(this, arguments); - this.$image = this.$target.children(".o_blog_cover_image"); - this.$filter = this.$target.children(".o_blog_cover_filter"); + this.$image = this.$target.children('.o_blog_cover_image'); + this.$filter = this.$target.children('.o_blog_cover_filter'); }, + /** + * @override + */ start: function () { - 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(" "); + this.$filterValueOpts = this.$el.find('[data-filter-value]'); + this.$filterColorOpts = this.$el.find('[data-filter-color]'); + this.filterColorClasses = this.$filterColorOpts.map(function () { + return $(this).data('filterColor'); + }).get().join(' '); return this._super.apply(this, arguments); }, - clear: function (previewMode, value, $li) { - this.selectClass(previewMode, "", $()); - this.$image.css("background-image", ""); + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * @see this.selectClass for parameters + */ + clear: function (previewMode, value, $opt) { + this.selectClass(previewMode, '', $()); + this.$image.css('background-image', ''); }, - change: function (previewMode, value, $li) { - var $image = $(""); - var background = this.$image.css("background-image"); - if (background && background !== "none") { + /** + * @see this.selectClass for parameters + */ + change: function (previewMode, value, $opt) { + var $image = $(''); + var background = this.$image.css('background-image'); + if (background && background !== 'none') { $image.attr('src', background.match(/^url\(["']?(.+?)["']?\)$/)[1]); } @@ -148,53 +183,72 @@ options.registry.blog_cover = options.Class.extend({ onlyImages: true, firstFilters: ['background'] }, $image, $image[0]).open(); - editor.on("save", this, function (event, img) { - var src = $image.attr("src"); - this.$image.css("background-image", src ? ("url(" + src + ")") : ""); - if (!this.$target.hasClass("cover")) { - var $li = this.$el.find("[data-select-class]").first(); - this.selectClass(previewMode, $li.data("selectClass"), $li); + editor.on('save', this, function (event, img) { + var src = $image.attr('src'); + this.$image.css('background-image', src ? ('url(' + src + ')') : ''); + if (!this.$target.hasClass('cover')) { + var $opt = this.$el.find('[data-select-class]').first(); + this.selectClass(previewMode, $opt.data('selectClass'), $opt); } this._setActive(); }); }, - filter_value: function (previewMode, value, $li) { - this.$filter.css("opacity", value); + /** + * @see this.selectClass for parameters + */ + filterValue: function (previewMode, value, $opt) { + this.$filter.css('opacity', value); }, - filter_color: function (previewMode, value, $li) { - this.$filter.removeClass(this.filter_color_classes); + /** + * @see this.selectClass for parameters + */ + filterColor: function (previewMode, value, $opt) { + this.$filter.removeClass(this.filterColorClasses); if (value) { this.$filter.addClass(value); } - 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(previewMode, $first_visible_filter_option.data("filter_value"), $first_visible_filter_option); + var $firstVisibleFilterOpt = this.$filterValueOpts.eq(1); + if (parseFloat(this.$filter.css('opacity')) < parseFloat($firstVisibleFilterOpt.data('filterValue'))) { + this.filterValue(previewMode, $firstVisibleFilterOpt.data('filterValue'), $firstVisibleFilterOpt); } }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @override + */ _setActive: function () { this._super.apply(this, arguments); var self = this; - this.$el.filter(":not([data-change])").toggleClass('d-none', !this.$target.hasClass("cover")); - this.$el.filter("li:has(li[data-select-class])").toggleClass('d-none', this.$target.hasClass("o_list_cover")); + _.each(this.$el, function (el) { + var $el = $(el); + $el.toggleClass('d-none', + $el.is(':not([data-change])') && !self.$target.hasClass('cover') + || $el.is(':has([data-select-class])') && self.$target.hasClass('o_list_cover')); + }); - this.$filter_value_options.removeClass("active"); - this.$filter_color_options.removeClass("active"); + this.$filterValueOpts.removeClass('active'); + this.$filterColorOpts.removeClass('active'); - var active_filter_value = this.$filter_value_options + var activeFilterValue = this.$filterValueOpts .filter(function () { - return (parseFloat($(this).data('filter_value')).toFixed(1) === parseFloat(self.$filter.css('opacity')).toFixed(1)); - }).addClass("active").data("filter_value"); + return (parseFloat($(this).data('filterValue')).toFixed(1) === parseFloat(self.$filter.css('opacity')).toFixed(1)); + }).addClass('active').data('filterValue'); - var active_filter_color = this.$filter_color_options + var activeFilterColor = this.$filterColorOpts .filter(function () { - return self.$filter.hasClass($(this).data("filter_color")); - }).addClass("active").data("filter_color"); + return self.$filter.hasClass($(this).data('filterColor')); + }).addClass('active').data('filterColor'); - this.$target.data("cover_class", this.$el.find(".active[data-select-class]").data("selectClass") || ""); - this.$target.data("filter_value", active_filter_value || 0.0); - this.$target.data("filter_color", active_filter_color || ""); + this.$target.data('coverClass', this.$el.find('.active[data-select-class]').data('selectClass') || ''); + this.$target.data('filterValue', activeFilterValue || 0.0); + this.$target.data('filterColor', activeFilterColor || ''); }, }); }); diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml index 9bb7a22136b..f8564f6b254 100644 --- a/addons/website_blog/views/snippets.xml +++ b/addons/website_blog/views/snippets.xml @@ -10,35 +10,35 @@
Change Cover No Cover -
  • - Size +
    + Size -
    • -
  • - Filter Intensity +
    • +
    + Filter Intensity - -
  • - Filter Color +
    • +
    + Filter Color - +