From 614dc4a51740bd7b37102dc99c6f9760f9325c1a Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Wed, 21 Jun 2023 14:35:49 +0200 Subject: [PATCH] [FIX] website: prevent default image drag and drop By default, images on websites can be dragged and dropped in browsers. As we have a custom drag & drop system, this commit removes the default drag & drop behavior during the edition of a website page. In addition, this commit prevents `OdooEditor` from managing drag and drop on images that should not be dragged and dropped by the user. task-3369600 closes odoo/odoo#125151 Signed-off-by: Benjamin Vray (bvr) --- .../static/src/js/editor/snippets.editor.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index 023104818e3..3f0607f71f5 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -54,6 +54,19 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({ }; this.$body[0].ownerDocument.addEventListener('selectionchange', this.__onSelectionChange); + // Even if we prevented the drag via the css, we have to override the + // dragstart event because if one of the image ancestor has a dragstart + // listener, the dragstart handler can be called with the image as + // target. So we didn't prevent the drag with the css but with the + // following handler. + this.__onDragStart = ev => { + if (ev.target.nodeName === "IMG") { + ev.preventDefault(); + ev.stopPropagation(); + } + }; + this.$body[0].addEventListener("dragstart", this.__onDragStart); + // editor_has_snippets is, amongst other things, in charge of hiding the // backend navbar with a CSS animation. But we also need to make it // display: none when the animation finishes for efficiency but also so @@ -70,6 +83,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({ destroy() { this._super(...arguments); this.$body[0].ownerDocument.removeEventListener('selectionchange', this.__onSelectionChange); + this.$body[0].removeEventListener("dragstart", this.__onDragStart); this.$body[0].classList.remove('o_animated_text_highlighted'); clearTimeout(this._hideBackendNavbarTimeout); this.el.ownerDocument.body.classList.remove('editor_has_snippets_hide_backend_navbar');