[IMP] web_editor: add a display value option on the we-range widget

This commit adds an option on the we-range widget to display the set
value right next to it.

task-2862761

Part-of: odoo/odoo#94119
This commit is contained in:
Benjamin Vray
2022-09-04 12:34:00 +02:00
committed by qsm-odoo
parent 913a40796f
commit dc8dac57d5
2 changed files with 23 additions and 2 deletions
@@ -2274,12 +2274,18 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
let min = this.el.dataset.min && parseFloat(this.el.dataset.min) || 0;
let max = this.el.dataset.max && parseFloat(this.el.dataset.max) || 100;
const step = this.el.dataset.step && parseFloat(this.el.dataset.step) || 1;
this.displayValue = this.el.dataset.displayRangeValue;
if (min > max) {
[min, max] = [max, min];
this.input.classList.add('o_we_inverted_range');
}
this._setInputAttributes(min, max, step);
this.containerEl.appendChild(this.input);
if (this.displayValue) {
this.outputEl = document.createElement('output');
this.outputEl.classList.add('ms-2');
this.containerEl.appendChild(this.outputEl);
}
},
//--------------------------------------------------------------------------
@@ -2305,7 +2311,11 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
async setValue(value, methodName) {
await this._super(...arguments);
const possibleValues = this._methodsParams.optionsPossibleValues[methodName];
this.input.value = possibleValues.length > 1 ? possibleValues.indexOf(value) : this._value;
const inputValue = possibleValues.length > 1 ? possibleValues.indexOf(value) : this._value;
this.input.value = inputValue;
if (this.displayValue) {
this.outputEl.value = inputValue;
}
},
/**
* @override
@@ -2333,6 +2343,9 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
*/
_onInputInput(ev) {
this._value = ev.target.value;
if (this.displayValue) {
this.outputEl.value = this._value;
}
this._onUserValuePreview(ev);
},
/**
@@ -1272,7 +1272,15 @@ body.editor_enable.editor_has_snippets {
// Progress bar widget
we-range.o_we_user_value_widget {
&[data-display-range-value] {
input[type="range"] {
// Needed because without it the output overflows to the right
// and makes a horizontal scrollbar appear on
// 'o_we_customize_panel' if 'o_we_customize_panel' already has
// a vertical scrollbar.
min-width: 0;
}
}
input[type="range"] {
@include large-component();
height: $o-we-sidebar-content-field-height;