[IMP] website, *: add assets_media_dialog and use assets_editor

*: web, web_editor, web_unsplash, website_blog, website_event,
   website_forum, website_hr_recruitment, website_links,
   website_livechat, website_sale, website_slides, website_twitter

This commit fixes two issues related to the loading the wysiwyg and
editor assets.

The media dialog components are now defined in a new assets_media_dialog
bundle, to make them available both in the frontend (needed to post
comments on the forum for example), and in the backend (used in the
context of the wysiwyg edition or in the seo dialog). Ideally, The media
dialog component would lazy load its own bundle, but right now, it is
not possible when used in a ComponentWrapper.

The wysiwyg assets are now completely loaded in the frontend, after
creating the website root, when the frontend is displayed in an iframe.
It would be better if the frontend loads only what it needs of the
wysiwyg assets (some editor classes and the drop zones css), an
improvement would be to create an assets_wysiwyg_frontend or
assets_wysiwyg_minimal bundle.

The website edition components are moved to the assets_editor bundle.
For now, this bundle is included in the backend and the edition menus
are hidden from the users that are not website publishers. Ideally, the
client action would lazy load the assets_editor, only if the user is a
website publisher.

Many optimizations regarding assets will be done post-merge.

See merge commit for more information.

task-2687506
This commit is contained in:
Younn Olivier
2022-06-24 10:28:07 +02:00
committed by qsm-odoo
parent a3dd4e34bd
commit a154ee7ad6
21 changed files with 102 additions and 137 deletions
@@ -21,7 +21,7 @@ import {
} from "../../utils";
import { standaloneAdapter } from "web.OwlCompatibility";
import { fetchAndProcessTemplates } from "@web/core/assets";
import { fetchAndProcessTemplates, loadBundle } from "@web/core/assets";
import { makeEnv, startServices } from "@web/env";
import { MainComponentsContainer } from "@web/core/main_components_container";
import { browser } from '@web/core/browser/browser';
@@ -410,14 +410,16 @@ export async function createPublicRoot(RootWidget) {
mapLegacyEnvToWowlEnv(legacyEnv, wowlEnv);
// The root widget's parent is a standalone adapter so that it has _trigger_up
const publicRoot = new RootWidget(standaloneAdapter({ Component }));
const app = new App(MainComponentsContainer, {
env: wowlEnv,
dev: wowlEnv.debug,
templates: window.__OWL_TEMPLATES__,
translateFn: _t,
translatableAttributes: ["data-tooltip"],
});
loadBundle.app = app;
await Promise.all([
new App(MainComponentsContainer, {
env: wowlEnv,
dev: wowlEnv.debug,
templates: window.__OWL_TEMPLATES__,
translateFn: _t,
translatableAttributes: ["data-tooltip"],
}).mount(document.body),
app.mount(document.body),
publicRoot.attachTo(document.body),
]);
return publicRoot;
+12 -5
View File
@@ -27,7 +27,6 @@ Odoo Web Editor widget.
'web_editor/static/src/components/**/*.xml',
],
'web_editor.assets_wysiwyg': [
# lib
'web_editor/static/lib/cropperjs/cropper.css',
'web_editor/static/lib/cropperjs/cropper.js',
@@ -86,6 +85,14 @@ Odoo Web Editor widget.
'web_editor/static/src/js/wysiwyg/wysiwyg.js',
'web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js',
],
'web_editor.assets_media_dialog': [
'web_editor/static/src/components/media_dialog/*.js',
'web_editor/static/src/components/media_dialog/*.scss',
'web_editor/static/src/components/media_dialog/*.xml',
'web_editor/static/src/components/upload_progress_toast/*.js',
'web_editor/static/src/components/upload_progress_toast/*.scss',
'web_editor/static/src/components/upload_progress_toast/*.xml',
],
'web.assets_common': [
'web_editor/static/lib/odoo-editor/src/base_style.css',
'web_editor/static/lib/vkbeautify/**/*',
@@ -94,21 +101,21 @@ Odoo Web Editor widget.
'web_editor/static/src/js/wysiwyg/fonts.js',
],
'web.assets_backend': [
('include', 'web_editor.assets_media_dialog'),
'web_editor/static/src/scss/web_editor.common.scss',
'web_editor/static/src/scss/web_editor.backend.scss',
'web_editor/static/src/js/wysiwyg/dialog.js',
'web_editor/static/src/js/frontend/loader.js',
'web_editor/static/src/js/backend/**/*',
'web_editor/static/src/components/media_dialog/*.js',
'web_editor/static/src/components/media_dialog/*.scss',
'web_editor/static/src/components/upload_progress_toast/*.js',
'web_editor/static/src/components/upload_progress_toast/*.scss',
],
'web.assets_frontend_minimal': [
'web_editor/static/src/js/frontend/loader_loading.js',
],
'web.assets_frontend': [
('include', 'web_editor.assets_media_dialog'),
'web_editor/static/src/scss/web_editor.common.scss',
'web_editor/static/src/scss/web_editor.frontend.scss',
+1 -1
View File
@@ -15,7 +15,7 @@
'web.assets_frontend': [
'web_unsplash/static/src/js/unsplash_beacon.js',
],
'web.assets_backend': [
'web_editor.assets_media_dialog': [
'web_unsplash/static/src/components/media_dialog/*.js',
'web_unsplash/static/src/services/unsplash_service.js',
],
+28 -56
View File
@@ -154,6 +154,7 @@
'website/static/tests/tours/**/*',
],
'web.assets_backend': [
('include', 'website.assets_editor'),
'website/static/src/scss/color_palettes.scss',
'website/static/src/scss/view_hierarchy.scss',
'website/static/src/scss/website.backend.scss',
@@ -168,29 +169,11 @@
'website/static/src/js/theme_preview_form.js',
'website/static/src/client_actions/*/*.js',
'website/static/src/client_actions/*/*.scss',
'website/static/src/services/website_service.js',
'website/static/src/components/navbar/navbar.js',
'website/static/src/components/editor/editor.js',
'website/static/src/components/editor/editor.scss',
'website/static/src/components/ace_editor/ace_editor.js',
'website/static/src/components/ace_editor/ace_editor.scss',
'website/static/src/components/dialog/*.js',
'website/static/src/components/dialog/*.scss',
'website/static/src/components/fields/fields.js',
'website/static/src/components/switch/switch.js',
'website/static/src/components/switch/switch.scss',
'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
'website/static/src/components/wysiwyg_adapter/page_options.js',
'website/static/src/js/form_editor_registry.js',
'website/static/src/js/tours/tour_utils.js',
'website/static/src/components/fullscreen_indication/fullscreen_indication.js',
'website/static/src/components/fullscreen_indication/fullscreen_indication.scss',
'website/static/src/components/media_dialog/image_selector.js',
'website/static/src/systray_items/*.js',
'website/static/src/systray_items/*.scss',
'website/static/src/js/new_content_form.js',
'website/static/src/services/website_service.js',
'website/static/src/js/utils.js',
'website/static/src/components/translator/*',
'website/static/src/js/website_page_list.js',
],
'web.qunit_suite_tests': [
@@ -205,6 +188,7 @@
'web_editor/static/src/scss/bootstrap_overridden.scss',
'web/static/lib/bootstrap/scss/_variables.scss',
'website/static/src/scss/website.wysiwyg.scss',
'website/static/src/scss/website.edit_mode.scss',
'website/static/src/js/editor/editor.js',
'website/static/src/js/editor/snippets.editor.js',
'website/static/src/js/editor/snippets.options.js',
@@ -236,55 +220,43 @@
'website/static/src/js/editor/widget_link.js',
'website/static/src/js/widgets/link_popover_widget.js',
],
'website.assets_editor_frontend': [
('include', 'web._assets_helpers'),
'web_editor/static/src/scss/bootstrap_overridden.scss',
'web/static/lib/bootstrap/scss/_variables.scss',
'web_editor/static/src/scss/wysiwyg.scss',
'website/static/src/scss/website.edit_mode.scss',
'web/static/lib/nearest/jquery.nearest.js',
'web_editor/static/lib/odoo-editor/src/style.css',
'web_editor/static/lib/odoo-editor/src/utils/constants.js',
'web_editor/static/lib/odoo-editor/src/utils/sanitize.js',
'web_editor/static/lib/odoo-editor/src/utils/serialize.js',
'web_editor/static/lib/odoo-editor/src/utils/DOMPurify.js',
'web_editor/static/lib/odoo-editor/src/tablepicker/TablePicker.js',
'web_editor/static/lib/odoo-editor/src/commands/align.js',
'web_editor/static/lib/odoo-editor/src/commands/commands.js',
'web_editor/static/lib/odoo-editor/src/commands/deleteBackward.js',
'web_editor/static/lib/odoo-editor/src/commands/deleteForward.js',
'web_editor/static/lib/odoo-editor/src/commands/enter.js',
'web_editor/static/lib/odoo-editor/src/commands/shiftEnter.js',
'web_editor/static/lib/odoo-editor/src/commands/shiftTab.js',
'web_editor/static/lib/odoo-editor/src/commands/tab.js',
'web_editor/static/lib/odoo-editor/src/commands/toggleList.js',
'web_editor.assets_media_dialog': [
'website/static/src/components/media_dialog/image_selector.js',
],
'website.assets_editor': [
('include', 'web._assets_helpers'),
'web/static/lib/bootstrap/scss/_variables.scss',
'web/static/src/legacy/scss/ace.scss',
'website/static/src/scss/website.editor.ui.scss',
'website/static/src/scss/website.theme_install.scss',
'website/static/src/components/dialog/edit_menu.js',
'website/static/src/js/menu/customize.js',
'website/static/src/js/menu/debug_menu.js',
'website/static/src/components/ace_editor/ace_editor.js',
'website/static/src/components/ace_editor/ace_editor.scss',
'website/static/src/components/dialog/*.js',
'website/static/src/components/dialog/*.scss',
'website/static/src/components/editor/editor.js',
'website/static/src/components/editor/editor.scss',
'website/static/src/components/navbar/navbar.js',
'website/static/src/components/switch/switch.js',
'website/static/src/components/switch/switch.scss',
'website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js',
'website/static/src/systray_items/mobile_preview.js',
'website/static/src/components/dialog/seo.js',
'website/static/src/components/wysiwyg_adapter/page_options.js',
'website/static/src/components/translator/translator.js',
'website/static/src/components/translator/translator.scss',
'website/static/src/js/form_editor_registry.js',
'website/static/src/js/new_content_form.js',
'website/static/src/js/tours/homepage.js',
'website/static/src/js/tours/tour_utils.js',
'website/static/src/systray_items/*.js',
'website/static/src/systray_items/*.scss',
],
'web.assets_qweb': [
'website/static/src/client_actions/*/*.xml',
'website/static/src/components/dialog/*.xml',
'website/static/src/components/editor/editor.xml',
'website/static/src/components/fields/fields.xml',
'website/static/src/components/navbar/navbar.xml',
'website/static/src/components/translator/*.xml',
'website/static/src/systray_items/*.xml',
'website/static/src/xml/website.backend.xml',
'website/static/src/xml/website_widget.xml',
'website/static/src/xml/theme_preview.xml',
'website/static/src/components/dialog/*',
'website/static/src/components/fields/fields.xml',
'website/static/src/components/editor/editor.xml',
'website/static/src/client_actions/*/*.xml',
'website/static/src/systray_items/*.xml',
'website/static/src/components/translator/*.xml',
'website/static/src/components/navbar/navbar.xml',
],
'website.test_bundle': [
'/web/static/lib/qweb/qweb2.js',
-1
View File
@@ -687,7 +687,6 @@ class Website(Home):
return {
'web.assets_common': request.env['ir.qweb']._get_asset_link_urls('web.assets_common', request.session.debug),
'web.assets_frontend': request.env['ir.qweb']._get_asset_link_urls('web.assets_frontend', request.session.debug),
'website.assets_editor_frontend': request.env['ir.qweb']._get_asset_link_urls('website.assets_editor_frontend', request.session.debug),
}
# ------------------------------------------------------
@@ -49,6 +49,7 @@ export class WebsitePreview extends Component {
this.websiteService = useService('website');
this.dialogService = useService('dialog');
this.title = useService('title');
this.user = useService('user');
this.iframeFallbackUrl = '/website/iframefallback';
@@ -57,6 +58,7 @@ export class WebsitePreview extends Component {
this.websiteContext = useState(this.websiteService.context);
onWillStart(async () => {
this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
await this.websiteService.fetchWebsites();
const encodedPath = encodeURIComponent(this.path);
this.initialUrl = `/website/force/${this.websiteId}?path=${encodedPath}`;
@@ -151,12 +153,14 @@ export class WebsitePreview extends Component {
}
addWelcomeMessage() {
const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
if ($wrap.length && $wrap.html().trim() === '') {
this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
$wrap.empty().append(this.$welcomeMessage);
if (this.isWebsitePublisher) {
const $wrap = $(this.iframe.el.contentDocument.querySelector('#wrapwrap.homepage')).find('#wrap');
if ($wrap.length && $wrap.html().trim() === '') {
this.$welcomeMessage = $(core.qweb.render('website.homepage_editor_welcome_message'));
this.$welcomeMessage.addClass('o_homepage_editor_welcome_message');
this.$welcomeMessage.css('min-height', $wrap.parent('main').height() - ($wrap.outerHeight(true) - $wrap.height()));
$wrap.empty().append(this.$welcomeMessage);
}
}
}
@@ -10,13 +10,14 @@ import {WebsiteAceEditor, AceEditorAdapterComponent} from '@website/components/a
import {PagePropertiesDialogWrapper} from '@website/components/dialog/page_properties';
const websiteSystrayRegistry = registry.category('website_systray');
const {useState} = owl;
const { useState, onWillStart } = owl;
patch(NavBar.prototype, 'website_navbar', {
setup() {
this._super();
this.websiteService = useService('website');
this.dialogService = useService('dialog');
this.user = useService('user');
this.websiteContext = useState(this.websiteService.context);
this.aceEditor = WebsiteAceEditor;
@@ -56,12 +57,18 @@ patch(NavBar.prototype, 'website_navbar', {
isDisplayed: () => this.canShowPageProperties(),
},
};
onWillStart(async () => {
this.isWebsitePublisher = await this.user.hasGroup('website.group_website_publisher');
});
},
filterWebsiteMenus(sections) {
const filteredSections = [];
for (const section of sections) {
if (!this.websiteEditingMenus[section.xmlid] || this.websiteEditingMenus[section.xmlid].isDisplayed()) {
const isWebsiteCustomMenu = this.websiteEditingMenus[section.xmlid];
const displayWebsiteCustomMenu = isWebsiteCustomMenu && this.isWebsitePublisher && this.websiteEditingMenus[section.xmlid].isDisplayed();
if (!isWebsiteCustomMenu || displayWebsiteCustomMenu) {
let subSections = [];
if (section.childrenTree.length) {
subSections = this.filterWebsiteMenus(section.childrenTree);
@@ -76,7 +83,7 @@ patch(NavBar.prototype, 'website_navbar', {
* @override
*/
get systrayItems() {
if (this.websiteService.currentWebsite) {
if (this.websiteService.currentWebsite && this.isWebsitePublisher) {
return websiteSystrayRegistry
.getEntries()
.map(([key, value], index) => ({ key, ...value, index }))
@@ -2,5 +2,13 @@
import { createPublicRoot } from "@web/legacy/js/public/public_root";
import { WebsiteRoot } from "./website_root";
import { loadWysiwyg } from "web_editor.loader";
export default createPublicRoot(WebsiteRoot);
export default createPublicRoot(WebsiteRoot).then(rootInstance => {
if (window.parent !== window) {
loadWysiwyg(['website.compiled_assets_wysiwyg']).then(() => {
window.dispatchEvent(new CustomEvent('PUBLIC-ROOT-READY', {detail: {rootInstance}}));
});
}
return rootInstance;
});
@@ -241,27 +241,6 @@ body.editor_enable {
}
}
}
.oe_drop_zone {
background-color: rgba($o-brand-odoo, 0.15);
animation: dropZoneInsert 1s linear 0s infinite alternate;
&.oe_insert {
position: relative;
z-index: $o-we-overlay-zindex;
width: 100%;
min-width: $o-we-dropzone-size;
height: $o-we-dropzone-size;
min-height: $o-we-dropzone-size;
margin: (-$o-we-dropzone-size/2) 0;
border: 2px dashed $o-we-border-color;
&.oe_vertical {
width: $o-we-dropzone-size;
float: left;
margin: 0 (-$o-we-dropzone-size/2);
}
}
}
.o_homepage_editor_welcome_message {
padding-top: 128px;
padding-bottom: 128px;
@@ -120,9 +120,6 @@ export const websiteService = {
get editedObjectPath() {
return editedObjectPath;
},
get wysiwygLoaded() {
return !!Wysiwyg;
},
goToWebsite({ websiteId, path, edition, translation } = {}) {
action.doAction('website.website_preview', {
clearBreadcrumbs: true,
@@ -14,14 +14,17 @@ class EditWebsiteSystray extends Component {
isLoading: false,
});
useEffect((edition, snippetsLoaded) => {
useEffect((edition) => {
if (edition) {
this.state.isLoading = true;
}
}, () => [this.websiteContext.edition]);
useEffect((snippetsLoaded) => {
if (snippetsLoaded) {
this.state.isLoading = false;
}
if (edition && !this.websiteService.wysiwygLoaded) {
this.state.isLoading = true;
}
}, () => [this.websiteContext.edition, this.websiteContext.snippetsLoaded]);
}, () => [this.websiteContext.snippetsLoaded]);
}
get translatable() {
@@ -125,13 +125,6 @@
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/>
</xpath>
<xpath expr="//head/t[@t-js='false'][last()]" position="after">
<t t-call-assets="website.assets_editor_frontend" t-js="false" groups="website.group_website_publisher"/>
</xpath>
<xpath expr="//head/t[@t-css='false'][last()]" position="after">
<t t-call-assets="website.assets_editor_frontend" t-css="false" groups="website.group_website_publisher" lazy_load="True"/>
</xpath>
<xpath expr="//header" position="attributes">
<attribute name="data-name">Header</attribute>
</xpath>
+1 -3
View File
@@ -37,15 +37,13 @@
],
'website.assets_editor': [
'website_blog/static/src/js/tours/website_blog.js',
'website_blog/static/src/js/systray_items/*.js',
],
'web.assets_frontend': [
'website_blog/static/src/scss/website_blog.scss',
'website_blog/static/src/js/contentshare.js',
'website_blog/static/src/js/website_blog.js',
],
'web.assets_backend': [
'website_blog/static/src/js/systray_items/*.js',
],
},
'license': 'LGPL-3',
}
+1 -1
View File
@@ -63,7 +63,7 @@
'/website_event/static/src/snippets/s_events/options.js',
'website_event/static/src/snippets/options.js',
],
'web.assets_backend': [
'website.assets_editor': [
'website_event/static/src/js/systray_items/*.js',
],
},
+1 -3
View File
@@ -43,6 +43,7 @@ Ask questions, get answers, no distractions
'assets': {
'website.assets_editor': [
'website_forum/static/src/js/tours/website_forum.js',
'website_forum/static/src/js/systray_items/*.js',
],
'web.assets_tests': [
'website_forum/static/tests/**/*',
@@ -52,9 +53,6 @@ Ask questions, get answers, no distractions
'website_forum/static/src/js/website_forum.js',
'website_forum/static/src/js/website_forum.share.js',
],
'web.assets_backend': [
'website_forum/static/src/js/systray_items/*.js',
],
'web.assets_qweb': [
'website_forum/static/src/xml/*.xml',
],
@@ -28,11 +28,9 @@
'web.assets_frontend': [
'website_hr_recruitment/static/src/scss/**/*',
],
'web.assets_backend': [
'website_hr_recruitment/static/src/js/systray_items/new_content.js',
],
'website.assets_editor': [
'website_hr_recruitment/static/src/js/**/*',
'website_hr_recruitment/static/src/js/systray_items/new_content.js',
'website_hr_recruitment/static/src/js/website_hr_recruitment_editor.js',
],
'web.assets_tests': [
'website_hr_recruitment/static/tests/**/*',
+3 -3
View File
@@ -22,12 +22,12 @@ Those trackers can be used in Google Analytics to track clicks and visitors, or
'website_links/static/src/js/website_links_charts.js',
'website_links/static/src/css/website_links.css',
],
'web.assets_backend': [
'website_links/static/src/components/navbar/navbar.js',
],
'web.assets_tests': [
'website_links/static/tests/**/*',
],
'website.assets_editor': [
'website_links/static/src/components/navbar/navbar.js',
],
'web.assets_qweb': [
'website_links/static/src/xml/*.xml',
],
+1 -3
View File
@@ -36,14 +36,12 @@ Allow website visitors to chat with the collaborators. This module also brings a
'website_livechat/static/src/models/*.js',
],
'website.assets_editor': [
'website_livechat/static/src/js/**/*',
'website_livechat/static/src/js/systray_items/*.js',
],
'web.assets_backend': [
'website_livechat/static/src/components/*/*.js',
'website_livechat/static/src/components/*/*.scss',
'website_livechat/static/src/models/*.js',
'website_livechat/static/src/js/systray_items/new_content.js',
'website_livechat/static/src/js/systray_items/*.js',
],
'web.assets_tests': [
'website_livechat/static/tests/tours/**/*',
+1 -1
View File
@@ -67,7 +67,6 @@
'website_sale/static/src/scss/website_sale_dashboard.scss',
'website_sale/static/src/scss/website_sale_backend.scss',
'website_sale/static/src/js/tours/website_sale_shop_backend.js',
'website_sale/static/src/js/systray_items/*.js',
],
'website.assets_wysiwyg': [
'website_sale/static/src/scss/website_sale.editor.scss',
@@ -75,6 +74,7 @@
'website_sale/static/src/js/website_sale.editor.js',
],
'website.assets_editor': [
'website_sale/static/src/js/systray_items/*.js',
'website_sale/static/src/js/website_sale_form_editor.js',
'website_sale/static/src/js/tours/website_sale_shop_frontend.js',
],
+3 -1
View File
@@ -71,7 +71,6 @@ Featuring
'website_slides/static/src/js/slide_category_one2many.js',
'website_slides/static/src/js/rating_field_backend.js',
'website_slides/static/src/models/*.js',
'website_slides/static/src/js/systray_items/*.js',
],
'web.assets_frontend': [
'website_slides/static/src/scss/website_slides.scss',
@@ -98,6 +97,9 @@ Featuring
'website_slides/static/src/js/tours/slides_tour.js',
'website_slides/static/src/js/portal_chatter.js',
],
'website.assets_editor': [
'website_slides/static/src/js/systray_items/*.js',
],
'web.assets_tests': [
'website_slides/static/tests/tours/*.js',
],
+1 -1
View File
@@ -22,7 +22,7 @@ This module adds a Twitter scroller building block to the website builder, so th
'website_twitter/static/src/scss/website_twitter.scss',
'website_twitter/static/src/js/website.twitter.animation.js',
],
'website.assets_editor': [
'website.assets_wysiwyg': [
'website_twitter/static/src/js/website.twitter.editor.js',
],
},