add basic dnd support

2 files changed, 59 insertions, 32 deletions

diff --git a/reader.html b/reader.html
index 88aa349..0020265 100755
--- a/reader.html
+++ b/reader.html
@@ -74,7 +74,7 @@
 </div>
 
 <div class="container">
-	<div id="splash" class="splash text-muted" data-bind="visible: !fileName()"></div>
+	<div id="splash" class="splash text-muted" data-bind="visible: !fileName(), html: errorMessage"></div>
 	<div id="loading" class="splash text-muted" data-bind="visible: isLoading()"><img src="img/spinning-circles.svg"></div>
 
 	<div id="left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></div>
diff --git a/reader.js b/reader.js
index 81d2794..8907554 100755
--- a/reader.js
+++ b/reader.js
@@ -7,6 +7,7 @@ function Model() {
 	self._zip = null;
 	self._zipEntries = ko.observableArray();
 	self.syncAccount = ko.observable("");
+	self.errorMessage = ko.observable("");
 
 	self._themeName = ko.observable("");
 
@@ -93,6 +94,7 @@ function Model() {
 		self._zip = null;
 		self.fileName("");
 		self.currentPage(-2);
+		self.isLoading(false);
 		localforage.setItem("TTC:LAST-OPENED-FILE", null);
 	};
 
@@ -110,54 +112,65 @@ function Model() {
 	};
 
 	self.openFile = function (file) {
-		self.isLoading(true);
-		console.log('openFile', file);
+		self.closeFile();
 
-		self._zipEntries.removeAll();
-		self.currentPage(-2);
+		console.log('openFile', file, typeof file);
+
+		if (typeof file != "string") {
+			self.errorMessage("Can't open file: incorrect type.");
+			return;
+		}
+
+		self.isLoading(true);
 
 		window.setTimeout(() => {
 
-			const AdmZip = require('adm-zip');
-			self._zip = new AdmZip(file);
+			try {
+				const AdmZip = require('adm-zip');
+				self._zip = new AdmZip(file);
 
-			const zipEntries = self._zip.getEntries();
+				const zipEntries = self._zip.getEntries();
 
-			for (let i = 0; i < zipEntries.length; i++) {
-				const ze = zipEntries[i];
+				for (let i = 0; i < zipEntries.length; i++) {
+					const ze = zipEntries[i];
 
-				if (ze.entryName.match(/\.(jpe?g|gif|bmp|png|webp)$/i)) {
-					// prevent observer events (?) - open faster
-					self._zipEntries().push(ze);
+					if (ze.entryName.match(/\.(jpe?g|gif|bmp|png|webp)$/i)) {
+						// prevent observer events (?) - open faster
+						self._zipEntries().push(ze);
+					}
 				}
-			}
 
-			self._zipEntries.sort(function(a, b) {
-				return a.entryName.localeCompare(b.entryName);
-			});
+				self._zipEntries.sort(function(a, b) {
+					return a.entryName.localeCompare(b.entryName);
+				});
 
-			localforage.setItem("TTC:LAST-OPENED-FILE", file).then(() => {
-				self.mruList(file);
-				self.fileName(file.split(/[\\/]/).pop());
+				localforage.setItem("TTC:LAST-OPENED-FILE", file).then(() => {
+					self.mruList(file);
+					self.fileName(file.split(/[\\/]/).pop());
 
-				localforage.getItem(model.cacheKey("SINGLE-COLUMN")).then((single) => {
-					model.singleColumn(single);
+					localforage.getItem(model.cacheKey("SINGLE-COLUMN")).then((single) => {
+						model.singleColumn(single);
 
-					localforage.getItem(model.cacheKey("FLIP-COLUMNS")).then((flip) => {
-						model.flipColumns(flip);
-					});
+						localforage.getItem(model.cacheKey("FLIP-COLUMNS")).then((flip) => {
+							model.flipColumns(flip);
+						});
 
-					localforage.getItem(self.cacheKey("POSITION")).then((page) => {
-						if (page)
-							self.currentPage(page);
-						else
-							self.currentPage(0);
+						localforage.getItem(self.cacheKey("POSITION")).then((page) => {
+							if (page)
+								self.currentPage(page);
+							else
+								self.currentPage(0);
 
-						self.isLoading(false);
+							self.isLoading(false);
+						});
 					});
 				});
-			});
+			} catch (e) {
+				console.warn(e);
+				self.errorMessage(e.toString());
 
+				self.isLoading(false);
+			}
 		}, 100);
 	};
 
@@ -506,6 +519,20 @@ $(document).ready(function () {
 		}
 	}
 
+	$(window).on("dragover dragleave dragend", (e) => {
+		return false;
+	});
+
+	$(window).on("drop", (e) => {
+		e.preventDefault();
+
+		const file = e.originalEvent.dataTransfer.files[0];
+
+		if (file != null)
+			model.openFile(file.path);
+
+	});
+
 	$("#reader img").on("load", function(e) {
 		const left = $("#reader .left-page");
 		const right = $("#reader .right-page");