diff --git a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js index 679029353b0..088c80acdf0 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js @@ -6,7 +6,7 @@ import { standardFieldProps } from "@web/views/fields/standard_field_props"; import { initializeDesignTabCss } from "@mass_mailing/js/mass_mailing_design_constants" import { toInline, getCSSRules } from "@web_editor/js/backend/convert_inline"; import { getBundle, loadBundle } from "@web/core/assets"; -import { qweb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import { useService } from "@web/core/utils/hooks"; import { buildQuery } from "@web/legacy/js/core/rpc"; import { HtmlField, htmlField } from "@web_editor/js/backend/html_field"; @@ -331,7 +331,7 @@ export class MassMailingHtmlField extends HtmlField { // Create theme selection screen and check if it must be forced opened. // Reforce it opened if the last snippet is removed. - const $themeSelectorNew = $(qweb.render("mass_mailing.theme_selector_new", { + const $themeSelectorNew = $(renderToElement("mass_mailing.theme_selector_new", { themes: themesParams, templates: templatesParams, modelName: this.props.record.data.mailing_model_id[1] || '', diff --git a/addons/payment/static/src/js/post_processing.js b/addons/payment/static/src/js/post_processing.js index c215fd3c59e..7149ffd55f8 100644 --- a/addons/payment/static/src/js/post_processing.js +++ b/addons/payment/static/src/js/post_processing.js @@ -2,6 +2,7 @@ import publicWidget from "@web/legacy/js/public/public_widget"; import core from "@web/legacy/js/services/core"; + import { renderToElement } from "@web/core/utils/render"; import { Markup } from "@web/legacy/js/core/utils"; import { _t } from "@web/core/l10n/translation"; @@ -122,9 +123,8 @@ this.displayContent("payment.display_tx_list", render_values); }, displayContent: function (xmlid, render_values) { - var html = core.qweb.render(xmlid, render_values); $.unblockUI(); - this.$el.find('div[name="o_payment_status_content"]').html(html); + this.$el.find('div[name="o_payment_status_content"]').empty().append(renderToElement(xmlid, render_values)); }, displayLoading: function () { var msg = _t("We are processing your payment, please wait ..."); diff --git a/addons/portal/static/src/js/portal_chatter.js b/addons/portal/static/src/js/portal_chatter.js index 13ef4d96026..ae4b8e7ccd5 100644 --- a/addons/portal/static/src/js/portal_chatter.js +++ b/addons/portal/static/src/js/portal_chatter.js @@ -1,14 +1,13 @@ /** @odoo-module **/ import core from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import dom from "@web/legacy/js/core/dom"; import publicWidget from "@web/legacy/js/public/public_widget"; import portalComposer from "@portal/js/portal_composer"; import { Markup } from "@web/legacy/js/core/utils"; import { range } from "@web/core/utils/numbers"; -var qweb = core.qweb; - /** * Widget PortalChatter * @@ -260,13 +259,13 @@ var PortalChatter = publicWidget.Widget.extend({ }; }, _renderMessages: function () { - this.$('.o_portal_chatter_messages').html(qweb.render("portal.chatter_messages", {widget: this})); + this.$('.o_portal_chatter_messages').empty().append(renderToElement("portal.chatter_messages", {widget: this})); }, _renderMessageCount: function () { - this.$('.o_message_counter').replaceWith(qweb.render("portal.chatter_message_count", {widget: this})); + this.$('.o_message_counter').replaceWith(renderToElement("portal.chatter_message_count", {widget: this})); }, _renderPager: function () { - this.$('.o_portal_chatter_pager').replaceWith(qweb.render("portal.pager", {widget: this})); + this.$('.o_portal_chatter_pager').replaceWith(renderToElement("portal.pager", {widget: this})); }, //-------------------------------------------------------------------------- diff --git a/addons/portal/static/src/js/portal_composer.js b/addons/portal/static/src/js/portal_composer.js index c3f9b079a5e..e3c02c1e21d 100644 --- a/addons/portal/static/src/js/portal_composer.js +++ b/addons/portal/static/src/js/portal_composer.js @@ -4,10 +4,9 @@ import { _t } from "@web/core/l10n/translation"; import { escape } from "@web/core/utils/strings"; import ajax from "@web/legacy/js/core/ajax"; import core from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import publicWidget from "@web/legacy/js/public/public_widget"; -var qweb = core.qweb; - /** * Widget PortalComposer * @@ -183,7 +182,7 @@ var PortalComposer = publicWidget.Widget.extend({ * @private */ _updateAttachments: function () { - this.$attachments.html(qweb.render('portal.Chatter.Attachments', { + this.$attachments.empty().append(renderToElement('portal.Chatter.Attachments', { attachments: this.attachments, showDelete: true, })); diff --git a/addons/portal/static/src/js/portal_security.js b/addons/portal/static/src/js/portal_security.js index dc6fb5946d7..0cfa36c0886 100644 --- a/addons/portal/static/src/js/portal_security.js +++ b/addons/portal/static/src/js/portal_security.js @@ -2,7 +2,8 @@ import publicWidget from '@web/legacy/js/public/public_widget'; import Dialog from "@web/legacy/js/core/dialog"; -import {_t, qweb} from "@web/legacy/js/services/core"; +import { _t } from "@web/legacy/js/services/core"; +import { renderToString } from "@web/core/utils/render"; import session from "web.session"; publicWidget.registry.NewAPIKeyButton = publicWidget.Widget.extend({ @@ -26,7 +27,7 @@ publicWidget.registry.NewAPIKeyButton = publicWidget.Widget.extend({ const self = this; const d_description = new Dialog(self, { title: _t('New API Key'), - $content: qweb.render('portal.keydescription'), + $content: renderToString('portal.keydescription'), buttons: [{text: _t('Confirm'), classes: 'btn-primary', close: true, click: async () => { var description = d_description.el.querySelector('[name="description"]').value; var wizard_id = await this._rpc({ @@ -44,7 +45,7 @@ publicWidget.registry.NewAPIKeyButton = publicWidget.Widget.extend({ ); const d_show = new Dialog(self, { title: _t('API Key Ready'), - $content: qweb.render('portal.keyshow', {key: res.context.default_key}), + $content: renderToString('portal.keyshow', {key: res.context.default_key}), buttons: [{text: _t('Close'), clases: 'btn-primary', close: true}], }); d_show.on('closed', this, () => { @@ -132,7 +133,7 @@ publicWidget.registry.RevokeSessionsButton = publicWidget.Widget.extend({ function handleRevokeSessions(rpc, wrapped) { return wrapped.then((inst) => { const check_id = inst.res_id - var $content = $(qweb.render("portal.revoke_all_devices_popup_template")); + var $content = $(renderToString("portal.revoke_all_devices_popup_template")); return new Promise((resolve) => { var dialog = new Dialog(this, { title: _t("Log out from all devices?"), @@ -210,7 +211,7 @@ export function handleCheckIdentity(rpc, wrapped) { return new Promise((resolve, reject) => { const d = new Dialog(null, { title: _t("Security Control"), - $content: qweb.render('portal.identitycheck'), + $content: renderToString('portal.identitycheck'), buttons: [{ text: _t("Confirm Password"), classes: 'btn btn-primary', // nb: if click & close, waits for click to resolve before closing diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js index 168b4fe0b00..2bcc20c0b14 100644 --- a/addons/portal/static/src/js/portal_signature.js +++ b/addons/portal/static/src/js/portal_signature.js @@ -1,10 +1,9 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import { _t } from "@web/core/l10n/translation"; +import { renderToElement } from "@web/core/utils/render"; import publicWidget from "@web/legacy/js/public/public_widget"; import { NameAndSignature } from "@web/legacy/js/widgets/name_and_signature"; -var qweb = core.qweb; /** * This widget is a signature request form. It uses @@ -117,9 +116,9 @@ var SignatureForm = publicWidget.Widget.extend({ }).then(function (data) { if (data.error) { self.$('.o_portal_sign_error_msg').remove(); - self.$controls.prepend(qweb.render('portal.portal_signature_error', {widget: data})); + self.$controls.prepend(renderToElement('portal.portal_signature_error', {widget: data})); } else if (data.success) { - var $success = qweb.render('portal.portal_signature_success', {widget: data}); + var $success = renderToElement('portal.portal_signature_success', {widget: data}); self.$el.empty().append($success); } if (data.force_refresh) { diff --git a/addons/portal_rating/static/src/js/portal_chatter.js b/addons/portal_rating/static/src/js/portal_chatter.js index f0ce14ac4fe..8067acaf30a 100644 --- a/addons/portal_rating/static/src/js/portal_chatter.js +++ b/addons/portal_rating/static/src/js/portal_chatter.js @@ -1,11 +1,9 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import { _t } from "@web/core/l10n/translation"; import PortalChatter from "@portal/js/portal_chatter"; import { roundPrecision } from "@web/core/utils/numbers"; - -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; /** * PortalChatter @@ -162,7 +160,7 @@ PortalChatter.include({ * @private */ _renderRatingCard: function () { - this.$('.o_website_rating_card_container').replaceWith(qweb.render("portal_rating.rating_card", {widget: this})); + this.$('.o_website_rating_card_container').replaceWith(renderToElement("portal_rating.rating_card", {widget: this})); }, /** * Default rating data for publisher comment qweb template @@ -280,7 +278,7 @@ PortalChatter.include({ var oldRating = this.messages[messageIndex].rating; data.rating.publisher_comment = oldRating.publisher_comment ? oldRating.publisher_comment : ''; - this._getCommentContainer($source).html($(qweb.render("portal_rating.chatter_rating_publisher_form", data))); + this._getCommentContainer($source).empty().append(renderToElement("portal_rating.chatter_rating_publisher_form", data)); this._focusTextComment($source); }, @@ -333,10 +331,10 @@ PortalChatter.include({ if (self.messages[messageIndex].rating.publisher_comment !== '') { // Remove the button comment if exist and render the comment self._getCommentButton($source).addClass('d-none'); - self._getCommentContainer($source).html($(qweb.render("portal_rating.chatter_rating_publisher_comment", { + self._getCommentContainer($source).empty().append(renderToElement("portal_rating.chatter_rating_publisher_comment", { rating: self.messages[messageIndex].rating, is_publisher: self.options.is_user_publisher - }))); + })); } else { // Empty string or false considers as no comment self._getCommentButton($source).removeClass("d-none"); @@ -354,14 +352,13 @@ PortalChatter.include({ var messageIndex = $source.data("mes_index"); var comment = this.messages[messageIndex].rating.publisher_comment; + this._getCommentContainer($source).empty(); if (comment) { var data = { rating: this.messages[messageIndex].rating, - is_publisher: this.options.is_user_publisher + is_publisher: this.options.is_user_publisher, }; - this._getCommentContainer($source).html($(qweb.render("portal_rating.chatter_rating_publisher_comment", data))); - } else { - this._getCommentContainer($source).empty(); + this._getCommentContainer($source).append(renderToElement("portal_rating.chatter_rating_publisher_comment", data)); } }, diff --git a/addons/portal_rating/static/src/js/portal_rating_composer.js b/addons/portal_rating/static/src/js/portal_rating_composer.js index 72b8703860e..e61a5c02fd9 100644 --- a/addons/portal_rating/static/src/js/portal_rating_composer.js +++ b/addons/portal_rating/static/src/js/portal_rating_composer.js @@ -3,7 +3,8 @@ import publicWidget from "@web/legacy/js/public/public_widget"; import session from "web.session"; import portalComposer from "@portal/js/portal_composer"; -import {_t, qweb} from "@web/legacy/js/services/core"; +import { _t } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; const PortalComposer = portalComposer.PortalComposer; @@ -59,7 +60,7 @@ const RatingPopupComposer = publicWidget.Widget.extend({ if (this.options.hide_rating_avg) { this.$('.o_rating_popup_composer_stars').empty(); } else { - const ratingAverage = qweb.render( + const ratingAverage = renderToElement( 'portal_rating.rating_stars_static', { inline_mode: true, widget: this, @@ -69,12 +70,12 @@ const RatingPopupComposer = publicWidget.Widget.extend({ } // Append the modal - const modal = qweb.render( + const modal = renderToElement( 'portal_rating.PopupComposer', { inline_mode: true, widget: this, val: this.rating_avg, - }); + }) || ''; this.$('.o_rating_popup_composer_modal').html(modal); if (this._composer) { diff --git a/addons/survey/static/src/js/survey_session_text_answers.js b/addons/survey/static/src/js/survey_session_text_answers.js index e47f7dcfe5c..4d452a96075 100644 --- a/addons/survey/static/src/js/survey_session_text_answers.js +++ b/addons/survey/static/src/js/survey_session_text_answers.js @@ -1,12 +1,10 @@ /** @odoo-module **/ import publicWidget from "@web/legacy/js/public/public_widget"; -import core from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import time from "@web/legacy/js/core/time"; import SESSION_CHART_COLORS from "@survey/js/survey_session_colors"; -var QWeb = core.qweb; - publicWidget.registry.SurveySessionTextAnswers = publicWidget.Widget.extend({ init: function (parent, options) { this._super.apply(this, arguments); @@ -47,7 +45,7 @@ publicWidget.registry.SurveySessionTextAnswers = publicWidget.Widget.extend({ textValue = moment(textValue).format(time.getLangDatetimeFormat()); } - var $textAnswer = $(QWeb.render('survey.survey_session_text_answer', { + var $textAnswer = $(renderToElement('survey.survey_session_text_answer', { value: textValue, borderColor: `rgb(${SESSION_CHART_COLORS[self.answerIds.length % 10]})` })); diff --git a/addons/web/static/src/core/utils/render.js b/addons/web/static/src/core/utils/render.js index ef50087d4cf..db0f5cfcb95 100644 --- a/addons/web/static/src/core/utils/render.js +++ b/addons/web/static/src/core/utils/render.js @@ -6,6 +6,14 @@ export function renderToElement(template, context = {}) { return render(template, context).firstElementChild; } +export function renderToFragment(template, context = {}) { + const frag = document.createDocumentFragment(); + for (const el of [...render(template, context).children]) { + frag.appendChild(el); + } + return frag; +} + /** * renders a template with an (optional) context and outputs it as a string * diff --git a/addons/web/static/src/legacy/js/core/dialog.js b/addons/web/static/src/legacy/js/core/dialog.js index 2d22cbb7f5c..d7e80e96764 100644 --- a/addons/web/static/src/legacy/js/core/dialog.js +++ b/addons/web/static/src/legacy/js/core/dialog.js @@ -4,8 +4,8 @@ import core from "@web/legacy/js/services/core"; import dom from "@web/legacy/js/core/dom"; import Widget from "@web/legacy/js/core/widget"; import { _t } from "@web/core/l10n/translation"; - -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; +import { uniqueId } from "@web/core/utils/functions"; /** * A useful class to handle dialogs. @@ -113,13 +113,14 @@ var Dialog = Widget.extend({ var self = this; return this._super.apply(this, arguments).then(function () { // Render modal once xml dependencies are loaded - self.$modal = $(QWeb.render('web.DialogWidget', { + self.$modal = $(renderToElement('web.DialogWidget', { fullscreen: self.fullscreen, title: self.title, subtitle: self.subtitle, technical: self.technical, renderHeader: self.renderHeader, renderFooter: self.renderFooter, + uniqueId: uniqueId("modal_"), })); switch (self.size) { case 'extra-large': @@ -385,7 +386,7 @@ var Dialog = Widget.extend({ $primaryButton.tooltip({ delay: {show: 200, hide:0}, title: function(){ - return QWeb.render('FormButton.tooltip',{title:$primaryButton.text().toUpperCase()}); + return renderToElement('FormButton.tooltip',{title:$primaryButton.text().toUpperCase()}); }, trigger: 'manual', }); diff --git a/addons/web/static/src/legacy/js/core/widget.js b/addons/web/static/src/legacy/js/core/widget.js index 6a283fbe03a..666a64bd2ee 100644 --- a/addons/web/static/src/legacy/js/core/widget.js +++ b/addons/web/static/src/legacy/js/core/widget.js @@ -4,7 +4,7 @@ import core from "@web/legacy/js/services/core"; import mixins from "@web/legacy/js/core/mixins"; import ServicesMixin from "@web/legacy/js/core/service_mixins"; import { loadBundle } from "@web/core/assets"; - +import { renderToElement } from "@web/core/utils/render"; /** * Base class for all visual components. Provides a lot of functions helpful @@ -270,7 +270,7 @@ export var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin, { renderElement: function () { var $el; if (this.template) { - $el = $(core.qweb.render(this.template, {widget: this}).trim()); + $el = $(renderToElement(this.template, { widget: this })); } else { $el = this._makeDescriptive(); } diff --git a/addons/web/static/src/legacy/js/public/public_root.js b/addons/web/static/src/legacy/js/public/public_root.js index 8f87f311773..0297bea5822 100644 --- a/addons/web/static/src/legacy/js/public/public_root.js +++ b/addons/web/static/src/legacy/js/public/public_root.js @@ -30,6 +30,7 @@ import { _t } from "@web/core/l10n/translation"; const serviceRegistry = registry.category("services"); import { Component, App, whenReady } from "@odoo/owl"; import { omit } from '@web/core/utils/objects'; +import { renderToString } from '@web/core/utils/render'; // Load localizations outside the PublicRoot to not wait for DOM ready (but // wait for them in PublicRoot) @@ -409,6 +410,7 @@ export async function createPublicRoot(RootWidget) { translateFn: _t, translatableAttributes: ["data-tooltip"], }); + renderToString.app = app; setLoadXmlDefaultApp(app); const [root] = await Promise.all([ app.mount(document.body), diff --git a/addons/web/static/src/legacy/js/public/public_widget.js b/addons/web/static/src/legacy/js/public/public_widget.js index f8747b644cd..01ce3d641ff 100644 --- a/addons/web/static/src/legacy/js/public/public_widget.js +++ b/addons/web/static/src/legacy/js/public/public_widget.js @@ -9,7 +9,7 @@ import core from "@web/legacy/js/services/core"; import mixins from "@web/legacy/js/core/mixins"; import ServicesMixin from "@web/legacy/js/core/service_mixins"; import { loadBundle } from '@web/core/assets'; - +import { renderToElement } from "@web/core/utils/render"; /** * Base class for all visual components. Provides a lot of functions helpful @@ -282,7 +282,7 @@ export const PublicWidget = core.Class.extend(mixins.PropertiesMixin, ServicesMi renderElement: function () { var $el; if (this.template) { - $el = $(core.qweb.render(this.template, {widget: this}).trim()); + $el = $(renderToElement(this.template, {widget: this})); } else { $el = this._makeDescriptive(); } diff --git a/addons/web/static/src/legacy/js/widgets/name_and_signature.js b/addons/web/static/src/legacy/js/widgets/name_and_signature.js index 2d7b218f5cb..312da214e97 100644 --- a/addons/web/static/src/legacy/js/widgets/name_and_signature.js +++ b/addons/web/static/src/legacy/js/widgets/name_and_signature.js @@ -1,13 +1,12 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import config from "@web/legacy/js/services/config"; import utils from "@web/legacy/js/core/utils"; import Widget from "@web/legacy/js/core/widget"; import { debounce } from "@web/core/utils/timing"; import { uniqueId } from "@web/core/utils/functions"; import { pick } from "@web/core/utils/objects"; - +import { renderToElement } from "@web/core/utils/render"; /** * This widget allows the user to input his name and to draw his signature. @@ -379,7 +378,7 @@ export var NameAndSignature = Widget.extend({ * @returns {string} image = mimetype + image data */ _getSVGText: function (font, text, width, height) { - var $svg = $(core.qweb.render('web.legacy.sign_svg_text', { + var $svg = $(renderToElement('web.legacy.sign_svg_text', { width: width, height: height, font: font, diff --git a/addons/web/static/src/legacy/xml/dialog.xml b/addons/web/static/src/legacy/xml/dialog.xml index 3fea5f06036..a625fe27933 100644 --- a/addons/web/static/src/legacy/xml/dialog.xml +++ b/addons/web/static/src/legacy/xml/dialog.xml @@ -8,7 +8,7 @@ t-attf-class="modal o_legacy_dialog #{ technical ? ' o_technical_modal' : '' } #{ fullscreen ? ' o_modal_full': '' }" tabindex="-1" data-bs-backdrop="static" - t-att-id="uniqueId('modal_')" + t-att-id="uniqueId" aria-hidden="true" >
diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js index 4c8fb828453..5cf346fd89b 100644 --- a/addons/web_editor/static/src/js/common/grid_layout_utils.js +++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js @@ -1,7 +1,7 @@ /** @odoo-module **/ 'use strict'; -import {qweb} from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import {descendants, preserveCursor} from "@web_editor/js/editor/odoo-editor/src/utils/utils"; const rowSize = 50; // 50px. // Maximum number of rows that can be added when dragging a grid item. @@ -44,11 +44,11 @@ export function _addBackgroundGrid(rowEl, gridHeight) { const gridProp = _getGridProperties(rowEl); const rowCount = Math.max(rowEl.dataset.rowCount, gridHeight); - const backgroundGrid = qweb.render('web_editor.background_grid', { + const backgroundGrid = renderToElement('web_editor.background_grid', { rowCount: rowCount + 1, rowGap: gridProp.rowGap, rowSize: gridProp.rowSize, columnGap: gridProp.columnGap, columnSize: gridProp.columnSize, }); - rowEl.insertAdjacentHTML("afterbegin", backgroundGrid); + rowEl.prepend(backgroundGrid); return rowEl.firstElementChild; } /** diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index ba6e5524fe0..962c55727ad 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -11,7 +11,6 @@ import SmoothScrollOnDrag from "@web_editor/js/editor/smooth_scroll_on_drag"; import weUtils from "@web_editor/js/common/utils"; import * as gridUtils from "@web_editor/js/common/grid_layout_utils"; import { escape } from "@web/core/utils/strings"; -const QWeb = core.qweb; import { closestElement, isUnremovable } from "@web_editor/js/editor/odoo-editor/src/utils/utils"; import { debounce, throttleForAnimation } from "@web/core/utils/timing"; import { uniqueId } from "@web/core/utils/functions"; @@ -25,6 +24,7 @@ import { } from "@odoo/owl"; import { LinkTools } from '@web_editor/js/wysiwyg/widgets/link_tools'; import { _t } from "@web/core/l10n/translation"; +import { renderToElement } from "@web/core/utils/render"; let cacheSnippetTemplate = {}; @@ -706,7 +706,7 @@ var SnippetEditor = Widget.extend({ $element = $element.parent(); } - var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', { + var $optionsSection = $(renderToElement('web_editor.customize_block_options_section', { name: this.getName(), })).data('editor', this); const $optionsSectionBtnGroup = $optionsSection.find('we-top-button-group'); @@ -4329,9 +4329,9 @@ var SnippetsMenu = Widget.extend({ $(this.customizePanel).append(this._$toolbarContainer); // Create table-options custom container. - const $customizeTableBlock = $(QWeb.render('web_editor.toolbar.table-options')); - this.options.wysiwyg.odooEditor.bindExecCommand($customizeTableBlock[0]); - $(this.customizePanel).append($customizeTableBlock); + const customizeTableBlock = renderToElement('web_editor.toolbar.table-options'); + this.options.wysiwyg.odooEditor.bindExecCommand(customizeTableBlock); + $(this.customizePanel).append(customizeTableBlock); $title.append(this._toolbarWrapperEl.querySelector('#removeFormat')); this._$toolbarContainer.append(this._toolbarWrapperEl); diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 29ca207278e..22abc6d7f0e 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -2,7 +2,6 @@ import { ComponentWrapper } from "@web/legacy/js/owl_compatibility"; import { MediaDialogWrapper } from "@web_editor/components/media_dialog/media_dialog_wrapper"; -import core from "@web/legacy/js/services/core"; import Dialog from "@web/legacy/js/core/dialog"; import dom from "@web/legacy/js/core/dom"; import rpc from "@web/legacy/js/core/rpc"; @@ -43,8 +42,8 @@ import { convertCSSColorToRgba, normalizeCSSColor, } from '@web/core/utils/colors'; +import { renderToElement } from "@web/core/utils/render"; -var qweb = core.qweb; const preserveCursor = OdooEditorLib.preserveCursor; const descendants = OdooEditorLib.descendants; const { DateTime } = luxon; @@ -7593,7 +7592,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({ * @private */ _initOverlay: function () { - this.$backgroundOverlay = $(qweb.render('web_editor.background_position_overlay')); + this.$backgroundOverlay = $(renderToElement('web_editor.background_position_overlay')); this.$overlayContent = this.$backgroundOverlay.find('.o_we_overlay_content'); this.$overlayBackground = this.$overlayContent.find('.o_overlay_background'); @@ -8001,7 +8000,7 @@ registry.VersionControl = SnippetOptionWidget.extend({ onSuccess: snippetVersions => { const isUpToDate = snippetVersions && ['vjs', 'vcss', 'vxml'].every(key => this.$target[0].dataset[key] === snippetVersions[key]); if (!isUpToDate) { - this.$el.prepend(qweb.render('web_editor.outdated_block_message')); + this.$el.prepend(renderToElement('web_editor.outdated_block_message')); } }, }); diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.js b/addons/website/static/src/client_actions/website_preview/website_preview.js index 66e85a2df86..cea78b43e3d 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.js +++ b/addons/website/static/src/client_actions/website_preview/website_preview.js @@ -3,7 +3,6 @@ import { browser } from '@web/core/browser/browser'; import { registry } from '@web/core/registry'; import { useService, useBus } from '@web/core/utils/hooks'; -import core from "@web/legacy/js/services/core"; import { AceEditorAdapterComponent } from '../../components/ace_editor/ace_editor'; import { WebsiteEditorComponent } from '../../components/editor/editor'; import { WebsiteTranslator } from '../../components/translator/translator'; @@ -14,6 +13,7 @@ import { routeToUrl } from "@web/core/browser/router_service"; import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service"; import wUtils from '@website/js/utils'; import config from "@web/legacy/js/services/config"; +import { renderToElement } from "@web/core/utils/render"; const { Component, onWillStart, onMounted, onWillUnmount, useRef, useEffect, useState } = owl; @@ -280,7 +280,7 @@ export class WebsitePreview extends Component { if (this.websiteService.isRestrictedEditor) { 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 = $(renderToElement('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); diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.xml b/addons/website/static/src/client_actions/website_preview/website_preview.xml index d4b2bc8b9b6..b9f3d8e1b00 100644 --- a/addons/website/static/src/client_actions/website_preview/website_preview.xml +++ b/addons/website/static/src/client_actions/website_preview/website_preview.xml @@ -41,8 +41,10 @@
-
-

Welcome to your Homepage!

-

Click on Edit in the top right corner to start designing.

-
+ +
+

Welcome to your Homepage!

+

Click on Edit in the top right corner to start designing.

+
+ diff --git a/addons/website/static/src/components/dialog/page_properties.js b/addons/website/static/src/components/dialog/page_properties.js index f088fe8b1ee..cf426c14447 100644 --- a/addons/website/static/src/components/dialog/page_properties.js +++ b/addons/website/static/src/components/dialog/page_properties.js @@ -7,7 +7,7 @@ import {sprintf} from "@web/core/utils/strings"; import {useWowlService} from '@web/legacy/utils'; import {WebsiteDialog} from './dialog'; import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog"; -import { qweb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; const { Component, useEffect, useState, xml, useRef } = owl; @@ -56,7 +56,7 @@ export class PageDependencies extends Component { boundary: 'viewport', placement: 'right', trigger: 'focus', - content: qweb.render("website.PageDependencies.Tooltip", { + content: renderToElement("website.PageDependencies.Tooltip", { dependencies: this.state.dependencies, }), }).popover('toggle'); diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 9537cfeb404..edd226e5e15 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -10,13 +10,11 @@ import { escape } from "@web/core/utils/strings"; import { debounce, throttleForAnimation } from "@web/core/utils/timing"; import Class from "@web/legacy/js/core/class"; import config from "@web/legacy/js/services/config"; -import core from "@web/legacy/js/services/core"; import dom from "@web/legacy/js/core/dom"; import mixins from "@web/legacy/js/core/mixins"; import publicWidget from "@web/legacy/js/public/public_widget"; import wUtils from "@website/js/utils"; - -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; // Initialize fallbacks for the use of requestAnimationFrame, // cancelAnimationFrame and performance.now() @@ -873,7 +871,7 @@ registry.backgroundVideo = publicWidget.Widget.extend(MobileYoutubeAutoplayMixin */ _appendBgVideo: function () { var $oldContainer = this.$bgVideoContainer || this.$('> .o_bg_video_container'); - this.$bgVideoContainer = $(qweb.render('website.background.video', { + this.$bgVideoContainer = $(renderToElement('website.background.video', { videoSrc: this.videoSrc, iframeID: this.iframeID, })); @@ -912,7 +910,7 @@ registry.socialShare = publicWidget.Widget.extend({ */ _render: function () { this.$el.popover({ - content: qweb.render('website.social_hover', {medias: this.socialList}), + content: renderToElement('website.social_hover', {medias: this.socialList}), placement: 'bottom', container: this.$el, html: true, diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index e86705b5d07..9ea5ededccf 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -1,11 +1,11 @@ /** @odoo-modules **/ -import { qweb } from "@web/legacy/js/services/core"; import { _t } from "@web/core/l10n/translation"; import Dialog from "@web/legacy/js/core/dialog"; import weSnippetEditor from "@web_editor/js/editor/snippets.editor"; import wSnippetOptions from "@website/js/editor/snippets.options"; import * as OdooEditorLib from "@web_editor/js/editor/odoo-editor/src/utils/utils"; +import { renderToElement } from "@web/core/utils/render"; const getDeepRange = OdooEditorLib.getDeepRange; const getTraversedNodes = OdooEditorLib.getTraversedNodes; @@ -121,7 +121,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({ $apiKeyHelp.empty().text(message); } - const $content = $(qweb.render('website.s_google_map_modal', { + const $content = $(renderToElement('website.s_google_map_modal', { apiKey: apiKey, })); if (!apiKeyValidation.isValid && apiKeyValidation.message) { diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 188f4999271..8f21fc9b7f9 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1,6 +1,5 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import { loadBundle, loadCSS } from "@web/core/assets"; import Dialog from "@web/legacy/js/core/dialog"; import { Markup } from "@web/legacy/js/core/utils"; @@ -20,8 +19,7 @@ import { convertRgbToHsl, convertHslToRgb, } from '@web/core/utils/colors'; - -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; const InputUserValueWidget = options.userValueWidgetsRegistry['we-input']; const SelectUserValueWidget = options.userValueWidgetsRegistry['we-select']; @@ -213,7 +211,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ if (this.googleLocalFonts.length) { const googleLocalFontsEls = fontEls.splice(-this.googleLocalFonts.length); googleLocalFontsEls.forEach((el, index) => { - $(el).append(core.qweb.render('website.delete_google_font_btn', { + $(el).append(renderToElement('website.delete_google_font_btn', { index: index, local: true, })); @@ -223,13 +221,13 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ if (this.googleFonts.length) { const googleFontsEls = fontEls.splice(-this.googleFonts.length); googleFontsEls.forEach((el, index) => { - $(el).append(core.qweb.render('website.delete_google_font_btn', { + $(el).append(renderToElement('website.delete_google_font_btn', { index: index, })); }); } - $(this.menuEl).append($(core.qweb.render('website.add_google_font_btn', { + $(this.menuEl).append($(renderToElement('website.add_google_font_btn', { variable: variable, }))); @@ -264,7 +262,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ const variable = $(ev.currentTarget).data('variable'); const dialog = new Dialog(this, { title: _t("Add a Google Font"), - $content: $(core.qweb.render('website.dialog.addGoogleFont')), + $content: $(renderToElement('website.dialog.addGoogleFont')), buttons: [ { text: _t("Save & Reload"), @@ -1399,7 +1397,7 @@ options.registry.OptionsTab = options.Class.extend({ await Promise.all([libsProm, dataProm]); await new Promise(resolve => { - const $content = $(core.qweb.render('website.custom_code_dialog_content', { + const $content = $(renderToElement('website.custom_code_dialog_content', { contentText, })); const aceEditor = this._renderAceEditor($content.find('.o_ace_editor_container')[0], website[fieldName] || ''); @@ -1675,10 +1673,10 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({ let ccPreviewEls = []; for (let i = 1; i <= 5; i++) { const collapseEl = document.createElement('we-collapse'); - const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview.legacy'))[0]; + const ccPreviewEl = $(renderToElement('web_editor.color.combination.preview.legacy'))[0]; ccPreviewEl.classList.add('text-center', `o_cc${i}`, 'o_colored_level', 'o_we_collapse_toggler'); collapseEl.appendChild(ccPreviewEl); - const editionEls = $(qweb.render('website.color_combination_edition', {number: i})); + const editionEls = $(renderToElement('website.color_combination_edition', {number: i})); for (const el of editionEls) { collapseEl.appendChild(el); } @@ -2861,7 +2859,7 @@ options.registry.anchor = options.Class.extend({ } new Dialog(this, { title: _t("Link Anchor"), - $content: $(qweb.render('website.dialog.anchorName', { + $content: $(renderToElement('website.dialog.anchorName', { currentAnchor: decodeURIComponent(this.$target.attr('id')), })), buttons: buttons, @@ -2969,7 +2967,7 @@ options.registry.CookiesBar = options.registry.SnippetPopup.extend({ }, }); - const $template = $(qweb.render(`website.cookies_bar.${widgetValue}`, { + const $template = $(renderToElement(`website.cookies_bar.${widgetValue}`, { websiteId: websiteId, })); diff --git a/addons/website/static/src/js/utils.js b/addons/website/static/src/js/utils.js index a7f0c3abafd..b71cbc14a85 100644 --- a/addons/website/static/src/js/utils.js +++ b/addons/website/static/src/js/utils.js @@ -1,9 +1,9 @@ /** @odoo-module **/ import { intersection } from "@web/core/utils/arrays"; -import core from "@web/legacy/js/services/core"; +import { csrf_token, _t } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; -const { qweb, _t } = core; /** * Allows to load anchors from a page. @@ -193,7 +193,7 @@ function prompt(options, _qweb) { options.field_name = options.field_name || options[type]; var def = new Promise(function (resolve, reject) { - var dialog = $(qweb.render(_qweb, options)).appendTo('body'); + var dialog = $(renderToElement(_qweb, options)).appendTo('body'); options.$dialog = dialog; var field = dialog.find(options.field_type).first(); field.val(options['default']); // dict notation for IE<9 @@ -290,8 +290,8 @@ function sendRequest(route, params) { form.setAttribute('target', '_top'); } - if (core.csrf_token) { - _addInput(form, 'csrf_token', core.csrf_token); + if (csrf_token) { + _addInput(form, 'csrf_token', csrf_token); } for (const key in params) { diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js index 4ff65d9089e..056909a2d16 100644 --- a/addons/website/static/src/snippets/s_countdown/000.js +++ b/addons/website/static/src/snippets/s_countdown/000.js @@ -1,12 +1,10 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; import weUtils from "@web_editor/js/common/utils"; import { isCSSColor } from '@web/core/utils/colors'; import { _t } from "@web/core/l10n/translation"; - -const qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; const CountdownWidget = publicWidget.Widget.extend({ selector: '.s_countdown', @@ -113,7 +111,7 @@ const CountdownWidget = publicWidget.Widget.extend({ if (!this.$('.s_countdown_end_redirect_message').length) { const $container = this.$('> .container, > .container-fluid, > .o_container_small'); $container.append( - $(qweb.render('website.s_countdown.end_redirect_message', { + $(renderToElement('website.s_countdown.end_redirect_message', { redirectUrl: redirectUrl, })) ); diff --git a/addons/website/static/src/snippets/s_countdown/options.js b/addons/website/static/src/snippets/s_countdown/options.js index 09571c28cc4..fb851558f71 100644 --- a/addons/website/static/src/snippets/s_countdown/options.js +++ b/addons/website/static/src/snippets/s_countdown/options.js @@ -1,10 +1,8 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import options from "@web_editor/js/editor/snippets.options"; -const qweb = core.qweb; - options.registry.countdown = options.Class.extend({ events: Object.assign({}, options.Class.prototype.events || {}, { 'click .toggle-edit-message': '_onToggleEndMessageClick', @@ -33,7 +31,7 @@ options.registry.countdown = options.Class.extend({ this.$target[0].dataset.endAction = widgetValue; if (widgetValue === 'message' || widgetValue === 'message_no_countdown') { if (!this.$target.find('.s_countdown_end_message').length) { - const message = this.endMessage || qweb.render('website.s_countdown.end_message'); + const message = this.endMessage || renderToElement('website.s_countdown.end_message'); this.$target.append(message); } this.$target.toggleClass('hide-countdown', widgetValue === 'message_no_countdown'); diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.js b/addons/website/static/src/snippets/s_dynamic_snippet/000.js index 1faf8e278a1..63313800f0e 100644 --- a/addons/website/static/src/snippets/s_dynamic_snippet/000.js +++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.js @@ -1,10 +1,10 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import config from "@web/legacy/js/services/config"; import publicWidget from "@web/legacy/js/public/public_widget"; import { Markup } from "@web/legacy/js/core/utils"; import { uniqueId } from "@web/core/utils/functions"; +import { renderToElement } from "@web/core/utils/render"; const DEFAULT_NUMBER_OF_ELEMENTS = 4; const DEFAULT_NUMBER_OF_ELEMENTS_SM = 1; @@ -136,7 +136,7 @@ const DynamicSnippet = publicWidget.Widget.extend({ * @private */ _prepareContent: function () { - this.renderedContent = core.qweb.render( + this.renderedContent = renderToElement( this.template_key, this._getQWebRenderOptions() ); diff --git a/addons/website/static/src/snippets/s_embed_code/options.js b/addons/website/static/src/snippets/s_embed_code/options.js index f21c9af3ff4..06663209dd1 100644 --- a/addons/website/static/src/snippets/s_embed_code/options.js +++ b/addons/website/static/src/snippets/s_embed_code/options.js @@ -1,10 +1,10 @@ /** @odoo-module **/ import Dialog from '@web/legacy/js/core/dialog'; -import core from "@web/legacy/js/services/core"; import options from '@web_editor/js/editor/snippets.options'; import { loadBundle } from "@web/core/assets"; import { _t } from "@web/core/l10n/translation"; +import { renderToElement } from "@web/core/utils/render"; options.registry.EmbedCode = options.Class.extend({ //-------------------------------------------------------------------------- @@ -24,7 +24,7 @@ options.registry.EmbedCode = options.Class.extend({ }); await new Promise(resolve => { - const $content = $(core.qweb.render('website.custom_code_dialog_content')); + const $content = $(renderToElement('website.custom_code_dialog_content')); const aceEditor = this._renderAceEditor($content.find('.o_ace_editor_container')[0], code || ''); const dialog = new Dialog(this, { title: _t("Edit embedded code"), diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js index 2206eb35f01..21f5c816cbf 100644 --- a/addons/website/static/src/snippets/s_image_gallery/000.js +++ b/addons/website/static/src/snippets/s_image_gallery/000.js @@ -1,10 +1,9 @@ /** @odoo-module **/ import { uniqueId } from "@web/core/utils/functions"; -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; +import { renderToElement } from "@web/core/utils/render"; -var qweb = core.qweb; const GalleryWidget = publicWidget.Widget.extend({ @@ -45,7 +44,7 @@ const GalleryWidget = publicWidget.Widget.extend({ var $img = ($cur.is('img') === true) ? $cur : $cur.closest('img'); const milliseconds = $cur.closest('.s_image_gallery').data('interval') || false; - this.$modal = $(qweb.render('website.gallery.slideshow.lightbox', { + this.$modal = $(renderToElement('website.gallery.slideshow.lightbox', { images: $images.get(), index: $images.index($img), dim: dimensions, diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js index 2c0d6f91902..41ebb586841 100644 --- a/addons/website/static/src/snippets/s_image_gallery/options.js +++ b/addons/website/static/src/snippets/s_image_gallery/options.js @@ -2,12 +2,10 @@ import { MediaDialogWrapper } from "@web_editor/components/media_dialog/media_dialog_wrapper"; import { ComponentWrapper } from "@web/legacy/js/owl_compatibility"; -import core from "@web/legacy/js/services/core"; import options from "@web_editor/js/editor/snippets.options"; import wUtils from '@website/js/utils'; import { _t } from "@web/core/l10n/translation"; - -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; /** * This class provides layout methods for interacting with the ImageGallery @@ -176,7 +174,7 @@ options.registry.GalleryLayout = options.registry.CarouselHandler.extend({ attrClass: imageEls.length > 0 ? imageEls[0].className : '', attrStyle: imageEls.length > 0 ? imageEls[0].style.cssText : '', }, - $slideshow = $(qweb.render('website.gallery.slideshow', params)); + $slideshow = $(renderToElement('website.gallery.slideshow', params)); this._replaceContent($slideshow); this.$("img").toArray().forEach((img, index) => { $(img).attr({contenteditable: true, 'data-index': index}); diff --git a/addons/website/static/src/snippets/s_searchbar/000.js b/addons/website/static/src/snippets/s_searchbar/000.js index 1c563551895..0e55bd8ae0e 100644 --- a/addons/website/static/src/snippets/s_searchbar/000.js +++ b/addons/website/static/src/snippets/s_searchbar/000.js @@ -3,7 +3,8 @@ import concurrency from '@web/legacy/js/core/concurrency'; import publicWidget from '@web/legacy/js/public/public_widget'; -import {qweb} from "@web/legacy/js/services/core"; +import { qweb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import { Markup } from '@web/legacy/js/core/utils'; import { debounce } from '@web/core/utils/timing'; @@ -150,7 +151,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ if (qweb.has_template(candidate)) { template = candidate; } - this.$menu = $(qweb.render(template, { + this.$menu = $(renderToElement(template, { results: results, parts: res['parts'], hasMoreResults: results.length < res['results_count'], diff --git a/addons/website/static/src/snippets/s_website_form/000.js b/addons/website/static/src/snippets/s_website_form/000.js index 119d2a4f5cb..8cd22149df4 100644 --- a/addons/website/static/src/snippets/s_website_form/000.js +++ b/addons/website/static/src/snippets/s_website_form/000.js @@ -1,6 +1,5 @@ /** @odoo-module **/ - import core from "@web/legacy/js/services/core"; import time from "@web/legacy/js/core/time"; import {ReCaptcha} from "@google_recaptcha/js/recaptcha"; import session from "web.session"; @@ -10,8 +9,7 @@ import concurrency from "@web/legacy/js/core/concurrency"; import { debounce } from "@web/core/utils/timing"; import { _t } from "@web/core/l10n/translation"; - - var qweb = core.qweb; + import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.EditModeWebsiteForm = publicWidget.Widget.extend({ selector: '.s_website_form form, form.s_website_form', // !compatibility @@ -618,7 +616,7 @@ // before any qweb rendering which depends on xml assets // because the event handlers are binded before the call to // willStart for public widgets... - this.__started.then(() => $result.replaceWith(qweb.render(`website.s_website_form_status_${status}`, { + this.__started.then(() => $result.replaceWith(renderToElement(`website.s_website_form_status_${status}`, { message: message, }))); }, @@ -817,9 +815,9 @@ * displayed */ _createFileBlock(fileDetails, filesZoneEl) { - const fileBlockEl = qweb.render("website.file_block", {fileName: fileDetails.name}); - filesZoneEl.insertAdjacentHTML("beforeend", fileBlockEl); - filesZoneEl.lastElementChild.fileDetails = fileDetails; + const fileBlockEl = renderToElement("website.file_block", {fileName: fileDetails.name}); + fileBlockEl.fileDetails = fileDetails; + filesZoneEl.append(fileBlockEl); }, /** * Creates the file upload button (= a button to replace the file input, diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js index 35ca145b242..f6a2f3fad52 100644 --- a/addons/website/static/src/snippets/s_website_form/options.js +++ b/addons/website/static/src/snippets/s_website_form/options.js @@ -1,6 +1,5 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import FormEditorRegistry from "@website/js/form_editor_registry"; import options from "@web_editor/js/editor/snippets.options"; import Dialog from "@web/legacy/js/core/dialog"; @@ -9,8 +8,8 @@ import weUtils from "@web_editor/js/common/utils"; import "@website/js/editor/snippets.options"; import { unique } from "@web/core/utils/arrays"; import { _t } from "@web/core/l10n/translation"; +import { renderToElement } from "@web/core/utils/render"; -const qweb = core.qweb; let currentActionName; const allFormsInfo = new Map(); @@ -163,7 +162,7 @@ const FormEditor = options.Class.extend({ field.id = weUtils.generateHTMLId(); } const template = document.createElement('template'); - template.innerHTML = qweb.render("website.form_field_" + field.type, {field: field}).trim(); + template.content.append(renderToElement("website.form_field_" + field.type, {field: field})); if (field.description && field.description !== true) { $(template.content.querySelector('.s_website_form_field_description')).replaceWith(field.description); } @@ -535,7 +534,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({ this.$target[0].dataset.successMode = value; if (value === 'message') { if (!this.$message.length) { - this.$message = $(qweb.render('website.s_website_form_end_message')); + this.$message = $(renderToElement('website.s_website_form_end_message')); } this.$target.after(this.$message); } else { @@ -577,10 +576,10 @@ options.registry.WebsiteFormEditor = FormEditor.extend({ if (recaptchaLegalEl) { recaptchaLegalEl.remove(); } else { - const template = document.createElement('template'); const labelWidth = this.$target[0].querySelector('.s_website_form_label').style.width; - $(template).html(qweb.render("website.s_website_form_recaptcha_legal", {labelWidth: labelWidth})); - const legal = template.content.firstElementChild; + const legal = renderToElement("website.s_website_form_recaptcha_legal", { + labelWidth: labelWidth, + }); legal.setAttribute('contentEditable', true); this.$target.find('.s_website_form_submit').before(legal); } @@ -671,7 +670,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({ _addHiddenField: function (value, fieldName) { this.$target.find(`.s_website_form_dnone:has(input[name="${fieldName}"])`).remove(); if (value) { - const hiddenField = qweb.render('website.form_field_hidden', { + const hiddenField = renderToElement('website.form_field_hidden', { field: { name: fieldName, value: value, diff --git a/addons/website_event_booth/static/src/js/booth_register.js b/addons/website_event_booth/static/src/js/booth_register.js index 6fefdfddbfd..de7d4ab10cb 100644 --- a/addons/website_event_booth/static/src/js/booth_register.js +++ b/addons/website_event_booth/static/src/js/booth_register.js @@ -1,9 +1,8 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; +import { renderToElement, renderToFragment } from "@web/core/utils/render"; import publicWidget from "@web/legacy/js/public/public_widget"; import { _t } from "@web/core/l10n/translation"; -var QWeb = core.qweb; publicWidget.registry.boothRegistration = publicWidget.Widget.extend({ selector: '.o_wbooth_registration', @@ -61,10 +60,10 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({ _fillBooths() { const boothsElem = this.el.querySelector('.o_wbooth_booths'); - boothsElem.innerHTML = QWeb.render('event_booth_checkbox_list', { + boothsElem.replaceChildren(renderToFragment('event_booth_checkbox_list', { 'event_booth_ids': this.boothCache[this.activeBoothCategoryId], 'selected_booth_ids': this.boothsFirstRendering ? this.selectedBoothIds : [], - }); + })); this.boothsFirstRendering = false; }, @@ -219,7 +218,7 @@ publicWidget.registry.boothRegistration = publicWidget.Widget.extend({ if (jsonResponse.success) { this.el.querySelector('.o_wevent_booth_order_progress').remove(); const boothCategoryId = this.el.querySelector('input[name=booth_category_id]').value; - $form.replaceWith(QWeb.render('event_booth_registration_complete', { + $form.replaceWith(renderToElement('event_booth_registration_complete', { 'booth_category_id': boothCategoryId, 'event_id': this.eventId, 'event_name': jsonResponse.event_name, diff --git a/addons/website_event_meet/static/src/js/website_event_create_meeting_room_button.js b/addons/website_event_meet/static/src/js/website_event_create_meeting_room_button.js index a899784e06a..1546103cd98 100644 --- a/addons/website_event_meet/static/src/js/website_event_create_meeting_room_button.js +++ b/addons/website_event_meet/static/src/js/website_event_create_meeting_room_button.js @@ -1,8 +1,7 @@ /** @odoo-module **/ import publicWidget from "@web/legacy/js/public/public_widget"; -import core from "@web/legacy/js/services/core"; -const QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.websiteEventCreateMeetingRoom = publicWidget.Widget.extend({ selector: '.o_wevent_create_room_button', @@ -20,7 +19,7 @@ publicWidget.registry.websiteEventCreateMeetingRoom = publicWidget.Widget.extend route: "/event/active_langs", }); - this.$createModal = $(QWeb.render( + this.$createModal = $(renderToElement( 'event_meet_create_room_modal', { csrf_token: odoo.csrf_token, diff --git a/addons/website_event_track/static/src/js/website_event_track_proposal_form.js b/addons/website_event_track/static/src/js/website_event_track_proposal_form.js index e394858d10d..ccd3c2f8ffc 100644 --- a/addons/website_event_track/static/src/js/website_event_track_proposal_form.js +++ b/addons/website_event_track/static/src/js/website_event_track_proposal_form.js @@ -1,9 +1,8 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; import { _t } from "@web/core/l10n/translation"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.websiteEventTrackProposalForm = publicWidget.Widget.extend({ selector: '.o_website_event_track_proposal_form', @@ -182,7 +181,7 @@ publicWidget.registry.websiteEventTrackProposalForm = publicWidget.Widget.extend const offsetTop = ($("#wrapwrap").scrollTop() || 0) + this.$el.offset().top; const floatingMenuHeight = ($('.o_header_standard').height() || 0) + ($('#oe_main_menu_navbar').height() || 0); - this.$el.replaceWith($(QWeb.render('event_track_proposal_success'))); + this.$el.replaceWith($(renderToElement('event_track_proposal_success'))); $('#wrapwrap').scrollTop(offsetTop - floatingMenuHeight); } else if (jsonResponse.error) { this._updateErrorDisplay([jsonResponse.error]); diff --git a/addons/website_event_track_quiz/static/src/js/event_quiz.js b/addons/website_event_track_quiz/static/src/js/event_quiz.js index d12680498bb..df9faca53df 100644 --- a/addons/website_event_track_quiz/static/src/js/event_quiz.js +++ b/addons/website_event_track_quiz/static/src/js/event_quiz.js @@ -1,11 +1,9 @@ /** @odoo-module **/ - import publicWidget from "@web/legacy/js/public/public_widget"; -import core from "@web/legacy/js/services/core"; import session from "web.session"; import { _t } from "@web/core/l10n/translation"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; /** * This widget is responsible of displaying quiz questions and propositions. Submitting the quiz will fetch the @@ -158,16 +156,14 @@ var Quiz = publicWidget.Widget.extend({ $answer.find('i.fa-times-circle').removeClass('d-none'); } if (answer.awarded_points > 0) { - var $badge = QWeb.render('quiz.badge', {'answer': answer}); - $answer.append($badge); + $answer.append(renderToElement('quiz.badge', {'answer': answer})); } } else { $answer.find('i.fa-circle').removeClass('d-none'); } }); var $list = $question.find('.list-group'); - var $comment = QWeb.render('quiz.comment', {'answer': answer}); - $list.append($comment); + $list.append(renderToElement('quiz.comment', {'answer': answer})); }); }, @@ -177,8 +173,8 @@ var Quiz = publicWidget.Widget.extend({ */ _renderValidationInfo: function () { var $validationElem = this.$('.o_quiz_js_quiz_validation'); - $validationElem.html( - QWeb.render('quiz.validation', {'widget': this}) + $validationElem.empty().append( + renderToElement('quiz.validation', {'widget': this}) ); }, diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js index 94b1a19a3e6..ed0eb0a306c 100644 --- a/addons/website_forum/static/src/js/website_forum.js +++ b/addons/website_forum/static/src/js/website_forum.js @@ -1,7 +1,6 @@ /** @odoo-module **/ import dom from "@web/legacy/js/core/dom"; -import core from "@web/legacy/js/services/core"; import {setCookie} from "@web/legacy/js/core/cookie_utils"; import Dialog from "@web/legacy/js/core/dialog"; import { loadWysiwygFromTextarea } from "@web_editor/js/frontend/loadWysiwygFromTextarea"; @@ -10,7 +9,7 @@ import { Markup } from '@web/legacy/js/core/utils'; import session from "web.session"; import { escape } from "@web/core/utils/strings"; import { _t } from "@web/core/l10n/translation"; -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.websiteForum = publicWidget.Widget.extend({ selector: '.website_forum', @@ -647,7 +646,7 @@ publicWidget.registry.websiteForumSpam = publicWidget.Widget.extend({ Object.values(o).forEach((r) => { r.content = $('

' + $(r.content).html() + '

').text().substring(0, 250); }); - self.$('div.post_spam').html(qweb.render('website_forum.spam_search_name', { + self.$('div.post_spam').empty().append(renderToElement('website_forum.spam_search_name', { posts: o, })); }); diff --git a/addons/website_forum/static/src/js/website_forum.share.js b/addons/website_forum/static/src/js/website_forum.share.js index 1b3a0fe44ff..5d2201a6801 100644 --- a/addons/website_forum/static/src/js/website_forum.share.js +++ b/addons/website_forum/static/src/js/website_forum.share.js @@ -1,10 +1,8 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; import "@website/js/content/snippets.animation"; - -var qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; // FIXME There is no reason to inherit from socialShare here var ForumShare = publicWidget.registry.socialShare.extend({ @@ -42,9 +40,9 @@ var ForumShare = publicWidget.registry.socialShare.extend({ if (!this.targetType) { this._super.apply(this, arguments); } else if (this.targetType === 'social-alert') { - $question.before(qweb.render('website.social_alert', {medias: this.socialList})); + $question.before(renderToElement('website.social_alert', {medias: this.socialList})); } else { - $('body').append(qweb.render('website.social_modal', { + $('body').append(renderToElement('website.social_modal', { medias: this.socialList, target_type: this.targetType, state: $question.data('state'), diff --git a/addons/website_jitsi/static/src/js/chat_room.js b/addons/website_jitsi/static/src/js/chat_room.js index a559653e41f..b5e2e206326 100644 --- a/addons/website_jitsi/static/src/js/chat_room.js +++ b/addons/website_jitsi/static/src/js/chat_room.js @@ -1,9 +1,8 @@ /** @odoo-module **/ import config from "@web/legacy/js/services/config"; -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; -const QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.ChatRoom = publicWidget.Widget.extend({ selector: '.o_wjitsi_room_widget', @@ -89,7 +88,7 @@ publicWidget.registry.ChatRoom = publicWidget.Widget.extend({ await this._joinJitsiRoom($parentNode); } else { // create a model and append the Jitsi iframe in it - let $jitsiModal = $(QWeb.render('chat_room_modal', {})); + let $jitsiModal = $(renderToElement('chat_room_modal', {})); $("body").append($jitsiModal); $jitsiModal.modal('show'); diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js index c80e56000ca..b90e0d72483 100644 --- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js +++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.editor.js @@ -1,11 +1,9 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import Dialog from "@web/legacy/js/core/dialog"; import options from "@web_editor/js/editor/snippets.options"; import { _t } from "@web/core/l10n/translation"; - -const qweb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; options.registry.mailing_list_subscribe = options.Class.extend({ /** @@ -113,7 +111,7 @@ options.registry.recaptchaSubscribe = options.Class.extend({ recaptchaLegalEl.remove(); } else { const template = document.createElement('template'); - template.innerHTML = qweb.render("google_recaptcha.recaptcha_legal_terms"); + template.content.append(renderToElement("google_recaptcha.recaptcha_legal_terms")); this.$target[0].appendChild(template.content.firstElementChild); } }, diff --git a/addons/website_payment/static/src/snippets/s_donation/options.js b/addons/website_payment/static/src/snippets/s_donation/options.js index a07c2e0e929..63420229c08 100644 --- a/addons/website_payment/static/src/snippets/s_donation/options.js +++ b/addons/website_payment/static/src/snippets/s_donation/options.js @@ -1,6 +1,7 @@ /** @odoo-module **/ -import {_t, qweb} from "@web/legacy/js/services/core"; +import { _t } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import options from '@web_editor/js/editor/snippets.options'; options.registry.Donation = options.Class.extend({ @@ -280,7 +281,7 @@ options.registry.Donation = options.Class.extend({ } if (rebuild) { if (layout === "slider" && !$slider.length) { - const sliderTemplate = $(qweb.render('website_payment.donation.slider', { + const sliderTemplate = $(renderToElement('website_payment.donation.slider', { minimum_amount: this.$target[0].dataset.minimumAmount, maximum_amount: this.$target[0].dataset.maximumAmount, slider_step: this.$target[0].dataset.sliderStep, @@ -303,7 +304,7 @@ options.registry.Donation = options.Class.extend({ }); } } - const $prefilledButtons = $(qweb.render(`website_payment.donation.prefilledButtons${showDescriptions ? 'Descriptions' : ''}`, { + const $prefilledButtons = $(renderToElement(`website_payment.donation.prefilledButtons${showDescriptions ? 'Descriptions' : ''}`, { prefilled_buttons: donationAmounts, custom_input: layout === "freeAmount", minimum_amount: this.$target[0].dataset.minimumAmount, diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js index 37329906dae..68ed6195b13 100644 --- a/addons/website_sale/static/src/js/website_sale.editor.js +++ b/addons/website_sale/static/src/js/website_sale.editor.js @@ -6,12 +6,12 @@ import { ComponentWrapper } from "@web/legacy/js/owl_compatibility"; import { MediaDialog } from "@web_editor/components/media_dialog/media_dialog"; import { MediaDialogWrapper } from "@web_editor/components/media_dialog/media_dialog_wrapper"; import { useWowlService } from "@web/legacy/utils"; -import { qweb } from "@web/legacy/js/services/core"; import { _t } from "@web/core/l10n/translation"; import { Markup } from "@web/legacy/js/core/utils"; import Dialog from "@web/legacy/js/core/dialog"; import "@website/js/editor/snippets.options"; import { patch } from "@web/core/utils/patch"; +import { renderToElement } from "@web/core/utils/render"; const { onRendered } = owl; patch(WysiwygAdapterComponent.prototype, { @@ -500,7 +500,7 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({ .split(' ') .filter(className => !/^o_(ribbon|tag)_(left|right)$/.test(className)) .join(' '); - $select.append(qweb.render('website_sale.ribbonSelectItem', { + $select.append(renderToElement('website_sale.ribbonSelectItem', { ribbon, colorClasses, isTag: /o_tag_(left|right)/.test(ribbon.html_class), diff --git a/addons/website_sale/static/src/js/website_sale_delivery.js b/addons/website_sale/static/src/js/website_sale_delivery.js index b5efdda0aff..10a9e27e04a 100644 --- a/addons/website_sale/static/src/js/website_sale_delivery.js +++ b/addons/website_sale/static/src/js/website_sale_delivery.js @@ -3,8 +3,8 @@ import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; import { _t } from "@web/core/l10n/translation"; +import { renderToElement } from "@web/core/utils/render"; import concurrency from "@web/legacy/js/core/concurrency"; -const qweb = core.qweb; publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({ selector: '.oe_website_sale', @@ -330,7 +330,7 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({ const deliveryType = deliveryTypeInput.getAttribute("delivery_type"); const deliveryTypeId = deliveryTypeInput.value; await this._checkCarrier(ev,deliveryTypeId) - $(qweb.render(deliveryType + "_pickup_location_loading")).appendTo($(modal)); + $(renderToElement(deliveryType + "_pickup_location_loading")).appendTo($(modal)); const data = await this._rpc({ route: "/shop/access_point/close_locations", }) @@ -348,7 +348,7 @@ publicWidget.registry.websiteSaleDelivery = publicWidget.Widget.extend({ var listToRender = deliveryType + "_pickup_location_list"; var dataToRender = {partner_address: data.partner_address}; dataToRender[deliveryType + "_pickup_locations"] = data.close_locations; - $(qweb.render(listToRender, dataToRender)).appendTo($(modal)); + $(renderToElement(listToRender, dataToRender)).appendTo($(modal)); const showLocations = document.querySelectorAll(".o_show_pickup_locations"); if (!ev.currentTarget.closest(".o_delivery_carrier_select")) { diff --git a/addons/website_sale_autocomplete/static/src/js/address_form.js b/addons/website_sale_autocomplete/static/src/js/address_form.js index 23dbf35726a..865430b5e5d 100644 --- a/addons/website_sale_autocomplete/static/src/js/address_form.js +++ b/addons/website_sale_autocomplete/static/src/js/address_form.js @@ -3,7 +3,7 @@ import publicWidget from '@web/legacy/js/public/public_widget'; import { DropPrevious } from '@web/legacy/js/core/concurrency'; import { debounce } from "@web/core/utils/timing"; -import { qweb as QWeb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; publicWidget.registry.AddressForm = publicWidget.Widget.extend({ selector: '.oe_cart .checkout_autoformat:has(input[name="street"][data-autocomplete-enabled="1"])', @@ -55,9 +55,9 @@ publicWidget.registry.AddressForm = publicWidget.Widget.extend({ } })).then((response) => { this._hideAutocomplete(inputContainer); - inputContainer.appendChild($(QWeb.render("website_sale_autocomplete.AutocompleteDropDown", { + inputContainer.appendChild(renderToElement("website_sale_autocomplete.AutocompleteDropDown", { results: response.results - }))[0]); + })); if (response.session_id) { this.sessionId = response.session_id; } diff --git a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js index 4c79603a432..cab82efb88c 100644 --- a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js +++ b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js @@ -1,15 +1,14 @@ /** @odoo-module **/ import concurrency from "@web/legacy/js/core/concurrency"; -import core from "@web/legacy/js/services/core"; import publicWidget from "@web/legacy/js/public/public_widget"; import {getCookie, setCookie} from "@web/legacy/js/core/cookie_utils"; import VariantMixin from "@website_sale/js/sale_variant_mixin"; import website_sale_utils from "@website_sale/js/website_sale_utils"; import { _t } from "@web/core/l10n/translation"; -const cartHandlerMixin = website_sale_utils.cartHandlerMixin; +import { renderToString } from "@web/core/utils/render"; -var qweb = core.qweb; +const cartHandlerMixin = website_sale_utils.cartHandlerMixin; // VariantMixin events are overridden on purpose here // to avoid registering them more than once since they are already registered @@ -51,7 +50,7 @@ var ProductComparison = publicWidget.Widget.extend(VariantMixin, { }, container: '.o_product_feature_panel', placement: 'top', - template: qweb.render('popover'), + template: renderToString('popover'), content: function () { return $('#comparelist .o_product_panel_content').html(); } diff --git a/addons/website_sale_mondialrelay/static/src/js/website_sale_mondialrelay.js b/addons/website_sale_mondialrelay/static/src/js/website_sale_mondialrelay.js index 7c99d07aa0c..d8a8b624f45 100644 --- a/addons/website_sale_mondialrelay/static/src/js/website_sale_mondialrelay.js +++ b/addons/website_sale_mondialrelay/static/src/js/website_sale_mondialrelay.js @@ -2,7 +2,7 @@ import publicWidget from "@web/legacy/js/public/public_widget"; import "@website_sale/js/website_sale_delivery"; -import {qweb as QWeb} from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; const WebsiteSaleDeliveryWidget = publicWidget.registry.websiteSaleDelivery; @@ -52,7 +52,7 @@ WebsiteSaleDeliveryWidget.include({ */ _loadMondialRelayModal: function (result) { // add modal to body and bind 'save' button - $(QWeb.render('website_sale_mondialrelay', {})).appendTo('body'); + $(renderToElement('website_sale_mondialrelay', {})).appendTo('body'); this.$modal_mondialrelay = $('#modal_mondialrelay'); this.$modal_mondialrelay.find('#btn_confirm_relay').on('click', this._onClickBtnConfirmRelay.bind(this)); diff --git a/addons/website_sale_stock/static/src/js/variant_mixin.js b/addons/website_sale_stock/static/src/js/variant_mixin.js index c865ab92033..973ed1fece4 100644 --- a/addons/website_sale_stock/static/src/js/variant_mixin.js +++ b/addons/website_sale_stock/static/src/js/variant_mixin.js @@ -3,8 +3,7 @@ import { Markup } from "@web/legacy/js/core/utils"; import VariantMixin from "@website_sale/js/sale_variant_mixin"; import publicWidget from "@web/legacy/js/public/public_widget"; -import core from "@web/legacy/js/services/core"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; import "@website_sale/js/website_sale"; @@ -66,7 +65,7 @@ VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) { .remove(); combination.has_out_of_stock_message = $(combination.out_of_stock_message).text() !== ''; combination.out_of_stock_message = Markup(combination.out_of_stock_message); - const $message = $(QWeb.render( + const $message = $(renderToElement( 'website_sale_stock.product_availability', combination )); diff --git a/addons/website_sale_stock_wishlist/static/src/js/variant.js b/addons/website_sale_stock_wishlist/static/src/js/variant.js index 2c4385c14c1..60180b78a60 100644 --- a/addons/website_sale_stock_wishlist/static/src/js/variant.js +++ b/addons/website_sale_stock_wishlist/static/src/js/variant.js @@ -2,7 +2,7 @@ import VariantMixin from "@website_sale_stock/js/variant_mixin"; import "@website_sale/js/website_sale"; -import { qweb as QWeb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; const oldChangeCombinationStock = VariantMixin._onChangeCombinationStock; /** @@ -16,8 +16,8 @@ VariantMixin._onChangeCombinationStock = function (ev, $parent, combination) { if (this.el.querySelector('.o_add_wishlist_dyn')) { const messageEl = this.el.querySelector('div.availability_messages'); if (messageEl && !this.el.querySelector('#stock_wishlist_message')) { - messageEl.insertAdjacentHTML('beforeend', - QWeb.render('website_sale_stock_wishlist.product_availability', combination) + messageEl.append( + renderToElement('website_sale_stock_wishlist.product_availability', combination) || '' ); } } diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js index 436f0701a41..ee1f37ff920 100644 --- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js +++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js @@ -3,7 +3,8 @@ /* global YT, Vimeo */ import publicWidget from '@web/legacy/js/public/public_widget'; - import { qweb as QWeb, _t } from "@web/legacy/js/services/core"; + import { _t } from "@web/legacy/js/services/core"; + import { renderToElement } from "@web/core/utils/render"; import { Markup } from "@web/legacy/js/core/utils"; import config from '@web/legacy/js/services/config'; @@ -670,7 +671,7 @@ // render slide content if (['document', 'infographic'].includes(slide.category)) { - $content.html(QWeb.render('website.slides.fullscreen.content', {widget: this})); + $content.empty().append(renderToElement('website.slides.fullscreen.content', {widget: this})); } else if (slide.category === 'video' && slide.videoSourceType === 'youtube') { this.videoPlayer = new VideoPlayerYouTube(this, slide); return this.videoPlayer.appendTo($content); @@ -678,7 +679,7 @@ this.videoPlayer = new VideoPlayerVimeo(this, slide); return this.videoPlayer.appendTo($content); } else if (slide.category === 'video' && slide.videoSourceType === 'google_drive') { - $content.html(QWeb.render('website.slides.fullscreen.video.google_drive', {widget: this})); + $content.empty().append(renderToElement('website.slides.fullscreen.video.google_drive', {widget: this})); } else if (slide.category === 'article'){ var $wpContainer = $('
').addClass('o_wslide_fs_article_content bg-white block w-100 overflow-auto'); $(slide.htmlContent).appendTo($wpContainer); diff --git a/addons/website_slides/static/src/js/slides_course_join.js b/addons/website_slides/static/src/js/slides_course_join.js index de474bfd01b..bf4f474c8e7 100644 --- a/addons/website_slides/static/src/js/slides_course_join.js +++ b/addons/website_slides/static/src/js/slides_course_join.js @@ -1,7 +1,8 @@ /** @odoo-module **/ import { sprintf } from '@web/core/utils/strings'; -import { _t, qweb } from "@web/legacy/js/services/core"; +import { _t } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import publicWidget from '@web/legacy/js/public/public_widget'; var CourseJoinWidget = publicWidget.Widget.extend({ @@ -134,13 +135,13 @@ var CourseJoinWidget = publicWidget.Widget.extend({ self.afterJoin(); } else { if (data.error === 'public_user') { - let $popupContent = qweb.render('slide.course.join.popupContent', { + const popupContent = renderToElement('slide.course.join.popupContent', { channelId: channelId, courseUrl: encodeURIComponent(document.URL), errorSignupAllowed: data.error_signup_allowed, widget: self, }); - self._popoverAlert(self.$el, $popupContent); + self._popoverAlert(self.$el, popupContent); } else if (data.error === 'join_done') { self._popoverAlert(self.$el, _t('You have already joined this channel')); } else { diff --git a/addons/website_slides/static/src/js/slides_course_page.js b/addons/website_slides/static/src/js/slides_course_page.js index 43166bd8b5f..ef4c98ea840 100644 --- a/addons/website_slides/static/src/js/slides_course_page.js +++ b/addons/website_slides/static/src/js/slides_course_page.js @@ -2,8 +2,7 @@ import publicWidget from '@web/legacy/js/public/public_widget'; import session from 'web.session'; -import { qweb as QWeb } from "@web/legacy/js/services/core"; - +import { renderToElement } from "@web/core/utils/render"; /** * Global widget for both fullscreen view and non-fullscreen view of a slide course. @@ -61,7 +60,7 @@ export const SlideCoursePage = publicWidget.Widget.extend({ return; } - const newButton = QWeb.render('website.slides.sidebar.done.button', { + const newButton = renderToElement('website.slides.sidebar.done.button', { slideId: slide.id, uncompletedIcon: $button.data('uncompletedIcon') ?? 'fa-circle-thin', slideCompleted: completed, diff --git a/addons/website_slides/static/src/js/slides_course_prerequisite.js b/addons/website_slides/static/src/js/slides_course_prerequisite.js index 471ecd0ba74..288b1bd0f6b 100644 --- a/addons/website_slides/static/src/js/slides_course_prerequisite.js +++ b/addons/website_slides/static/src/js/slides_course_prerequisite.js @@ -1,6 +1,6 @@ /** @odoo-module **/ -import { qweb } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import publicWidget from '@web/legacy/js/public/public_widget'; publicWidget.registry.websiteSlidesCoursePrerequisite = publicWidget.Widget.extend({ @@ -14,7 +14,7 @@ publicWidget.registry.websiteSlidesCoursePrerequisite = publicWidget.Widget.exte placement: 'bottom', container: 'body', html: true, - content: qweb.render('slide.course.prerequisite', {channels: channels}), + content: renderToElement('slide.course.prerequisite', {channels: channels}), }); }, }); diff --git a/addons/website_slides/static/src/js/slides_course_quiz.js b/addons/website_slides/static/src/js/slides_course_quiz.js index 1bba4019779..9d35699f933 100644 --- a/addons/website_slides/static/src/js/slides_course_quiz.js +++ b/addons/website_slides/static/src/js/slides_course_quiz.js @@ -2,7 +2,8 @@ import publicWidget from '@web/legacy/js/public/public_widget'; import Dialog from '@web/legacy/js/core/dialog'; - import { qweb as QWeb, _t } from "@web/legacy/js/services/core"; + import { _t } from "@web/core/l10n/translation"; + import { renderToElement } from "@web/core/utils/render"; import session from 'web.session'; import { Markup } from "@web/legacy/js/core/utils"; import CourseJoin from '@website_slides/js/slides_course_join'; @@ -298,8 +299,8 @@ */ _renderValidationInfo: function () { var $validationElem = this.$('.o_wslides_js_lesson_quiz_validation'); - $validationElem.html( - QWeb.render('slide.slide.quiz.validation', {'widget': this}) + $validationElem.empty().append( + renderToElement('slide.slide.quiz.validation', {'widget': this}) ); }, /* diff --git a/addons/website_slides/static/src/js/slides_course_quiz_question_form.js b/addons/website_slides/static/src/js/slides_course_quiz_question_form.js index 086a3140bcc..9fe2d1ed83a 100644 --- a/addons/website_slides/static/src/js/slides_course_quiz_question_form.js +++ b/addons/website_slides/static/src/js/slides_course_quiz_question_form.js @@ -1,9 +1,8 @@ /** @odoo-module **/ import publicWidget from '@web/legacy/js/public/public_widget'; -import core from "@web/legacy/js/services/core"; import { _t } from "@web/core/l10n/translation"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; /** * This Widget is responsible of displaying the question inputs when adding a new question or when updating an @@ -88,7 +87,7 @@ var QuestionFormWidget = publicWidget.Widget.extend({ * @private */ _addAnswerLine: function (ev) { - $(ev.currentTarget).closest('.o_wslides_js_quiz_answer').after(QWeb.render('slide.quiz.answer.line')); + $(ev.currentTarget).closest('.o_wslides_js_quiz_answer').after(renderToElement('slide.quiz.answer.line')); }, /** diff --git a/addons/website_slides/static/src/js/slides_course_unsubscribe.js b/addons/website_slides/static/src/js/slides_course_unsubscribe.js index 2dde6784140..81af04aeba6 100644 --- a/addons/website_slides/static/src/js/slides_course_unsubscribe.js +++ b/addons/website_slides/static/src/js/slides_course_unsubscribe.js @@ -1,10 +1,9 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; import Dialog from '@web/legacy/js/core/dialog'; import publicWidget from '@web/legacy/js/public/public_widget'; import { _t } from "@web/core/l10n/translation"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; var SlideUnsubscribeDialog = Dialog.extend({ template: 'slides.course.unsubscribe.modal', @@ -126,7 +125,7 @@ var SlideUnsubscribeDialog = Dialog.extend({ tmpl = 'slides.course.unsubscribe.modal.leave'; } this.$('.o_w_slide_unsubscribe_modal_container').empty(); - this.$('.o_w_slide_unsubscribe_modal_container').append(QWeb.render(tmpl, {widget: this})); + this.$('.o_w_slide_unsubscribe_modal_container').append(renderToElement(tmpl, {widget: this})); this._resetModal(); }, diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js index 70e3b2ff67e..fed44e244f2 100644 --- a/addons/website_slides/static/src/js/slides_upload.js +++ b/addons/website_slides/static/src/js/slides_upload.js @@ -1,7 +1,8 @@ /** @odoo-module **/ import { uniqueId } from '@web/core/utils/functions'; -import {_t, qweb as QWeb} from "@web/legacy/js/services/core"; +import { _t } from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import Dialog from '@web/legacy/js/core/dialog'; import publicWidget from '@web/legacy/js/public/public_widget'; import utils from '@web/legacy/js/core/utils'; @@ -480,7 +481,7 @@ var SlideUploadDialog = Dialog.extend({ */ _setModalLoading: function (loading) { if (loading) { - this.$el.closest('.modal-content').append(QWeb.render('website.slide.upload.modal.loading')); + this.$el.closest('.modal-content').append(renderToElement('website.slide.upload.modal.loading')); } else { this.$el.closest('.modal-content').find('.o_wslides_slide_upload_loading').remove(); } @@ -505,7 +506,7 @@ var SlideUploadDialog = Dialog.extend({ this.$modal.find('.modal-dialog').addClass('modal-lg'); } this.$('.o_w_slide_upload_modal_container').empty(); - this.$('.o_w_slide_upload_modal_container').append(QWeb.render(tmpl, {widget: this})); + this.$('.o_w_slide_upload_modal_container').append(renderToElement(tmpl, {widget: this})); this._resetModalButton(); diff --git a/addons/website_slides_survey/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides_survey/static/src/js/slides_course_fullscreen_player.js index e43c1381d4c..42483c4e7a6 100644 --- a/addons/website_slides_survey/static/src/js/slides_course_fullscreen_player.js +++ b/addons/website_slides_survey/static/src/js/slides_course_fullscreen_player.js @@ -1,7 +1,6 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; -var QWeb = core.qweb; +import { renderToElement } from "@web/core/utils/render"; import Fullscreen from "@website_slides/js/slides_course_fullscreen_player"; Fullscreen.include({ @@ -16,7 +15,7 @@ Fullscreen.include({ var def = this._super.apply(this, arguments); var $content = this.$('.o_wslides_fs_content'); if (this.get('slide').category === "certification"){ - $content.html(QWeb.render('website.slides.fullscreen.certification',{widget: this})); + $content.empty().append(renderToElement('website.slides.fullscreen.certification',{widget: this})); } return Promise.all([def]); }, diff --git a/addons/website_twitter/static/src/js/website.twitter.animation.js b/addons/website_twitter/static/src/js/website.twitter.animation.js index 8c9a91b46b4..8b02b371da4 100644 --- a/addons/website_twitter/static/src/js/website.twitter.animation.js +++ b/addons/website_twitter/static/src/js/website.twitter.animation.js @@ -1,12 +1,10 @@ /** @odoo-module **/ -import core from "@web/legacy/js/services/core"; +import { renderToElement } from "@web/core/utils/render"; import { Markup } from "@web/legacy/js/core/utils"; import publicWidget from "@web/legacy/js/public/public_widget"; import { escape } from "@web/core/utils/strings"; -var qweb = core.qweb; - publicWidget.registry.twitter = publicWidget.Widget.extend({ selector: '.twitter', disabledInEditableMode: false, @@ -28,7 +26,7 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({ $timeline.empty(); if (data.error) { - $timeline.append(qweb.render('website.Twitter.Error', {data: data})); + $timeline.append(renderToElement('website.Twitter.Error', {data: data})); return; } @@ -67,7 +65,7 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({ } )); - return qweb.render('website.Twitter.Tweet', {tweet: tweet}); + return renderToElement('website.Twitter.Tweet', {tweet: tweet}); function _makeLink(url, text) { return Markup`${text}`; @@ -77,7 +75,7 @@ publicWidget.registry.twitter = publicWidget.Widget.extend({ var f = Math.floor(tweets.length / 3); var tweetSlices = [tweets.slice(0, f).join(' '), tweets.slice(f, f * 2).join(' '), tweets.slice(f * 2, tweets.length).join(' ')]; - self.$scroller = $(qweb.render('website.Twitter.Scroller')).appendTo($timeline); + self.$scroller = $(renderToElement('website.Twitter.Scroller')).appendTo($timeline); self.$scroller.find('div[id^="scroller"]').toArray().forEach((element, index) => { var $scrollWrapper = $('
', {class: 'scrollWrapper'}); var $scrollableArea = $('
', {class: 'scrollableArea'});