From d706793e560fe0c8956751f7e4d50fb814694a05 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Thu, 27 Oct 2022 23:51:55 +0200 Subject: [PATCH] Improved drag&drop of local EML files --- dev/Common/Folders.js | 29 +++++++++++ dev/External/User/ko.js | 32 +----------- dev/View/User/MailBox/MessageList.js | 76 ++++++++++++++++++---------- 3 files changed, 80 insertions(+), 57 deletions(-) diff --git a/dev/Common/Folders.js b/dev/Common/Folders.js index f9633efe8..f0a589836 100644 --- a/dev/Common/Folders.js +++ b/dev/Common/Folders.js @@ -9,6 +9,8 @@ import { SettingsUserStore } from 'Stores/User/Settings'; import { FolderUserStore } from 'Stores/User/Folder'; import { MessagelistUserStore } from 'Stores/User/Messagelist'; import { getNotification } from 'Common/Translator'; +import { Settings, } from 'Common/Globals'; +import { serverRequest } from 'Common/Links'; import Remote from 'Remote/User/Fetch'; @@ -281,4 +283,31 @@ moveMessagesToFolder = (sFromFolderFullName, oUids, sToFolderFullName, bCopy) => } return false; +}, + +dropFilesInFolder = (sFolderFullName, files) => { + let count = 0, + fn = () => 0 == --count + && FolderUserStore.currentFolderFullName() == sFolderFullName + && MessagelistUserStore.reload(true, true); + for (const file of files) { + if ('message/rfc822' === file.type) { + ++count; + let data = new FormData; + data.append('Folder', sFolderFullName); + data.append('AppendFile', file); + data.XToken = Settings.app('token'); + fetch(serverRequest('Append'), { + method: 'POST', + mode: 'same-origin', + cache: 'no-cache', + redirect: 'error', + referrerPolicy: 'no-referrer', + credentials: 'same-origin', + body: data + }) + .then(fn) + .catch(fn); + } + } }; diff --git a/dev/External/User/ko.js b/dev/External/User/ko.js index d16d30f3a..6bbaa5965 100644 --- a/dev/External/User/ko.js +++ b/dev/External/User/ko.js @@ -6,14 +6,11 @@ import { doc, elementById, addEventsListeners, dropdowns } from 'Common/Globals' import { dropdownsDetectVisibility } from 'Common/UtilsUser'; import { EmailAddressesComponent } from 'Component/EmailAddresses'; import { ThemeStore } from 'Stores/Theme'; -import { moveMessagesToFolder } from 'Common/Folders'; +import { moveMessagesToFolder, dropFilesInFolder } from 'Common/Folders'; import { setExpandedFolder } from 'Model/FolderCollection'; import { FolderUserStore } from 'Stores/User/Folder'; import { MessagelistUserStore } from 'Stores/User/Messagelist'; -import { Settings } from 'Common/Globals'; -import { serverRequest } from 'Common/Links'; - const rlContentType = 'snappymail/action', // In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event @@ -66,32 +63,7 @@ const rlContentType = 'snappymail/action', if (dragMessages() && 'copyMove' == e.dataTransfer.effectAllowed) { moveMessagesToFolder(FolderUserStore.currentFolderFullName(), dragData.data, folder.fullName, e.ctrlKey); } else if (e.dataTransfer.types.includes('Files')) { - let files = 0, - fn = () => { - 0 == --files - && FolderUserStore.currentFolderFullName() == folder.fullName - && MessagelistUserStore.reload(true, true); - }; - for (const file of e.dataTransfer.files) { - if ('message/rfc822' === file.type) { - ++files; - let data = new FormData; - data.append('Folder', folder.fullName); - data.append('AppendFile', file); - data.XToken = Settings.app('token'); - fetch(serverRequest('Append'), { - method: 'POST', - mode: 'same-origin', - cache: 'no-cache', - redirect: 'error', - referrerPolicy: 'no-referrer', - credentials: 'same-origin', - body: data - }) - .then(fn) - .catch(fn); - } - } + dropFilesInFolder(folder.fullName, e.dataTransfer.files); } }, diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index cb34311c1..068de0e9d 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -14,11 +14,13 @@ import { computedPaginatorHelper, showMessageComposer, populateMessageBody } fro import { FileInfo } from 'Common/File'; import { isFullscreen, toggleFullscreen } from 'Common/Fullscreen'; -import { mailBox, serverRequest } from 'Common/Links'; +import { mailBox } from 'Common/Links'; import { Selector } from 'Common/Selector'; import { i18n } from 'Common/Translator'; +import { dropFilesInFolder } from 'Common/Folders'; + import { getFolderFromCacheList, MessageFlagsCache @@ -507,33 +509,53 @@ export class MailMessageList extends AbstractViewRight { // initUploaderForAppend if (Settings.app('allowAppendMessage')) { - const oJua = new Jua({ - action: serverRequest('Append'), - name: 'AppendFile', - limit: 1, - hidden: { - Folder: () => FolderUserStore.currentFolderFullName() - }, - dragAndDropElement: dom.querySelector('.listDragOver'), - dragAndDropBodyElement: b_content - }); - - this.dragOver.subscribe(value => value && this.selector.scrollToTop()); - - oJua - .on('onDragEnter', () => this.dragOverEnter(true)) - .on('onDragLeave', () => this.dragOverEnter(false)) - .on('onBodyDragEnter', () => this.dragOver(true)) - .on('onBodyDragLeave', () => this.dragOver(false)) - .on('onSelect', (sUid, oData) => { - if (sUid && oData && 'message/rfc822' === oData.Type) { - MessagelistUserStore.loading(true); - return true; + const dropZone = dom.querySelector('.listDragOver'), + validFiles = oEvent => { + for (const item of oEvent.dataTransfer.items) { + if ('file' === item.kind && 'message/rfc822' === item.type) { + return true; + } } - - return false; - }) - .on('onComplete', () => MessagelistUserStore.reload(true, true)); + }; + addEventsListeners(dropZone, { + dragover: oEvent => { + if (validFiles(oEvent)) { + oEvent.dataTransfer.dropEffect = 'copy'; + oEvent.preventDefault(); + } + }, + }); + addEventsListeners(b_content, { + dragenter: oEvent => { + if (validFiles(oEvent)) { + if (b_content.contains(oEvent.target)) { + this.dragOver(true); + } + if (oEvent.target == dropZone) { + oEvent.dataTransfer.dropEffect = 'copy'; + this.dragOverEnter(true); + } + } + }, + dragleave: oEvent => { + if (oEvent.target == dropZone) { + this.dragOverEnter(false); + } + let related = oEvent.relatedTarget; + if (!related || !b_content.contains(related)) { + this.dragOver(false); + } + }, + drop: oEvent => { + oEvent.preventDefault(); + if (oEvent.target == dropZone && validFiles(oEvent)) { + MessagelistUserStore.loading(true); + dropFilesInFolder(FolderUserStore.currentFolderFullName(), oEvent.dataTransfer.files); + } + this.dragOverEnter(false); + this.dragOver(false); + } + }); } // initShortcuts