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

[IMP] web_editor, website, *: create background-type toggler option

Browse Source 
*: website_blog

Previously, background colors, images, and videos could all be applied
on the same section, such that the image can be used as a fallback for
the video, and the color as a fallback for the image. However, if you
wanted to change the background color behind the background image, the
background image would be removed. The background image and background
video also shared the same widget to pick the image or video.

This commit adds a background-type toggler, where the user can toggle
the background color, image and video individually. It also makes the
video picker into its own UserValueWidget, such that the user can pick
both an image and video without overriding the other.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790
This commit is contained in:
Samuel Degueldre
2020-08-07 15:34:45 +00:00
committed by qsm-odoo
parent 5c05592032
commit c3dacfea05
8 changed files with 268 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+121 -87
View File
@@ -1314,36 +1314,59 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
},
});
const ImagepickerUserValueWidget = UserValueWidget.extend({
const MediapickerUserValueWidget = UserValueWidget.extend({
tagName: 'we-button',
events: {
'click': '_onEditImage',
'click': '_onEditMedia',
},
/**
* @override
*/
start: async function () {
async start() {
await this._super(...arguments);
if (this.options.dataAttributes.buttonStyle) {
const iconEl = document.createElement('i');
iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
this.containerEl.appendChild(iconEl);
} else {
this.el.classList.add('fa', 'fa-fw', 'fa-edit');
}
},
const allowedSelector = this.el.dataset.allowVideos;
this.allowVideos = allowedSelector ? this.$target.is(allowedSelector) : false;
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
const iconEl = document.createElement('i');
iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
this.containerEl.appendChild(iconEl);
/**
* Creates and opens a media dialog to edit a given element's media.
*
* @private
* @param {HTMLElement} el the element whose media should be edited
* @param {boolean} [images] whether images should be available
* default: false
* @param {boolean} [videos] whether videos should be available
* default: false
*/
_openDialog(el, {images = false, videos = false}) {
el.src = this._value;
const $editable = this.$target.closest('.o_editable');
const mediaDialog = new weWidgets.MediaDialog(this, {
noImages: !images,
noVideos: !videos,
noIcons: true,
noDocuments: true,
isForBgVideo: true,
'res_model': $editable.data('oe-model'),
'res_id': $editable.data('oe-id'),
}, el).open();
return mediaDialog;
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
getMethodsParams: function (methodName) {
return _.extend({isVideo: this.isVideo}, this._super(...arguments));
},
/**
* @override
*/
@@ -1357,38 +1380,50 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
//--------------------------------------------------------------------------
/**
* Called when the edit background button is clicked.
* Called when the edit button is clicked.
*
* @private
* @param {Event} ev
*/
_onEditImage: function (ev) {
_onEditMedia: function (ev) {},
});
const ImagepickerUserValueWidget = MediapickerUserValueWidget.extend({
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @override
*/
_onEditMedia(ev) {
// Need a dummy element for the media dialog to modify.
const dummyEl = document.createElement(this.isVideo ? 'iframe' : 'img');
dummyEl.src = this._value;
if (this.isVideo) {
// Allows the mediaDialog to select the video tab immediately.
dummyEl.classList.add('media_iframe_video');
}
const $editable = this.$target.closest('.o_editable');
const mediaDialog = new weWidgets.MediaDialog(this, {
noIcons: true,
noDocuments: true,
noVideos: !this.allowVideos,
isForBgVideo: true,
'res_model': $editable.data('oe-model'),
'res_id': $editable.data('oe-id'),
}, dummyEl).open();
mediaDialog.on('save', this, data => {
if (data.bgVideoSrc) {
this._value = data.bgVideoSrc;
this.isVideo = true;
} else {
// Accessing the value directly through dummyEl.src converts the url to absolute
// using getAttribute allows us to keep the url as it was inserted in the DOM
// which can be useful to compare it to values stored in db.
this._value = dummyEl.getAttribute('src');
this.isVideo = false;
}
const dummyEl = document.createElement('img');
const dialog = this._openDialog(dummyEl, {images: true});
dialog.on('save', this, data => {
// Accessing the value directly through dummyEl.src converts the url to absolute,
// using getAttribute allows us to keep the url as it was inserted in the DOM
// which can be useful to compare it to values stored in db.
this._value = dummyEl.getAttribute('src');
this._onUserValueChange();
});
},
});
const VideopickerUserValueWidget = MediapickerUserValueWidget.extend({
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @override
*/
_onEditMedia(ev) {
// Need a dummy element for the media dialog to modify.
const dummyEl = document.createElement('iframe');
const dialog = this._openDialog(dummyEl, {videos: true});
dialog.on('save', this, data => {
this._value = data.bgVideoSrc;
this._onUserValueChange();
});
},
@@ -1563,6 +1598,7 @@ const userValueWidgetsRegistry = {
'we-colorpicker': ColorpickerUserValueWidget,
'we-datetimepicker': DatetimePickerUserValueWidget,
'we-imagepicker': ImagepickerUserValueWidget,
'we-videopicker': VideopickerUserValueWidget,
'we-range': RangeUserValueWidget,
};
@@ -3155,6 +3191,46 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
},
});
registry.BackgroundToggler = SnippetOptionWidget.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Toggles background image on or off.
*
* @see this.selectClass for parameters
*/
toggleBgImage(previewMode, widgetValue, params) {
if (!widgetValue) {
// TODO: use setWidgetValue instead of calling background directly when possible
const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
const bgImageOpt = bgImageWidget.getParent();
return bgImageOpt.background(false, '', bgImageWidget.getMethodsParams('background'));
} else {
// TODO: use trigger instead of el.click when possible
this._requestUserValueWidgets('bg_image_opt')[0].el.click();
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState(methodName, params) {
if (methodName === 'toggleBgImage') {
const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
const bgImageOpt = bgImageWidget.getParent();
return !!bgImageOpt._computeWidgetState('background', bgImageWidget.getMethodsParams('background'));
}
return this._super(...arguments);
},
});
/**
* Handles the edition of snippet's background image.
*/
@@ -3163,10 +3239,7 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
* @override
*/
start: function () {
// Initialize background and events
this.bindBackgroundEvents();
this.__customImageSrc = this._getSrcFromCssValue();
return this._super(...arguments);
},
@@ -3206,24 +3279,12 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
// Public
//--------------------------------------------------------------------------
/**
* Attaches events so that when a background-color is set, the background
* image is removed.
*/
bindBackgroundEvents: function () {
if (this.$target.is('.parallax, .s_parallax_bg')) {
return;
}
this.$target.off('.background-option')
.on('background-color-event.background-option', this._onBackgroundColorUpdate.bind(this));
},
/**
* @override
*/
setTarget: function () {
this._super(...arguments);
// TODO should be automatic for all options as equal to the start method
this.bindBackgroundEvents();
this.__customImageSrc = this._getSrcFromCssValue();
},
@@ -3244,38 +3305,11 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
* @override
*/
_computeWidgetState: function (methodName) {
switch (methodName) {
case 'background':
return this._getSrcFromCssValue();
if (methodName === 'background') {
return this._getSrcFromCssValue();
}
return this._super(...arguments);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* Called on background-color update (useful to remove the background to be
* able to see the chosen color).
*
* @private
* @param {Event} ev
* @param {boolean|string} previewMode
* @returns {boolean} true if the color has been applied (removing the
* background)
*/
_onBackgroundColorUpdate: async function (ev, previewMode) {
ev.stopPropagation();
if (ev.currentTarget !== ev.target) {
return false;
}
if (previewMode === false) {
this.__customImageSrc = undefined;
}
await this.background(previewMode, '', {});
return true;
},
});
/**
@@ -3583,7 +3617,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
* snippet drop (so that base snippet definition do not need to care about that)
* and on first focus (for compatibility).
*/
registry.ColoredLevelBackground = registry.BackgroundImage.extend({
registry.ColoredLevelBackground = registry.BackgroundToggler.extend({
/**
* @override
*/
addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
+2 -2
View File
@@ -80,8 +80,8 @@ var MediaDialog = Dialog.extend({
this.activeWidget = this.videoWidget;
} else if (this.iconWidget && $media.is('span, i')) {
this.activeWidget = this.iconWidget;
} else if (this.imageWidget) {
this.activeWidget = this.imageWidget;
} else {
this.activeWidget = [this.imageWidget, this.documentWidget, this.videoWidget, this.iconWidget].find(w => !!w);
}
},
/**
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+7 -2
View File
@@ -290,7 +290,6 @@ body.editor_enable.editor_has_snippets {
&.fa {
display: inline-block;
margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing;
padding: 0;
border: none;
background: none;
@@ -374,10 +373,16 @@ body.editor_enable.editor_has_snippets {
color: $o-we-sidebar-content-field-control-item-color;
text-align: center;
> * {
margin-left: $o-we-sidebar-content-field-multi-spacing;
}
> we-customizeblock-option {
&, .fa {
display: inline-block !important;
}
.fa {
margin: 0;
}
}
}
}
@@ -873,7 +878,7 @@ body.editor_enable.editor_has_snippets {
background-color: $o-we-bg-darkest;
+ .fa {
margin-left: 0;
margin: 0;
}
}
.o_we_tag_wrapper {
addons/web_editor/views/snippets.xml
+38 -30
View File
@@ -34,7 +34,7 @@
</template>
<template id="snippet_options_image_optimization_widgets">
<t t-set="filter_label">Color filter</t>
<t t-set="filter_label">Color Filter</t>
<t t-set="width_label">Width</t>
<t t-set="quality_label">Quality</t>
<div class="o_we_external_warning d-none">
@@ -42,48 +42,55 @@
<i class="fa fa-warning" /> External Image
</we-title>
</div>
<we-colorpicker t-att-string="indent and ('⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
<we-select t-att-string="indent and ('⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
<we-range t-att-string="indent and ('⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
<!-- &emsp; -->
<we-colorpicker t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
<we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
<we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
<div class="o_we_image_weight d-none"><i class="fa fa-long-arrow-right"/><span/></div>
</template>
<template id="snippet_options_background_selection_widgets">
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<we-colorpicker t-if="with_colors"
title="Color"
data-name="bg_color_opt"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"
t-att-data-with-combinations="with_color_combinations and 'true' or None"
t-att-data-css-compatible="css_compatible and 'true' or None"/>
<we-button-group t-if="with_images"
class="ml-auto"
t-att-data-dependencies="images_dependencies"
data-no-preview="true">
<we-imagepicker title="Image"
data-background=""
data-allow-videos=":not(.parallax, .s_parallax_bg)"/>
<we-button title="None"
data-background=""><i class="fa fa-fw fa-ban"/></we-button>
</we-button-group>
</we-row>
<template id="snippet_options_background_color_widget">
<we-colorpicker title="Color"
data-name="bg_color_opt"
data-select-style=""
data-css-property="background-color"
data-color-prefix="bg-"
t-att-data-with-combinations="with_color_combinations and 'true' or None"
t-att-data-css-compatible="css_compatible and 'true' or None"/>
</template>
<template id="snippet_options_background_options">
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundImage'"
<div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<t t-call="web_editor.snippet_options_background_selection_widgets"/>
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
<t t-if="with_images">
<we-button title="Image" class="ml-auto" data-toggle-bg-image="true" t-att-data-dependencies="images_dependencies" data-no-preview="true">
<i class="fa fa-fw fa-camera"/>
</we-button>
</t>
</we-row>
</div>
<t t-if="with_images">
<div data-js="BackgroundImage"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="⌙ Image">
<we-imagepicker title="Edit image"
data-background=""
data-name="bg_image_opt"
data-dependencies="bg_image_opt"/>
</we-row>
</div>
<div data-js="BackgroundPosition"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="⌙ Position">
<we-row string=" ⌙ Position"><!-- &emsp; -->
<we-select data-no-preview="true">
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
@@ -92,8 +99,9 @@
data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<we-input string="⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
<!-- &emsp; -->
<we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
<we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
</we-multi>
</div>
addons/website/static/src/js/editor/snippets.options.js
+60 -38
View File
@@ -626,17 +626,63 @@ options.Class.include({
},
});
options.registry.BackgroundImage.include({
background: async function (previewMode, widgetValue, params) {
options.registry.BackgroundToggler.include({
/**
* Toggles background video on or off.
*
* @see this.selectClass for parameters
*/
toggleBgVideo(previewMode, widgetValue, params) {
if (!widgetValue) {
// TODO: use setWidgetValue instead of calling background directly when possible
const [bgVideoWidget] = this._requestUserValueWidgets('bg_video_opt');
const bgVideoOpt = bgVideoWidget.getParent();
return bgVideoOpt._setBgVideo(false, '');
} else {
// TODO: use trigger instead of el.click when possible
this._requestUserValueWidgets('bg_video_opt')[0].el.click();
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_computeWidgetState(methodName, params) {
if (methodName === 'toggleBgVideo') {
return this.$target[0].classList.contains('o_background_video');
}
return this._super(...arguments);
},
/**
* @override
*/
_computeWidgetVisibility(widgetName, params) {
if (widgetName === 'bg_video_toggler_opt') {
return !this.$target.is('.parallax, .s_parallax_bg');
}
return this._super(...arguments);
},
});
options.registry.BackgroundVideo = options.Class.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* Sets the target's background video.
*
* @see this.selectClass for parameters
*/
background: function (previewMode, widgetValue, params) {
if (previewMode === 'reset' && this.videoSrc) {
return this._setBgVideo(false, this.videoSrc);
}
const _super = this._super.bind(this);
if (!params.isVideo) {
await this._setBgVideo(previewMode, '');
return _super(...arguments);
}
return this._setBgVideo(previewMode, widgetValue);
},
@@ -647,9 +693,12 @@ options.registry.BackgroundImage.include({
/**
* @override
*/
_computeWidgetState: function (methodName) {
if (methodName === 'background' && this.$target[0].classList.contains('o_background_video')) {
return this.$('> .o_bg_video_container iframe').attr('src');
_computeWidgetState: function (methodName, params) {
if (methodName === 'background') {
if (this.$target[0].classList.contains('o_background_video')) {
return this.$('> .o_bg_video_container iframe').attr('src');
}
return '';
}
return this._super(...arguments);
},
@@ -677,33 +726,6 @@ options.registry.BackgroundImage.include({
}
await this._refreshPublicWidgets();
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @override
*/
_onBackgroundColorUpdate: async function (ev, previewMode) {
const ret = await this._super(...arguments);
if (ret) {
this._setBgVideo(previewMode, '');
}
return ret;
},
});
options.registry.BackgroundOptimize.include({
/**
* @override
*/
_computeVisibility() {
if (this.$target.hasClass('o_background_video')) {
return false;
}
return this._super(...arguments);
},
});
options.registry.OptionsTab = options.Class.extend({
addons/website/views/snippets/s_chart.xml
+3 -4
View File
@@ -23,10 +23,9 @@
<xpath expr="." position="inside">
<div data-js="InnerChart" string="Chart"
data-selector=".s_chart">
<t t-call="web_editor.snippet_options_background_selection_widgets">
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="False"/>
</t>
<we-row string="Background">
<t t-call="web_editor.snippet_options_background_color_widget"/>
</we-row>
<we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
<we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
<we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
addons/website/views/snippets/snippets.xml
+36 -5
View File
@@ -121,6 +121,31 @@
</xpath>
</template>
<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
<xpath expr="//we-button[@data-toggle-bg-image]" position="after">
<we-button title="Video"
data-name="bg_video_toggler_opt"
t-att-data-dependencies="images_dependencies"
data-toggle-bg-video="true"
data-no-preview="true">
<i class="fa fa-fw fa-film"/>
</we-button>
</xpath>
<xpath expr="//div[@data-js='BackgroundOptimize']" position="after">
<div data-js="BackgroundVideo"
t-att-data-selector="selector"
t-att-data-exclude="exclude"
t-att-data-target="target">
<we-row string="⌙ Video">
<we-videopicker title="Edit video"
data-background=""
data-name="bg_video_opt"
data-dependencies="bg_video_opt"/>
</we-row>
</div>
</xpath>
</template>
<template id="snippet_options_border_line_widgets">
<we-row t-att-string="label">
<we-input data-name="border_width_opt"
@@ -622,11 +647,17 @@
data-drop-near=".o_mega_menu .nav-link"/>
<div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
<t t-call="web_editor.snippet_options_background_selection_widgets">
<t t-set="with_colors" t-value="True"/>
<t t-set="with_images" t-value="True"/>
<t t-set="with_color_combinations" t-value="True"/>
</t>
<we-row string="Background" class="o_we_full_row">
<t t-call="web_editor.snippet_options_background_color_widget">
<t t-set="with_color_combinations" t-value="True"/>
</t>
<we-button-group class="ml-auto">
<we-imagepicker title="Image" data-background="" data-button-style="true"/>
<we-button title="None" data-background="">
<i class="fa fa-fw fa-ban"/>
</we-button>
</we-button-group>
</we-row>
<we-select string="Size" data-cover-opt-name="size">
<we-button data-select-class="o_full_screen_height">Full Screen</we-button>
<we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
addons/website_blog/static/src/js/tours/website_blog.js
+1 -1
View File
@@ -27,7 +27,7 @@ odoo.define("website_blog.tour", function (require) {
position: "top",
run: "text",
}, {
trigger: "we-button:has(.fa-camera)",
trigger: "we-button[data-background]:nth(1)",
extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
content: _t("Set a blog post <b>cover</b>."),
position: "right",