From e912823cb1bfbe8baf9b6d6478faab7f023b039b Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Mon, 17 Feb 2020 11:33:32 +0000 Subject: [PATCH] [IMP] website, *: split the customize method into 3 different methods * theme_bootswatch, web_editor Split the customizeWebsite method into 3 different methods so we can use customizeWebsite for variable, views or color on the same widget. Part of https://github.com/odoo/odoo/pull/38950 task-2087641 --- .../views/theme_bootswatch_templates.xml | 20 +-- .../static/src/js/editor/snippets.options.js | 5 +- .../static/src/js/editor/snippets.options.js | 138 +++++++++++------- addons/website/views/snippets/snippets.xml | 68 ++++----- 4 files changed, 130 insertions(+), 101 deletions(-) diff --git a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml index 34c396cf0d5..8093dc5c9ed 100644 --- a/addons/theme_bootswatch/views/theme_bootswatch_templates.xml +++ b/addons/theme_bootswatch/views/theme_bootswatch_templates.xml @@ -11,16 +11,16 @@
Switch Theme - Default - Cerulean - Cosmo - Cyborg - Flatly - Journal - Simplex - Slate - Spacelab - United + Default + Cerulean + Cosmo + Cyborg + Flatly + Journal + Simplex + Slate + Spacelab + United
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 50a2ac8dda1..235cb0a8d17 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1731,7 +1731,7 @@ const SnippetOptionWidget = Widget.extend({ const proms = this._userValueWidgets.map(async widget => { // Update widget value (for each method) const methodsNames = widget.getMethodsNames(); - const proms = methodsNames.map(async methodName => { + for (const methodName of methodsNames) { const params = widget.getMethodsParams(methodName); let obj = this; @@ -1749,8 +1749,7 @@ const SnippetOptionWidget = Widget.extend({ } const normalizedValue = this._normalizeWidgetValue(value); widget.setValue(normalizedValue, methodName); - }); - await Promise.all(proms); + } // Refresh the UI of all widgets (after all the current values they // hold have been updated). diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 27a8a589c46..ab82318fa09 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -83,7 +83,7 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ await this._super(...arguments); const fontEls = []; - const methodName = this.el.dataset.methodName || 'customizeWebsite'; + const methodName = this.el.dataset.methodName || 'customizeWebsiteVariable'; const variable = this.el.dataset.variable; _.times(this.nbFonts, fontNb => { const realFontNb = fontNb + 1; @@ -236,18 +236,80 @@ options.Class.include({ /** * @see this.selectClass for parameters */ - customizeWebsite: async function (previewMode, widgetValue, params) { + customizeWebsiteViews: async function (previewMode, widgetValue, params) { + await this._customizeWebsite(previewMode, widgetValue, params, 'views'); + }, + /** + * @see this.selectClass for parameters + */ + customizeWebsiteVariable: async function (previewMode, widgetValue, params) { + await this._customizeWebsite(previewMode, widgetValue, params, 'variable'); + }, + /** + * @see this.selectClass for parameters + */ + customizeWebsiteColor: async function (previewMode, widgetValue, params) { + await this._customizeWebsite(previewMode, widgetValue, params, 'color'); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _computeWidgetState: async function (methodName, params) { + switch (methodName) { + case 'customizeWebsiteViews': { + const allXmlIDs = this._getXMLIDsFromPossibleValues(params.possibleValues); + const enabledXmlIDs = await this._rpc({ + route: '/website/theme_customize_get', + params: { + 'xml_ids': allXmlIDs, + }, + }); + let mostXmlIDsStr = ''; + let mostXmlIDsNb = 0; + for (const xmlIDsStr of params.possibleValues) { + const enableXmlIDs = xmlIDsStr.split(/\s*,\s*/); + if (enableXmlIDs.length > mostXmlIDsNb + && enableXmlIDs.every(xmlID => enabledXmlIDs.includes(xmlID))) { + mostXmlIDsStr = xmlIDsStr; + mostXmlIDsNb = enableXmlIDs.length; + } + } + return mostXmlIDsStr; // Need to return the exact same string as in possibleValues + } + case 'customizeWebsiteVariable': { + const style = window.getComputedStyle(document.documentElement); + return style.getPropertyValue('--' + params.variable).trim(); + } + case 'customizeWebsiteColor': { + return this._getCSSColorFromName(params.color); + } + } + return this._super(...arguments); + }, + /** + * @private + */ + _customizeWebsite: async function (previewMode, widgetValue, params, type) { // Never allow previews for theme customizations if (previewMode) { return; } - if (params.color) { - await this._customizeWebsiteColor(widgetValue, params); - } else if (params.variable) { - await this._customizeWebsiteVariable(widgetValue, params); - } else { - await this._customizeWebsiteViews(widgetValue, params); + switch (type) { + case 'views': + await this._customizeWebsiteViews(widgetValue, params); + break; + case 'variable': + await this._customizeWebsiteVariable(widgetValue, params); + break; + case 'color': + await this._customizeWebsiteColor(widgetValue, params); + break; } if (params.reload || config.isDebug('assets')) { @@ -268,45 +330,6 @@ options.Class.include({ }); }); }, - - //-------------------------------------------------------------------------- - // Private - //-------------------------------------------------------------------------- - - /** - * @override - */ - _computeWidgetState: async function (methodName, params) { - if (methodName === 'customizeWebsite') { - if (params.color) { - return this._getCSSColorFromName(params.color); - } - if (params.variable) { - const style = window.getComputedStyle(document.documentElement); - return style.getPropertyValue('--' + params.variable).trim(); - } - - const allXmlIDs = this._getXMLIDsFromPossibleValues(params.possibleValues); - const enabledXmlIDs = await this._rpc({ - route: '/website/theme_customize_get', - params: { - 'xml_ids': allXmlIDs, - }, - }); - let mostXmlIDsStr = ''; - let mostXmlIDsNb = 0; - for (const xmlIDsStr of params.possibleValues) { - const enableXmlIDs = xmlIDsStr.split(/\s*,\s*/); - if (enableXmlIDs.length > mostXmlIDsNb - && enableXmlIDs.every(xmlID => enabledXmlIDs.includes(xmlID))) { - mostXmlIDsStr = xmlIDsStr; - mostXmlIDsNb = enableXmlIDs.length; - } - } - return mostXmlIDsStr; // Need to return the exact same string as in possibleValues - } - return this._super(...arguments); - }, /** * @private */ @@ -460,10 +483,10 @@ options.Class.include({ const _super = this._super.bind(this); // First check if the updated widget or any of the widgets it will - // trigger uses the 'customizeWebsite' method. If so, check if any one of - // them will require a reload. If it is the case, warns the user and ask - // if he agrees to save its current changes. If not, just do nothing. - // If yes, save the current changes and continue. + // trigger uses one of the 'customizeWebsite...' methods. If so, check + // if any one of them will require a reload. If it is the case, warns + // the user and ask if he agrees to save its current changes. If not, + // just do nothing. If yes, save the current changes and continue. let requiresReload = false; if (!ev.data.previewMode && !ev.data.isSimulatedEvent) { const linkedWidgets = this._requestUserValueWidgets(...ev.data.triggerWidgetsNames); @@ -471,11 +494,18 @@ options.Class.include({ for (const widget of widgets) { const methodsNames = widget.getMethodsNames(); - if (!methodsNames.includes('customizeWebsite')) { + if (!methodsNames.includes('customizeWebsiteViews') + && !methodsNames.includes('customizeWebsiteVariable') + && !methodsNames.includes('customizeWebsiteColor')) { continue; } - const params = widget.getMethodsParams('customizeWebsite'); - if (params.reload || config.isDebug('assets')) { + let paramsReload = false; + if (widget.getMethodsParams('customizeWebsiteViews').reload + || widget.getMethodsParams('customizeWebsiteVariable').reload + || widget.getMethodsParams('customizeWebsiteColor').reload) { + paramsReload = true; + } + if (paramsReload || config.isDebug('assets')) { requiresReload = true; break; } diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 4b7f72187f6..f2a7fcfa33e 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -388,17 +388,17 @@ data-selector="#wrapwrap > header" data-no-check="true" groups="website.group_website_designer"> - - - + + + - Text - Image + Text + Image - + - + @@ -421,7 +421,7 @@
- +
@@ -528,52 +528,52 @@
Switch Theme - - - - + + + + - - - - - + + + + + - - - - + + + + - + - + - - - - - + + + + + - + - None - Image - Pattern + None + Image + Pattern - Full - Boxed + Full + Boxed <head>