From 3ce1172c363842d396b2550cd2fec712739a43de Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Wed, 22 Nov 2017 19:20:19 +0000
Subject: [PATCH] Allow changing notebook by drag and dropping notes

---
 ElectronClient/app/gui/NoteList.jsx           | 14 +++++++++-
 ElectronClient/app/gui/SideBar.jsx            | 28 ++++++++++++++++++-
 ElectronClient/app/gui/note-viewer/index.html |  4 +--
 ElectronClient/app/main-html.js               |  5 ++--
 4 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/ElectronClient/app/gui/NoteList.jsx b/ElectronClient/app/gui/NoteList.jsx
index fc2b8faf88..4ba935af7b 100644
--- a/ElectronClient/app/gui/NoteList.jsx
+++ b/ElectronClient/app/gui/NoteList.jsx
@@ -83,13 +83,14 @@ class NoteListComponent extends React.Component {
 
 	itemRenderer(item, theme, width) {
 		const onTitleClick = async (event, item) => {
-			event.preventDefault();
 			if (event.ctrlKey) {
+				event.preventDefault();
 				this.props.dispatch({
 					type: 'NOTE_SELECT_TOGGLE',
 					id: item.id,
 				});
 			} else if (event.shiftKey) {
+				event.preventDefault();
 				this.props.dispatch({
 					type: 'NOTE_SELECT_EXTEND',
 					id: item.id,
@@ -102,6 +103,15 @@ class NoteListComponent extends React.Component {
 			}
 		}
 
+		const onDragStart = (event) => {
+			const noteIds = this.props.selectedNoteIds;
+			if (!noteIds.length) return;
+			
+			event.dataTransfer.setDragImage(new Image(), 1, 1);
+			event.dataTransfer.clearData();
+			event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
+		}
+
 		const onCheckboxClick = async (event) => {
 			const checked = event.target.checked;
 			const newNote = {
@@ -136,8 +146,10 @@ class NoteListComponent extends React.Component {
 				className="list-item"
 				onContextMenu={(event) => this.itemContextMenu(event)}
 				href="#"
+				draggable={true}
 				style={listItemTitleStyle}
 				onClick={(event) => { onTitleClick(event, item) }}
+				onDragStart={(event) => onDragStart(event) }
 			>
 			{item.title}
 			</a>
diff --git a/ElectronClient/app/gui/SideBar.jsx b/ElectronClient/app/gui/SideBar.jsx
index 4456d6a93f..8e9a019f5a 100644
--- a/ElectronClient/app/gui/SideBar.jsx
+++ b/ElectronClient/app/gui/SideBar.jsx
@@ -4,6 +4,7 @@ const shared = require('lib/components/shared/side-menu-shared.js');
 const { Synchronizer } = require('lib/synchronizer.js');
 const { BaseModel } = require('lib/base-model.js');
 const { Folder } = require('lib/models/folder.js');
+const { Note } = require('lib/models/note.js');
 const { Tag } = require('lib/models/tag.js');
 const { _ } = require('lib/locale.js');
 const { themeStyle } = require('../theme.js');
@@ -164,7 +165,32 @@ class SideBarComponent extends React.Component {
 		let style = Object.assign({}, this.style().listItem);
 		if (selected) style = Object.assign(style, this.style().listItemSelected);
 		if (folder.id === Folder.conflictFolderId()) style = Object.assign(style, this.style().conflictFolder);
-		return <a className="list-item" href="#" data-id={folder.id} data-type={BaseModel.TYPE_FOLDER} onContextMenu={(event) => this.itemContextMenu(event)} key={folder.id} style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}</a>
+
+		const onDragOver = (event, folder) => {
+			if (event.dataTransfer.types.indexOf('text/x-jop-note-ids') >= 0) event.preventDefault();
+		}
+
+		const onDrop = async (event, folder) => {
+			if (event.dataTransfer.types.indexOf('text/x-jop-note-ids') < 0) return;
+			event.preventDefault();
+
+			const noteIds = JSON.parse(event.dataTransfer.getData('text/x-jop-note-ids'));
+			for (let i = 0; i < noteIds.length; i++) {
+				await Note.moveToFolder(noteIds[i], folder.id);
+			}
+		}
+
+		return <a
+			className="list-item"
+			onDragOver={(event) => { onDragOver(event, folder) } }
+			onDrop={(event) => { onDrop(event, folder) } }
+			href="#"
+			data-id={folder.id}
+			data-type={BaseModel.TYPE_FOLDER}
+			onContextMenu={(event) => this.itemContextMenu(event)}
+			key={folder.id}
+			style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}
+		</a>
 	}
 
 	tagItem(tag, selected) {
diff --git a/ElectronClient/app/gui/note-viewer/index.html b/ElectronClient/app/gui/note-viewer/index.html
index b80c9064f7..2f1a5969f0 100644
--- a/ElectronClient/app/gui/note-viewer/index.html
+++ b/ElectronClient/app/gui/note-viewer/index.html
@@ -12,7 +12,7 @@ body {
 </style>
 
 <div id="hlScriptContainer"></div>
-<div id="content"></div>
+<div id="content" ondragstart="return false;" ondrop="return false;"></div>
 
 <script>
 const { ipcRenderer } = require('electron');
@@ -71,8 +71,6 @@ function applyHljs(codeElements) {
 // / Handle dynamically loading HLJS when a code element is present
 // ----------------------------------------------------------------------
 
-
-
 ipcRenderer.on('setHtml', (event, html) => {
 	contentElement.innerHTML = html;
 
diff --git a/ElectronClient/app/main-html.js b/ElectronClient/app/main-html.js
index 23066201b2..c2ecbdd06f 100644
--- a/ElectronClient/app/main-html.js
+++ b/ElectronClient/app/main-html.js
@@ -33,8 +33,9 @@ Setting.setConstant('appType', 'desktop');
 
 // Disable drag and drop of links inside application (which would
 // open it as if the whole app was a browser)
-document.addEventListener('dragover', event => event.preventDefault());
-document.addEventListener('drop', event => event.preventDefault());
+// document.addEventListener('dragover', event => event.preventDefault());
+// document.addEventListener('drop', event => event.preventDefault());
+
 // Disable middle-click (which would open a new browser window, but we don't want this)
 document.addEventListener('auxclick', event => event.preventDefault());