pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: events not getting caught in website

Browse Source 
Current behaviour before commit:

When trying to crop image in website, 'mousedown' and
'keydown' events are not getting caught. Due to this
- Crop is not getting closed when clicking on document
- Cropped image is not getting saved when pressing
   enter

Desired behaviour after commit:

Now, events are added to the owner document of the
crop widget. As result,
- Crop gets closed when clicking anywhere in document
- Image gets saved when pressing enter.

task-3570524

closes odoo/odoo#158093

X-original-commit: afeba0d17a91d41ba2628524ccc03249835884b1
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
Signed-off-by: Adnan Saiyed (adsa) <adsa@odoo.com>
This commit is contained in:
Adnan Saiyed
2024-03-20 13:52:24 +00:00
parent f66eaebc70
commit eff58a91ca
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
+6 -5
View File
@@ -76,8 +76,8 @@ export class ImageCrop extends Component {
this._cropperClosed = true;
if (this.$cropperImage) {
this.$cropperImage.cropper('destroy');
this.document.removeEventListener('mousedown', this._onDocumentMousedown, {capture: true});
this.document.removeEventListener('keydown', this._onDocumentKeydown, {capture: true});
this.elRef.el.ownerDocument.removeEventListener('mousedown', this._onDocumentMousedown, {capture: true});
this.elRef.el.ownerDocument.removeEventListener('keydown', this._onDocumentKeydown, {capture: true});
}
this.media.setAttribute('src', this.initialSrc);
this.$media.trigger('image_cropper_destroyed');
@@ -175,8 +175,9 @@ export class ImageCrop extends Component {
this._onDocumentKeydown = this._onDocumentKeydown.bind(this);
// We use capture so that the handler is called before other editor handlers
// like save, such that we can restore the src before a save.
this.document.addEventListener('mousedown', this._onDocumentMousedown, {capture: true});
this.document.addEventListener('keydown', this._onDocumentKeydown, {capture: true});
// We need to add event listeners to the owner document of the widget.
this.elRef.el.ownerDocument.addEventListener('mousedown', this._onDocumentMousedown, {capture: true});
this.elRef.el.ownerDocument.addEventListener('keydown', this._onDocumentKeydown, {capture: true});
}
/**
* Updates the DOM image with cropped data and associates required
@@ -302,7 +303,7 @@ export class ImageCrop extends Component {
* @param {MouseEvent} ev
*/
_onDocumentMousedown(ev) {
if (document.body.contains(ev.target) && this.$(ev.target).length === 0) {
if (this.elRef.el.ownerDocument.body.contains(ev.target) && this.$(ev.target).length === 0) {
return this._closeCropper();
}
}