improved html5 d&d

dev/External/User/ko.js

@@ -1,7 +1,8 @@
 const ko = window.ko,
 	$ = jQuery,
-	validTransfer = data => ('move' === data.dropEffect || 'copy' === data.dropEffect) // effectAllowed
+	rlContentType = 'application/x-rainloop-action',
-		&& data.getData('text/x-rainloop-json');
+	validTransfer = data => ['move','copy'].includes(data.dropEffect) // effectAllowed
+		&& data.getData('application/x-rainloop-messages');
 
 ko.bindingHandlers.editor = {
 	init: (element, fValueAccessor) => {
@@ -44,14 +45,11 @@ ko.bindingHandlers.emailsTags = {
 			inputDelimiters = [',', ';', '\n'];
 
 		$el.inputosaurus({
-			parseOnBlur: true,
-			allowDragAndDrop: true,
 			focusCallback: value => {
 				if (fValue && fValue.focused) {
 					fValue.focused(!!value);
 				}
 			},
-			inputDelimiters: inputDelimiters,
 			autoCompleteSource: fAllBindings.autoCompleteSource || null,
 			splitHook: value => {
 				const v = value.trim();
@@ -91,7 +89,7 @@ ko.bindingHandlers.emailsTags = {
 };
 
 // Start dragging selected messages
-ko.bindingHandlers.draggable = {
+ko.bindingHandlers.dragmessages = {
 	init: (element, fValueAccessor) => {
 		if (!rl.settings.app('mobile')) {
 			element.addEventListener("dragstart", e => fValueAccessor()(e));
@@ -100,16 +98,27 @@ ko.bindingHandlers.draggable = {
 };
 
 // Drop selected messages on folder
-ko.bindingHandlers.droppable = {
+const dragTimer = {
+	id: 0,
+	stop: () => clearTimeout(this.id),
+	start: fn => this.id = setTimeout(fn, 500)
+};
+ko.bindingHandlers.dropmessages = {
 	init: (element, fValueAccessor) => {
 		if (!rl.settings.app('mobile')) {
-			const FolderList = fValueAccessor(),
+			const folder = fValueAccessor(),
-				folder = ko.dataFor(element),
+//				folder = ko.dataFor(element),
 				fnHover = e => {
 					if (validTransfer(e.dataTransfer)) {
+						dragTimer.stop();
 						e.preventDefault();
 						element.classList.add('droppableHover');
-						FolderList.messagesDropOver(folder);
+						if (folder && folder.collapsed()) {
+							dragTimer.start(() => {
+								folder.collapsed(false);
+								rl.app.setExpandedFolder(folder.fullNameHash, true);
+							}, 500);
+						}
 					}
 				};
 			element.addEventListener("dragenter", fnHover);
@@ -117,14 +126,16 @@ ko.bindingHandlers.droppable = {
 			element.addEventListener("dragleave", e => {
 				e.preventDefault();
 				element.classList.remove('droppableHover');
-				FolderList.messagesDropOut();
+				dragTimer.stop();
 			});
 			element.addEventListener("drop", e => {
 				const data = JSON.parse(validTransfer(e.dataTransfer));
 				if (data) {
 					data.copy = data.copy && event.ctrlKey;
 					e.preventDefault();
-					FolderList.messagesDrop(folder, data);
+					if (folder && data && data.folder && Array.isArray(data.uids)) {
+						rl.app.moveMessagesToFolder(data.folder, data.uids, folder.fullNameRaw, data.copy);
+					}
 				}
 			});
 		}
@@ -132,13 +143,13 @@ ko.bindingHandlers.droppable = {
 };
 
 let sortableElement = null,
-isOrderData = data => 'move' === data.dropEffect && 'orderable' === data.getData('text/x-rainloop-action');
+isSortableData = data => 'move' === data.dropEffect && 'sortable' === data.getData(rlContentType);
 ko.bindingHandlers.sortableItem = {
-	init: (element, fValueAccessor/*, allBindingsAccessor, data, context*/) => {
+	init: (element, fValueAccessor) => {
-		const options = ko.utils.unwrapObservable(fValueAccessor()) || {},
+		let options = ko.utils.unwrapObservable(fValueAccessor()) || {},
 			parent = element.parentNode,
 			fnHover = e => {
-				if (isOrderData(e.dataTransfer)) {
+				if (isSortableData(e.dataTransfer)) {
 					e.preventDefault();
 					let node = (e.target.closest ? e.target : e.target.parentNode).closest('[draggable]');
 					if (node && node !== sortableElement && parent.contains(node)) {
@@ -155,29 +166,27 @@ ko.bindingHandlers.sortableItem = {
 			};
 		element.addEventListener("dragstart", e => {
 			sortableElement = element;
-			e.dataTransfer.setData('text/x-rainloop-action', 'orderable');
+			e.dataTransfer.setData(rlContentType, 'sortable');
 			e.dataTransfer.setDragImage(element, 0, 0);
 			e.dataTransfer.effectAllowed = 'move';
 			element.style.opacity = 0.25;
 		});
 		element.addEventListener("dragend", e => {
 			element.style.opacity = null;
-			if ('move' != e.dataTransfer.dropEffect) {
+			if (isSortableData(e.dataTransfer)) {
-				const index = options.list.indexOf(ko.dataFor(element)),
+				let row = parent.rows[options.list.indexOf(ko.dataFor(element))];
-					row = parent.rows[index];
 				if (row != sortableElement) {
 					row.before(sortableElement);
 				}
 			}
 		});
-		if (!parent.orderable) {
+		if (!parent.sortable) {
-			parent.orderable = true;
+			parent.sortable = true;
 			parent.addEventListener("dragenter", fnHover);
 			parent.addEventListener("dragover", fnHover);
-//			parent.addEventListener("dragleave", e => e.preventDefault());
 			parent.addEventListener("drop", e => {
-				if (isOrderData(e.dataTransfer)) {
+				if (isSortableData(e.dataTransfer)) {
-					e.dataTransfer.dropEffect = 'move';
+					e.dataTransfer.clearData();
 					let data = ko.dataFor(sortableElement),
 						from = options.list.indexOf(data),
 						to = [...parent.children].indexOf(sortableElement);

dev/View/User/MailBox/FolderList.js

@@ -39,8 +39,6 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 
 		this.leftPanelDisabled = leftPanelDisabled;
 
-		this.iDropOverTimer = 0;
-
 		this.allowComposer = !!Settings.capa(Capa.Composer);
 		this.allowContacts = !!AppStore.contactsIsAllowed();
 		this.allowFolders = !!Settings.capa(Capa.Folders);
@@ -185,20 +183,6 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 		});
 	}
 
-	messagesDropOver(folder) {
-		clearTimeout(this.iDropOverTimer);
-		if (folder && folder.collapsed()) {
-			this.iDropOverTimer = setTimeout(() => {
-				folder.collapsed(false);
-				rl.app.setExpandedFolder(folder.fullNameHash, true);
-			}, 500);
-		}
-	}
-
-	messagesDropOut() {
-		clearTimeout(this.iDropOverTimer);
-	}
-
 	scrollToFocused() {
 		const scrollable = this.oContentScrollable;
 		if (scrollable) {
@@ -216,17 +200,6 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 		}
 	}
 
-	/**
-	 * @param {FolderModel} toFolder
-	 * @param {Array} data
-	 * @returns {void}
-	 */
-	messagesDrop(toFolder, data) {
-		if (toFolder && data && data.folder && Array.isArray(data.uids)) {
-			rl.app.moveMessagesToFolder(data.folder, data.uids, toFolder.fullNameRaw, data.copy);
-		}
-	}
-
 	composeClick() {
 		if (Settings.capa(Capa.Composer)) {
 			showScreenPopup(require('View/Popup/Compose'));

dev/View/User/MailBox/MessageList.js

@@ -499,7 +499,7 @@ class MessageListMailBoxUserView extends AbstractViewNext {
 			dragImage.style.right = 'auto';
 
 			let action = event.ctrlKey ? 'copy' : 'move';
-			event.dataTransfer.setData('text/x-rainloop-json', JSON.stringify({
+			event.dataTransfer.setData('application/x-rainloop-messages', JSON.stringify({
 				copy: event.ctrlKey,
 				folder: FolderStore.currentFolderFullNameRaw(),
 				uids: uids

rainloop/v/0.0.0/app/templates/Views/User/MailFolderListItem.html

@@ -1,5 +1,5 @@
 <div class="e-item" data-bind="visible: visible, css: { 'i-am-inbox-wrapper': isInbox }">
-	<a class="e-link" data-bind="droppable: $root,
+	<a class="e-link" data-bind="dropmessages: $data,
 	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': selectableForFolderList, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubScribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		<i data-bind="css: collapsedCss()"></i>

rainloop/v/0.0.0/app/templates/Views/User/MailFolderListSystemItem.html

@@ -1,5 +1,5 @@
 <div class="e-item b-folder-system-item">
-	<a class="e-link" data-bind="droppable: $root, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
+	<a class="e-link" data-bind="dropmessages: $data, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		&nbsp;
 		<span class="focused-poiner"></span>

rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -198,7 +198,7 @@
 						<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()">
 							<span class="i18n" data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></span>
 						</div>
-						<div draggable="true" data-bind="draggable: dragStart">
+						<div draggable="true" data-bind="dragmessages: dragStart">
 							<div class="messageListPlace" data-bind="template: { name: messageListItemTemplate(), foreach: messageList }"></div>
 						</div>
 						<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail icon-white"></i></div>