cleanup dragmessages code

This commit is contained in:
the-djmaze 2022-09-28 14:55:10 +02:00
parent afe4da1f65
commit c2ef5abd79
3 changed files with 17 additions and 24 deletions

View file

@ -2,12 +2,14 @@ import 'External/ko';
import ko from 'ko'; import ko from 'ko';
import { HtmlEditor } from 'Common/Html'; import { HtmlEditor } from 'Common/Html';
import { timeToNode } from 'Common/Translator'; import { timeToNode } from 'Common/Translator';
import { elementById, addEventsListeners, dropdowns } from 'Common/Globals'; import { doc, elementById, addEventsListeners, dropdowns } from 'Common/Globals';
import { dropdownsDetectVisibility } from 'Common/UtilsUser'; import { dropdownsDetectVisibility } from 'Common/UtilsUser';
import { EmailAddressesComponent } from 'Component/EmailAddresses'; import { EmailAddressesComponent } from 'Component/EmailAddresses';
import { ThemeStore } from 'Stores/Theme'; import { ThemeStore } from 'Stores/Theme';
import { moveMessagesToFolder } from 'Common/Folders'; import { moveMessagesToFolder } from 'Common/Folders';
import { setExpandedFolder } from 'Model/FolderCollection'; import { setExpandedFolder } from 'Model/FolderCollection';
import { FolderUserStore } from 'Stores/User/Folder';
import { MessagelistUserStore } from 'Stores/User/Messagelist';
const rlContentType = 'snappymail/action', const rlContentType = 'snappymail/action',
@ -89,21 +91,23 @@ Object.assign(ko.bindingHandlers, {
} }
}, },
// Start dragging selected messages // Start dragging checked messages
dragmessages: { dragmessages: {
init: (element, fValueAccessor) => { init: element => {
element.addEventListener("dragstart", e => { element.addEventListener("dragstart", e => {
let data = fValueAccessor()(e);
dragImage || (dragImage = elementById('messagesDragImage')); dragImage || (dragImage = elementById('messagesDragImage'));
if (data && dragImage && !ThemeStore.isMobile()) { if (dragImage && !ThemeStore.isMobile()) {
dragImage.querySelector('.text').textContent = data.size; ko.dataFor(doc.elementFromPoint(e.clientX, e.clientY))?.checked?.(true);
// Else Chrome doesn't show it const uids = MessagelistUserStore.listCheckedOrSelectedUidsWithSubMails();
dragImage.querySelector('.text').textContent = uids.size;
// Make sure Chrome shows it
dragImage.style.left = e.clientX + 'px'; dragImage.style.left = e.clientX + 'px';
dragImage.style.top = e.clientY + 'px'; dragImage.style.top = e.clientY + 'px';
dragImage.style.right = 'auto'; dragImage.style.right = 'auto';
setDragAction(e, 'messages', 'copyMove', data, dragImage); setDragAction(e, 'messages', 'copyMove', uids, dragImage);
// Remove the Chrome visibility // Remove the Chrome visibility
dragImage.style.cssText = ''; dragImage.style.cssText = '';
@ -131,7 +135,7 @@ Object.assign(ko.bindingHandlers, {
fnStop(e); fnStop(e);
e.dataTransfer.dropEffect = e.ctrlKey ? 'copy' : 'move'; e.dataTransfer.dropEffect = e.ctrlKey ? 'copy' : 'move';
element.classList.add('droppableHover'); element.classList.add('droppableHover');
if (folder?.collapsed()) { if (folder.collapsed()) {
dragTimer.start(() => { dragTimer.start(() => {
folder.collapsed(false); folder.collapsed(false);
setExpandedFolder(folder.fullName, true); setExpandedFolder(folder.fullName, true);
@ -139,17 +143,14 @@ Object.assign(ko.bindingHandlers, {
} }
} }
}; };
addEventsListeners(element, { folder && addEventsListeners(element, {
dragenter: fnHover, dragenter: fnHover,
dragover: fnHover, dragover: fnHover,
dragleave: fnStop, dragleave: fnStop,
drop: e => { drop: e => {
fnStop(e); fnStop(e);
if (dragMessages() && 'copyMove' == e.dataTransfer.effectAllowed) { if (dragMessages() && 'copyMove' == e.dataTransfer.effectAllowed) {
let data = dragData.data; moveMessagesToFolder(FolderUserStore.currentFolderFullName(), dragData.data, folder.fullName, e.ctrlKey);
if (folder && data?.folder && data.size) {
moveMessagesToFolder(data.folder, data, folder.fullName, e.ctrlKey);
}
} }
} }
}); });

View file

@ -4,7 +4,7 @@ import { Scope } from 'Common/Enums';
import { ComposeType, FolderType, MessageSetAction } from 'Common/EnumsUser'; import { ComposeType, FolderType, MessageSetAction } from 'Common/EnumsUser';
import { doc, leftPanelDisabled, moveAction, import { leftPanelDisabled, moveAction,
Settings, SettingsCapa, SettingsGet, Settings, SettingsCapa, SettingsGet,
addEventsListeners, addEventsListeners,
addShortcut, registerShortcut, formFieldFocused addShortcut, registerShortcut, formFieldFocused
@ -380,14 +380,6 @@ export class MailMessageList extends AbstractViewRight {
return false; return false;
} }
getDragData(event) {
const item = ko.dataFor(doc.elementFromPoint(event.clientX, event.clientY));
item?.checked?.(true);
const uids = MessagelistUserStore.listCheckedOrSelectedUidsWithSubMails();
uids.folder = FolderUserStore.currentFolderFullName();
return uids;
}
listSetSeen() { listSetSeen() {
listAction( listAction(
FolderUserStore.currentFolderFullName(), FolderUserStore.currentFolderFullName(),

View file

@ -122,7 +122,7 @@
<i class="icon-spinner"></i> <i class="icon-spinner"></i>
<span data-i18n="GLOBAL/LOADING"></span> <span data-i18n="GLOBAL/LOADING"></span>
</div> </div>
<div class="messageListPlace" data-bind="dragmessages: getDragData, foreach: messageList" draggable="true"> <div class="messageListPlace" data-bind="dragmessages: 1, foreach: messageList" draggable="true">
<div class="messageListItem" data-bind="css: lineAsCss()"> <div class="messageListItem" data-bind="css: lineAsCss()">
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div> <div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>