Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 12:09:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace messages jQuery drag/drop with native HTML5

Browse source
This commit is contained in:
djmaze 2020-09-18 14:01:27 +02:00
parent d88c183112
commit c282e2c9b5
10 changed files with 91 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dev/View/User/MailBox/FolderList.js
View file

@ -1,7 +1,7 @@
import ko from 'ko';
import { Capa, Focused, Layout, KeyState } from 'Common/Enums';
import { $htmlCL, leftPanelDisabled, moveAction } from 'Common/Globals';
import { leftPanelDisabled, moveAction } from 'Common/Globals';
import { mailBox, settings } from 'Common/Links';
import { setFolderHash } from 'Common/Cache';
@ -218,18 +218,12 @@ class FolderListMailBoxUserView extends AbstractViewNext {
/**
* @param {FolderModel} toFolder
* @param {{helper:jQuery}} ui
* @param {Array} data
* @returns {void}
*/
messagesDrop(toFolder, ui) {
if (toFolder && ui && ui.helper) {
const fromFolderFullNameRaw = ui.helper.rlFolder,
copy = $htmlCL.contains('rl-ctrl-key-pressed'),
uids = ui.helper.rlUids;
if (fromFolderFullNameRaw && Array.isArray(uids)) {
rl.app.moveMessagesToFolder(fromFolderFullNameRaw, uids, toFolder.fullNameRaw, copy);
}
messagesDrop(toFolder, data) {
if (toFolder && data && data.folder && Array.isArray(data.uids)) {
rl.app.moveMessagesToFolder(data.folder, data.uids, toFolder.fullNameRaw, data.copy);
}
}

56
dev/View/User/MailBox/MessageList.js
View file

@ -45,6 +45,8 @@ const
canBeMovedHelper = (self) => self.canBeMoved(),
ifvisible = window.ifvisible;
let dragImage;
@view({
name: 'View/User/MailBox/MessageList',
type: ViewType.Right,
@ -479,30 +481,38 @@ class MessageListMailBoxUserView extends AbstractViewNext {
return false;
}
dragAndDronHelper(oMessageListItem) {
if (oMessageListItem) {
oMessageListItem.checked(true);
dragStart(event) {
const item = ko.dataFor(document.elementFromPoint(event.clientX, event.clientY));
item && item.checked(true);
dragImage || (dragImage = document.getElementById('messagesDragImage'));
const uids = MessageStore.messageListCheckedOrSelectedUidsWithSubMails();
if (dragImage && uids.length) {
dragImage.querySelector('.text').textContent = uids.length;
let img = dragImage.querySelector('.icon-white');
img.classList.toggle('icon-copy', event.ctrlKey);
img.classList.toggle('icon-mail', !event.ctrlKey);
// Else Chrome doesn't show it
dragImage.style.left = event.clientX + 'px';
dragImage.style.top = event.clientY + 'px';
dragImage.style.right = 'auto';
let action = event.ctrlKey ? 'copy' : 'move';
event.dataTransfer.setData('text/x-rainloop-json', JSON.stringify({
copy: event.ctrlKey,
folder: FolderStore.currentFolderFullNameRaw(),
uids: uids
}));
event.dataTransfer.setDragImage(dragImage, 0, 0);
event.dataTransfer.effectAllowed = action;
// Remove the Chrome visibility
dragImage.style.cssText = '';
} else {
event.preventDefault();
}
const el = Element.fromHTML('<div class="draggablePlace">' +
'<span class="text"></span>&nbsp;' +
'<i class="icon-copy icon-white visible-on-ctrl"></i>' +
'<i class="icon-mail icon-white hidden-on-ctrl"></i>' +
'</div>'),
updateUidsInfo = () => {
const uids = MessageStore.messageListCheckedOrSelectedUidsWithSubMails();
el.rlUids = uids;
el.querySelector('.text').textContent = uids.length;
};
document.getElementById('rl-hidden').append(el);
el.rlFolder = FolderStore.currentFolderFullNameRaw();
updateUidsInfo();
setTimeout(updateUidsInfo,1);
return el;
}
/**