From 8518a4493513450dc8d0c94df67bf8be8a278af1 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Tue, 9 May 2023 13:03:17 +0300 Subject: [PATCH] document dnd fix --- .../document/record-list-drag-n-drop.js | 188 +++++++++++------- 1 file changed, 112 insertions(+), 76 deletions(-) diff --git a/client/modules/crm/src/view-setup-handlers/document/record-list-drag-n-drop.js b/client/modules/crm/src/view-setup-handlers/document/record-list-drag-n-drop.js index 064df2d987..d23cfd1ee4 100644 --- a/client/modules/crm/src/view-setup-handlers/document/record-list-drag-n-drop.js +++ b/client/modules/crm/src/view-setup-handlers/document/record-list-drag-n-drop.js @@ -28,31 +28,48 @@ define('crm:view-setup-handlers/document/record-list-drag-n-drop', [], function () { - var Handler = function (view) { + let Handler = function (view) { this.view = view; }; _.extend(Handler.prototype, { process: function () { - this.listenTo(this.view, 'after:render', function () { - this.initDragDrop(); - }, this); + this.listenTo(this.view, 'after:render', () => this.initDragDrop()); + this.listenTo(this.view, 'remove', () => this.disable()); + }, + + disable: function () { + let $el = this.view.$el.parent(); + /** @type {Element} */ + let el = $el.get(0); + + $el.off('drop'); + + if (!el) { + return; + } + + if (!this.onDragoverBind) { + return; + } + + el.removeEventListener('dragover', this.onDragoverBind); + el.removeEventListener('dragenter', this.onDragenterBind); + el.removeEventListener('dragleave', this.onDragleaveBind); }, initDragDrop: function () { - var $el = this.view.$el.parent(); + this.disable(); - $el.off('drop'); - $el.off('dragover'); - $el.off('dragleave'); + let $el = this.view.$el.parent(); + let el = $el.get(0); - $el.on('drop', function (e) { + $el.on('drop', e => { e.preventDefault(); - e.stopPropagation(); - var e = e.originalEvent; + e = e.originalEvent; if ( e.dataTransfer && @@ -68,65 +85,31 @@ define('crm:view-setup-handlers/document/record-list-drag-n-drop', [], function } this.removeDrop($el); - }.bind(this)); - - $el.get(0).addEventListener('dragover', function (e) { - e.preventDefault(); }); + this.dropEntered = false; - $el.get(0).addEventListener('dragenter', function (e) { - e.preventDefault(); + this.onDragoverBind = this.onDragover.bind(this); + this.onDragenterBind = this.onDragenter.bind(this); + this.onDragleaveBind = this.onDragleave.bind(this); - if (!e.dataTransfer.types || !e.dataTransfer.types.length) { - return; - } - - if (!~e.dataTransfer.types.indexOf('Files')) { - return; - } - - if (!this.dropEntered) { - this.renderDrop(); - } - }.bind(this)); - - $el.get(0).addEventListener('dragleave', function (e) { - e.preventDefault(); - - if (!this.dropEntered) { - return; - } - - var fromElement = e.fromElement || e.relatedTarget; - - if (fromElement && $.contains($el.get(0), fromElement)) { - return; - } - - if ( - fromElement && - fromElement.parentNode && - fromElement.parentNode.toString() === '[object ShadowRoot]' - ) { - return; - } - - this.removeDrop(); - - }.bind(this)); + el.addEventListener('dragover', this.onDragoverBind); + el.addEventListener('dragenter', this.onDragenterBind); + el.addEventListener('dragleave', this.onDragleaveBind); }, renderDrop: function () { this.dropEntered = true; let $backdrop = - $('
') + $('
') .css('pointer-events', 'none') - .html( - ' ' + - this.view.getLanguage().translate('Create Document', 'labels', 'Document') + .append('') + .append(' ') + .append( + $('') + .text(this.view.getLanguage().translate('Create Document', 'labels', 'Document')) ); this.view.$el.append($backdrop); @@ -141,31 +124,84 @@ define('crm:view-setup-handlers/document/record-list-drag-n-drop', [], function create: function (file) { this.view .actionQuickCreate() - .then( - function (view) { - var fileView = view.getRecordView().getFieldView('file'); + .then(view => { + let fileView = view.getRecordView().getFieldView('file'); - if (!fileView) { - var msg = "No 'file' field on the layout."; + if (!fileView) { + let msg = "No 'file' field on the layout."; - Espo.Ui.error(msg); - console.error(msg); + Espo.Ui.error(msg); + console.error(msg); - return; - } + return; + } - if (fileView.isRendered()) { - fileView.uploadFile(file); + if (fileView.isRendered()) { + fileView.uploadFile(file); - return; - } + return; + } - this.listenToOnce(fileView, 'after:render', function () { - fileView.uploadFile(file); - }); - }.bind(this) - ); + this.listenToOnce(fileView, 'after:render', () => { + fileView.uploadFile(file); + }); + }); + }, + /** + * @param {DragEvent} e + */ + onDragover: function (e) { + e.preventDefault(); + }, + + /** + * @param {DragEvent} e + */ + onDragenter: function (e) { + e.preventDefault(); + + if (!e.dataTransfer.types || !e.dataTransfer.types.length) { + return; + } + + if (!~e.dataTransfer.types.indexOf('Files')) { + return; + } + + if (!this.dropEntered) { + this.renderDrop(); + } + }, + + /** + * @param {DragEvent} e + */ + onDragleave: function (e) { + e.preventDefault(); + + if (!this.dropEntered) { + return; + } + + let fromElement = e.fromElement || e.relatedTarget; + + if ( + fromElement && + $.contains(this.view.$el.parent().get(0), fromElement) + ) { + return; + } + + if ( + fromElement && + fromElement.parentNode && + fromElement.parentNode.toString() === '[object ShadowRoot]' + ) { + return; + } + + this.removeDrop(); }, });