pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_blog: BS4, restore blog options

Browse Source
This commit is contained in:
qsm-odoo
2018-09-26 21:08:35 +02:00
parent 86e6345095
commit 6f3affe886
2 changed files with 125 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_blog/static/src/js/website_blog.editor.js
+105 -51
View File
@@ -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 = $("<img/>");
var background = this.$image.css("background-image");
if (background && background !== "none") {
/**
* @see this.selectClass for parameters
*/
change: function (previewMode, value, $opt) {
var $image = $('<img/>');
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 || '');
},
});
});
addons/website_blog/views/snippets.xml
+20 -20
View File
@@ -10,35 +10,35 @@
<div data-js="blog_cover" data-selector=".website_blog .o_blog_cover_container" data-no-check="true">
<a href="#" class="dropdown-item" data-change="true" data-no-preview="true">Change Cover</a>
<a href="#" class="dropdown-item" data-clear="true" data-no-preview="true">No Cover</a>
<li class="dropdown-submenu">
<a href="#">Size</a>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">Size</a>
<div class="dropdown-menu" role="menu">
<a role="menuitem" href="#" class="dropdown-item" data-select-class="cover container-fluid cover_full">Full Screen</a>
<a role="menuitem" href="#" class="dropdown-item" data-select-class="cover container-fluid cover_narrow">Mid screen</a>
<a role="menuitem" href="#" class="dropdown-item" data-select-class="cover container cover_narrow">Narrow</a>
</div>
</li>
<li class="dropdown-submenu">
<a href="#">Filter Intensity</a>
</div>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">Filter Intensity</a>
<div class="dropdown-menu" role="menu">
<a role="menuitem" href="#" class="dropdown-item" data-filter_value="0.0">None</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_value="0.2">Low</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_value="0.4">Medium</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_value="0.6">High</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-value="0.0">None</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-value="0.2">Low</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-value="0.4">Medium</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-value="0.6">High</a>
</div>
</li>
<li class="dropdown-submenu">
<a href="#">Filter Color</a>
</div>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item">Filter Color</a>
<div class="dropdown-menu" role="menu">
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_black">Black</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_none">White</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_blue">Blue</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_yellow">Yellow</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_red">Red</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_purple">Purple</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter_color="oe_green">Green</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_black">Black</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_none">White</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_blue">Blue</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_yellow">Yellow</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_red">Red</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_purple">Purple</a>
<a role="menuitem" href="#" class="dropdown-item" data-filter-color="oe_green">Green</a>
</div>
</li>
</div>
</div>
</xpath>
</template>