[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
This commit is contained in:
Benjamin Vray
@@ -11,16 +11,16 @@
|
||||
<div data-js="Theme" data-selector="theme" data-no-check="true">
|
||||
<we-button data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
|
||||
<we-select string="Bootswatch Theme">
|
||||
<we-button data-customize-website="" data-icon="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png">Default</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean" data-icon="/theme_bootswatch/static/src/img/cerulean_thumbnail.png">Cerulean</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-icon="/theme_bootswatch/static/src/img/cosmo_thumbnail.png">Cosmo</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg" data-icon="/theme_bootswatch/static/src/img/cyborg_thumbnail.png">Cyborg</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly" data-icon="/theme_bootswatch/static/src/img/flatly_thumbnail.png">Flatly</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal" data-icon="/theme_bootswatch/static/src/img/journal_thumbnail.png">Journal</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex" data-icon="/theme_bootswatch/static/src/img/simplex_thumbnail.png">Simplex</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate" data-icon="/theme_bootswatch/static/src/img/slate_thumbnail.png">Slate</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab" data-icon="/theme_bootswatch/static/src/img/spacelab_thumbnail.png">Spacelab</we-button>
|
||||
<we-button data-customize-website="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united" data-icon="/theme_bootswatch/static/src/img/united_thumbnail.png">United</we-button>
|
||||
<we-button data-customize-website-views="" data-icon="/theme_bootswatch/static/src/img/bootswatch_default_thumbnail.png">Default</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_cerulean_bs_variables,theme_bootswatch.theme_cerulean" data-icon="/theme_bootswatch/static/src/img/cerulean_thumbnail.png">Cerulean</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_cosmo_bs_variables,theme_bootswatch.theme_cosmo" data-icon="/theme_bootswatch/static/src/img/cosmo_thumbnail.png">Cosmo</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_cyborg_bs_variables,theme_bootswatch.theme_cyborg" data-icon="/theme_bootswatch/static/src/img/cyborg_thumbnail.png">Cyborg</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_flatly_bs_variables,theme_bootswatch.theme_flatly" data-icon="/theme_bootswatch/static/src/img/flatly_thumbnail.png">Flatly</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_journal_bs_variables,theme_bootswatch.theme_journal" data-icon="/theme_bootswatch/static/src/img/journal_thumbnail.png">Journal</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_simplex_bs_variables,theme_bootswatch.theme_simplex" data-icon="/theme_bootswatch/static/src/img/simplex_thumbnail.png">Simplex</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_slate_bs_variables,theme_bootswatch.theme_slate" data-icon="/theme_bootswatch/static/src/img/slate_thumbnail.png">Slate</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_spacelab_bs_variables,theme_bootswatch.theme_spacelab" data-icon="/theme_bootswatch/static/src/img/spacelab_thumbnail.png">Spacelab</we-button>
|
||||
<we-button data-customize-website-views="theme_bootswatch.theme_united_bs_variables,theme_bootswatch.theme_united" data-icon="/theme_bootswatch/static/src/img/united_thumbnail.png">United</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -388,17 +388,17 @@
|
||||
data-selector="#wrapwrap > header"
|
||||
data-no-check="true"
|
||||
groups="website.group_website_designer">
|
||||
<we-checkbox string="Show Sign In" data-customize-website="portal.portal_show_sign_in" data-reload="/"/>
|
||||
<we-checkbox string="Fixed Top Menu" data-customize-website="website.affix_top_menu" data-reload="/"/>
|
||||
<we-colorpicker string="Background Color" data-customize-website="" data-color="menu"/>
|
||||
<we-checkbox string="Show Sign In" data-customize-website-views="portal.portal_show_sign_in" data-reload="/"/>
|
||||
<we-checkbox string="Fixed Top Menu" data-customize-website-views="website.affix_top_menu" data-reload="/"/>
|
||||
<we-colorpicker string="Background Color" data-customize-website-color="" data-color="menu"/>
|
||||
<we-select string="Logo" data-reload="/">
|
||||
<we-button data-customize-website="">Text</we-button>
|
||||
<we-button data-customize-website="website.layout_logo_show">Image</we-button>
|
||||
<we-button data-customize-website-views="">Text</we-button>
|
||||
<we-button data-customize-website-views="website.layout_logo_show">Image</we-button>
|
||||
</we-select>
|
||||
<we-input string="Logo Height" data-customize-website="null" data-variable="logo-height" data-unit="px" data-save-unit="rem"/>
|
||||
<we-input string="Logo Height" data-customize-website-variable="null" data-variable="logo-height" data-unit="px" data-save-unit="rem"/>
|
||||
<we-row string="Font">
|
||||
<we-fontfamilypicker data-variable="navbar-font-number"/>
|
||||
<we-input data-customize-website="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
|
||||
<we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
|
||||
</we-row>
|
||||
</div>
|
||||
|
||||
@@ -421,7 +421,7 @@
|
||||
<div data-selector="#wrapwrap > footer"
|
||||
data-no-check="true"
|
||||
groups="website.group_website_designer">
|
||||
<we-colorpicker string="Background" data-customize-website="" data-color="footer"/>
|
||||
<we-colorpicker string="Background" data-customize-website-color="" data-color="footer"/>
|
||||
</div>
|
||||
|
||||
<!-- Anchor Name -->
|
||||
@@ -528,52 +528,52 @@
|
||||
<div data-js="Theme" data-selector="theme" data-no-check="true">
|
||||
<we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
|
||||
<we-row string="Main Colors">
|
||||
<we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website="" data-color-type="theme" data-color="primary"/>
|
||||
<we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website="" data-color-type="theme" data-color="secondary"/>
|
||||
<we-colorpicker data-name="alpha_as_primary_color_opt" title="Primary" data-customize-website="" data-color-type="theme" data-color="alpha"/>
|
||||
<we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website="" data-color-type="theme" data-color="beta"/>
|
||||
<we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="primary"/>
|
||||
<we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="secondary"/>
|
||||
<we-colorpicker data-name="alpha_as_primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
|
||||
<we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
|
||||
</we-row>
|
||||
<we-row string="Extra Colors">
|
||||
<we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website="" data-color-type="theme" data-color="alpha"/>
|
||||
<we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website="" data-color-type="theme" data-color="beta"/>
|
||||
<we-colorpicker data-customize-website="" data-color-type="theme" data-color="gamma"/>
|
||||
<we-colorpicker data-customize-website="" data-color-type="theme" data-color="delta"/>
|
||||
<we-colorpicker data-customize-website="" data-color-type="theme" data-color="epsilon"/>
|
||||
<we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
|
||||
<we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
|
||||
<we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="gamma"/>
|
||||
<we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="delta"/>
|
||||
<we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="epsilon"/>
|
||||
</we-row>
|
||||
<we-row string="Status Colors">
|
||||
<we-colorpicker title="Success" data-customize-website="" data-color-type="theme" data-color="success"/>
|
||||
<we-colorpicker title="Info" data-customize-website="" data-color-type="theme" data-color="info"/>
|
||||
<we-colorpicker title="Warning" data-customize-website="" data-color-type="theme" data-color="warning"/>
|
||||
<we-colorpicker title="Error" data-customize-website="" data-color-type="theme" data-color="danger"/>
|
||||
<we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
|
||||
<we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>
|
||||
<we-colorpicker title="Warning" data-customize-website-color="" data-color-type="theme" data-color="warning"/>
|
||||
<we-colorpicker title="Error" data-customize-website-color="" data-color-type="theme" data-color="danger"/>
|
||||
</we-row>
|
||||
<we-row string="Texts">
|
||||
<we-colorpicker data-customize-website="" data-color="text"/>
|
||||
<we-colorpicker data-customize-website-color="" data-color="text"/>
|
||||
<we-fontfamilypicker data-variable="font-number"/>
|
||||
</we-row>
|
||||
<we-row string="Headings">
|
||||
<we-colorpicker data-customize-website="" data-color="h1"/>
|
||||
<we-colorpicker data-customize-website-color="" data-color="h1"/>
|
||||
<we-fontfamilypicker data-variable="headings-font-number"/>
|
||||
</we-row>
|
||||
<we-row string="Sub-Headings">
|
||||
<we-colorpicker title="Headings 2" data-customize-website="" data-color="h2"/>
|
||||
<we-colorpicker title="Headings 3" data-customize-website="" data-color="h3"/>
|
||||
<we-colorpicker title="Headings 4" data-customize-website="" data-color="h4"/>
|
||||
<we-colorpicker title="Headings 5" data-customize-website="" data-color="h5"/>
|
||||
<we-colorpicker title="Headings 6" data-customize-website="" data-color="h6"/>
|
||||
<we-colorpicker title="Headings 2" data-customize-website-color="" data-color="h2"/>
|
||||
<we-colorpicker title="Headings 3" data-customize-website-color="" data-color="h3"/>
|
||||
<we-colorpicker title="Headings 4" data-customize-website-color="" data-color="h4"/>
|
||||
<we-colorpicker title="Headings 5" data-customize-website-color="" data-color="h5"/>
|
||||
<we-colorpicker title="Headings 6" data-customize-website-color="" data-color="h6"/>
|
||||
</we-row>
|
||||
<we-fontfamilypicker string="Buttons" data-variable="buttons-font-number"/>
|
||||
<we-row string="Background">
|
||||
<we-colorpicker title="Body" data-customize-website="" data-color="body"/>
|
||||
<we-colorpicker title="Body" data-customize-website-color="" data-color="body"/>
|
||||
<we-select>
|
||||
<we-button data-name="no_background_opt" data-customize-website="">None</we-button>
|
||||
<we-button data-customize-website="website.option_custom_body_image">Image</we-button>
|
||||
<we-button data-customize-website="website.option_custom_body_image, website.option_custom_body_pattern">Pattern</we-button>
|
||||
<we-button data-name="no_background_opt" data-customize-website-views="">None</we-button>
|
||||
<we-button data-customize-website-views="website.option_custom_body_image">Image</we-button>
|
||||
<we-button data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern">Pattern</we-button>
|
||||
</we-select>
|
||||
<we-imagepicker data-dependencies="!no_background_opt" data-customize-body-bg=""/>
|
||||
</we-row>
|
||||
<we-select string="Layout">
|
||||
<we-button data-customize-website="">Full</we-button>
|
||||
<we-button data-customize-website="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
|
||||
<we-button data-customize-website-views="">Full</we-button>
|
||||
<we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
|
||||
</we-select>
|
||||
<we-row string="Code Injection" title="Enter code that will be added into every page of your site">
|
||||
<we-button data-no-preview="true" data-open-custom-code-dialog="head">&lt;head&gt;</we-button>
|
||||
|
||||
Reference in New Issue
Block a user