[FIX] web_editor: restore media dialog cleanup of each media type

Since [1] when the media dialog was refactored to owl, some of the
classes clean up when switching across media types were lost.

This commit restores the clean up for each media type - as they were
before [1].

Steps to reproduce:
(Just one example - there are many scenarios)
- Drop a "Text - Image" block.
- Apply a rounded circle on the image.
- Replace the image by a video.
=> The rounded circle effect remains but cannot be removed.

[1]: https://github.com/odoo/odoo/commit/7fd0698cf765a79959566b51e33cb76bff83d344

task-2829971

Part-of: odoo/odoo#95287
This commit is contained in:
Benoit Socias
2022-07-07 16:07:00 +02:00
parent d28feaa5a6
commit 9ca349bbdb
5 changed files with 23 additions and 1 deletions
@@ -66,6 +66,7 @@ export class DocumentSelector extends FileSelector {
}
}
DocumentSelector.mediaSpecificClasses = ['o_image'];
DocumentSelector.mediaExtraClasses = [];
DocumentSelector.tagNames = ['A'];
DocumentSelector.attachmentsListTemplate = 'web_editor.DocumentsListTemplate';
DocumentSelector.components = {
@@ -62,7 +62,11 @@ export class IconSelector extends Component {
return allFonts;
}
}
IconSelector.mediaSpecificClasses = [];
IconSelector.mediaSpecificClasses = ['fa'];
IconSelector.mediaExtraClasses = [
'rounded-circle', 'rounded', 'thumbnail', 'shadow',
/^text-\S+$/, /^bg-\S+$/, /^fa-\S+$/,
];
IconSelector.tagNames = ['SPAN', 'I'];
IconSelector.template = 'web_editor.IconSelector';
IconSelector.components = {
@@ -253,6 +253,9 @@ export class ImageSelector extends FileSelector {
}
}
ImageSelector.mediaSpecificClasses = ['img', 'img-fluid', 'o_we_custom_image'];
ImageSelector.mediaExtraClasses = [
'rounded-circle', 'rounded', 'thumbnail', 'shadow', /^img-\S+$/,
];
ImageSelector.tagNames = ['IMG'];
ImageSelector.attachmentsListTemplate = 'web_editor.ImagesListTemplate';
ImageSelector.components = {
@@ -160,6 +160,19 @@ export class MediaDialog extends Component {
}
for (const otherTab of Object.keys(TABS).filter(key => key !== this.state.activeTab)) {
element.classList.remove(...TABS[otherTab].Component.mediaSpecificClasses);
const extraClassesToRemove = [];
for (const name of TABS[otherTab].Component.mediaExtraClasses) {
if (typeof(name) === 'string') {
extraClassesToRemove.push(name);
} else { // Regex
for (const className of element.classList) {
if (className.match(name)) {
extraClassesToRemove.push(className);
}
}
}
}
element.classList.remove(...extraClassesToRemove);
}
element.classList.remove(...this.initialIconClasses);
element.classList.remove('o_modified_image_to_save');
@@ -193,6 +193,7 @@ export class VideoSelector extends Component {
}
}
VideoSelector.mediaSpecificClasses = ['media_iframe_video'];
VideoSelector.mediaExtraClasses = [];
VideoSelector.tagNames = ['IFRAME', 'DIV'];
VideoSelector.template = 'web_editor.VideoSelector';
VideoSelector.components = {