[IMP] web: bind colorpicker events in start instead of init
It is more conventional to bind extra events in the `start` of widgets instead of in their `init`. Indeed, the handlers often make sense only if the widget is already in the DOM. Related to task-3332711 Part-of: odoo/odoo#126313
This commit is contained in:
@@ -39,28 +39,6 @@ var ColorpickerWidget = Widget.extend({
|
||||
this.uniqueId = uniqueId("colorpicker");
|
||||
this.selectedHexValue = '';
|
||||
|
||||
// Needs to be bound on document to work in all possible cases.
|
||||
const $document = $(
|
||||
parent.options.ownerDocument ||
|
||||
(parent.el && parent.el.parentElement && parent.el.ownerDocument)
|
||||
|| (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
|
||||
|| document);
|
||||
|
||||
this.throttleOnMouseMove = throttleForAnimation((ev) => {
|
||||
this._onMouseMovePicker(ev);
|
||||
this._onMouseMoveSlider(ev);
|
||||
this._onMouseMoveOpacitySlider(ev);
|
||||
});
|
||||
$document.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
|
||||
$document.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
|
||||
if (this.pickerFlag || this.sliderFlag || this.opacitySliderFlag) {
|
||||
this._colorSelected();
|
||||
}
|
||||
this.pickerFlag = false;
|
||||
this.sliderFlag = false;
|
||||
this.opacitySliderFlag = false;
|
||||
}, 10));
|
||||
|
||||
this.options = Object.assign({}, options);
|
||||
},
|
||||
/**
|
||||
@@ -100,6 +78,28 @@ var ColorpickerWidget = Widget.extend({
|
||||
});
|
||||
resizeObserver.observe(this.el);
|
||||
|
||||
// Needs to be bound on document to work in all possible cases.
|
||||
const parent = this.getParent();
|
||||
const $document = $(
|
||||
parent.options.ownerDocument ||
|
||||
(parent.el && parent.el.parentElement && parent.el.ownerDocument)
|
||||
|| (parent.options && parent.options.$editable && parent.options.$editable[0] && parent.options.$editable[0].ownerDocument)
|
||||
|| document);
|
||||
this.throttleOnMouseMove = throttleForAnimation((ev) => {
|
||||
this._onMouseMovePicker(ev);
|
||||
this._onMouseMoveSlider(ev);
|
||||
this._onMouseMoveOpacitySlider(ev);
|
||||
});
|
||||
$document.on(`mousemove.${this.uniqueId}`, this.throttleOnMouseMove);
|
||||
$document.on(`mouseup.${this.uniqueId}`, debounce((ev) => {
|
||||
if (this.pickerFlag || this.sliderFlag || this.opacitySliderFlag) {
|
||||
this._colorSelected();
|
||||
}
|
||||
this.pickerFlag = false;
|
||||
this.sliderFlag = false;
|
||||
this.opacitySliderFlag = false;
|
||||
}, 10));
|
||||
|
||||
this.previewActive = true;
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user