[IMP] web_editor: add default opt selectAttribute

Add default option selectAttribute
Most of the logic is shared with selectDataAttribute

part of: https://github.com/odoo/odoo/pull/45397

task-2197008
This commit is contained in:
fja-odoo
2020-03-06 16:25:34 +00:00
parent 223038682f
commit b943dd83f6
@@ -1531,18 +1531,22 @@ const SnippetOptionWidget = Widget.extend({
* @returns {Promise|undefined}
*/
selectDataAttribute: function (previewMode, widgetValue, params) {
const dataName = params.attributeName;
if (dataName) {
if (params.saveUnit && !params.withUnit) {
// Values that come with an unit are saved without unit as
// data-attribute unless told otherwise.
widgetValue = widgetValue.split(params.saveUnit).join('');
}
this.$target[0].dataset[dataName] = widgetValue;
}
if (params.extraClass) {
this.$target.toggleClass(params.extraClass, params.defaultValue !== widgetValue);
}
const value = this._selectAttributeHelper(widgetValue, params);
this.$target[0].dataset[params.attributeName] = value;
},
/**
* Default option method which allows to select a value and set it on the
* associated snippet as an attribute. The name of the attribute is
* given by the attributeName parameter.
*
* @param {boolean} previewMode - @see this.selectClass
* @param {string} widgetValue
* @param {Object} params
* @returns {Promise|undefined}
*/
selectAttribute: function (previewMode, widgetValue, params) {
const value = this._selectAttributeHelper(widgetValue, params);
this.$target[0].setAttribute(params.attributeName, value);
},
/**
* Default option method which allows to select a value and set it on the
@@ -1847,13 +1851,20 @@ const SnippetOptionWidget = Widget.extend({
});
return activeClassNames;
}
case 'selectAttribute':
case 'selectDataAttribute': {
const dataName = params.attributeName;
let dataValue = (this.$target[0].dataset[dataName] || '').trim();
if (params.saveUnit && !params.withUnit) {
dataValue = dataValue.split(/\s+/g).map(v => v + params.saveUnit).join(' ');
const attrName = params.attributeName;
let attrValue;
if (methodName === 'selectAttribute') {
attrValue = this.$target[0].getAttribute(attrName);
} else if (methodName === 'selectDataAttribute') {
attrValue = this.$target[0].dataset[attrName];
}
return dataValue || params.attributeDefaultValue || '';
attrValue = (attrValue || '').trim();
if (params.saveUnit && !params.withUnit) {
attrValue = attrValue.split(/\s+/g).map(v => v + params.saveUnit).join(' ');
}
return attrValue || params.attributeDefaultValue || '';
}
case 'selectStyle': {
if (params.colorPrefix && params.colorNames) {
@@ -2079,6 +2090,27 @@ const SnippetOptionWidget = Widget.extend({
}
}
},
/**
* Used to handle attribute or data attribute value change
*
* @param {string} value
* @param {Object} params
* @returns {string|undefined}
*/
_selectAttributeHelper(value, params) {
if (!params.attributeName) {
throw new Error('Attribute name missing');
}
if (params.saveUnit && !params.withUnit) {
// Values that come with an unit are saved without unit as
// data-attribute unless told otherwise.
value = value.split(params.saveUnit).join('');
}
if (params.extraClass) {
this.$target.toggleClass(params.extraClass, params.defaultValue !== value);
}
return value;
},
//--------------------------------------------------------------------------
// Handlers