[IMP] web_editor: add support for data-min/max to InputUserValueWidget

Before this commit, when using a `we-input`, there was no way to easily
specify the min and max values that could be entered in the input, which
could be useful when too low/high values could break some behaviors, for
example.

This commit adds the support for the `data-min` and `data-max` data-
attributes in `InputUserValueWidget`. More precisely, when these
attributes are added on a `we-input`, if the user writes a value smaller
than the `data-min` or bigger than the `data-max`, the value snaps to
these bounds. When using the arrows, the value cannot be decreased/
increased beyond them either.

task-3369695

Part-of: odoo/odoo#136683
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-10-14 23:52:16 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent df7b8a17cd
commit 75331fd46a
@@ -1286,7 +1286,38 @@ const InputUserValueWidget = UnitUserValueWidget.extend({
* @param {Event} ev
*/
_onInputInput: function (ev) {
// First record the input value as the new current value and bound it if
// necessary (min / max params).
this._value = this.inputEl.value;
const params = this._methodsParams;
const hasMin = ('min' in params);
const hasMax = ('max' in params);
if (hasMin || hasMax) {
// Bounding the value in [min, max] if specified.
const boundedValue = this._value.split(/\s+/g).map(v => {
let numValue = parseFloat(v);
if (isNaN(numValue)) {
return hasMin ? params.min : v;
} else {
numValue = hasMin ? Math.max(params.min, numValue) : numValue;
numValue = hasMax ? Math.min(numValue, params.max) : numValue;
return numValue;
}
}).join(" ");
// If the bounded version is different from the value, forget about
// the old value so that we properly update the UI in any case.
this._oldValue = undefined;
// Note: we do not change the input's value because we want the user
// to be able to enter anything without it being auto-fixed. For
// example, just emptying the input to enter new numbers: you don't
// want the min value to pop up unexpectedly. The next UI update
// will take care of showing the user that the value was bound.
this._value = boundedValue;
}
// When the value changes as a result of a arrow up/down, the change
// event is not called, unless a real user input has been triggered.
// This event handler holds a variable for this in order to not call
@@ -1336,8 +1367,27 @@ const InputUserValueWidget = UnitUserValueWidget.extend({
if (isNaN(step)) {
step = 1.0;
}
value += (ev.which === $.ui.keyCode.UP ? step : -step);
const increasing = ev.which === $.ui.keyCode.UP;
const hasMin = ('min' in params);
const hasMax = ('max' in params);
// If value already at min and trying to decrease, do nothing
if (!increasing && hasMin && Math.abs(value - params.min) < 0.001) {
return;
}
// If value already at max and trying to increase, do nothing
if (increasing && hasMax && Math.abs(value - params.max) < 0.001) {
return;
}
// If trying to decrease/increase near min/max, we still need to
// bound the produced value and immediately show the user.
value += (increasing ? step : -step);
value = hasMin ? Math.max(params.min, value) : value;
value = hasMax ? Math.min(value, params.max) : value;
input.value = this._floatToStr(value);
// We need to know if the change event will be triggered or not.
// Change is triggered if there has been a "natural" input event
// from the user. Since we are triggering a "fake" input event,