Merge pull request #81 from 0neGal/drag-drop

feat: drag and drop to install mods

9 files changed, 132 insertions, 31 deletions

diff --git a/src/app/icons/download.png b/src/app/icons/download.png
new file mode 100644
index 0000000..189c50d
--- /dev/null
+++ b/src/app/icons/download.png
diff --git a/src/app/index.html b/src/app/index.html
index 8222416..b5fc8cb 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -14,6 +14,12 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
+		<div id="dragUI">
+			<div id="dragitems">
+				<div id="icon"></div>
+				<div id="text">%%gui.mods.dragdrop%%</div>
+			</div>
+		</div>
 
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
diff --git a/src/app/main.css b/src/app/main.css
index a532490..dcc4e8a 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -38,11 +38,15 @@
 body {
 	margin: 0;
 	overflow: hidden;
-	user-select: none;
 }
 
 body, button, input {font-family: "Roboto", sans-serif}
 
+body, button, img, a {
+	-webkit-user-drag: none;
+	user-select: none;
+}
+
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -612,6 +616,58 @@ code {
 	font-weight: 600;
 }
 
+#dragUI {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	color: white;
+	opacity: 0.0;
+	position: fixed;
+	z-index: 1000000;
+	pointer-events: none;
+	background: var(--bg);
+	backdrop-filter: blur(15px);
+	transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown {
+	opacity: 1.0;
+	pointer-events: all;
+}
+
+#dragUI #dragitems {
+	--size: 25vw;
+	top: 50%;
+	left: 50%;
+	opacity: 0.6;
+	position: absolute;
+	text-align: center;
+	width: var(--size);
+	height: var(--size);
+	margin-top: calc(var(--size) / 2 * -1);
+	margin-left: calc(var(--size) / 2 * -1);
+}
+
+#dragUI #dragitems #icon {
+	width: 100%;
+	height: 100%;
+	filter: invert(1);
+	transform: scale(0.45);
+	background-size: cover;
+	background-image: url("icons/download.png");
+	transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown #dragitems #icon {
+	transform: scale(0.5);
+}
+
+#dragUI #dragitems #text {
+	top: -5vw;
+	position: relative;
+}
+
 /* drag control */
 
 #bgHolder,
diff --git a/src/app/main.js b/src/app/main.js
index 7c71c9d..97937a9 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -158,12 +158,18 @@ function selected(all) {
 	}
 }
 
-// Tells the main process to install a mod
+// Tells the main process to install a mod through the file selector
 function installmod() {
 	setButtons(false);
 	ipcRenderer.send("installmod")
 }
 
+// Tells the main process to directly install a mod from this path
+function installFromPath(path) {
+	setButtons(false);
+	ipcRenderer.send("installfrompath", path)
+}
+
 // Tells the main process to install a mod from a URL
 function installFromURL(url) {
 	setButtons(false);
@@ -244,6 +250,31 @@ ipcRenderer.on("wrongpath", () => {
 
 setlang();
 
+let dragtimer;
+document.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+	dragUI.classList.add("shown");
+
+	clearTimeout(dragtimer);
+	dragtimer = setTimeout(() => {
+		dragUI.classList.remove("shown");
+	}, 5000)
+});
+
+document.addEventListener("mouseover", (e) => {
+	clearTimeout(dragtimer);
+	dragUI.classList.remove("shown");
+});
+
+document.addEventListener("drop", (e) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+	dragUI.classList.remove("shown");
+	installFromPath(event.dataTransfer.files[0].path)
+});
+
 document.body.addEventListener("click", event => {
 	if (event.target.tagName.toLowerCase() === "a" && event.target.protocol != "file:") {
 		event.preventDefault();
diff --git a/src/index.js b/src/index.js
index 344ac6c..95115b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,6 +43,7 @@ function start() {
 
 	ipcMain.on("exit", () => {process.exit(0)})
 	ipcMain.on("minimize", () => {win.minimize()})
+	ipcMain.on("installfrompath", (event, path) => {utils.mods.install(path)})
 	ipcMain.on("installfromurl", (event, url) => {utils.mods.installFromURL(url)})
 	ipcMain.on("winLog", (event, ...args) => {win.webContents.send("log", ...args)});
 	ipcMain.on("winAlert", (event, ...args) => {win.webContents.send("alert", ...args)});
diff --git a/src/lang/en.json b/src/lang/en.json
index 27630ec..45bf7c0 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -62,6 +62,7 @@
 	"gui.mods.extracting": "Extracting mod...",
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
+	"gui.mods.dragdrop": "Drag and drop a mod to install",
 
 	"gui.browser.info": "Info",
 	"gui.browser.madeby": "by",
diff --git a/src/lang/es.json b/src/lang/es.json
index 8beabef..3d92d5a 100644
--- a/src/lang/es.json
+++ b/src/lang/es.json
@@ -62,6 +62,7 @@
 	"gui.mods.extracting": "Extrayendo modificación...",
 	"gui.mods.installing": "Instalando modificación...",
 	"gui.mods.installedmod": "¡Modificación instalada!",
+	"gui.mods.dragdrop": "Arrastra y suelta una modificación para instalarla"
 
 	"gui.browser.info": "Información",
 	"gui.browser.madeby": "por",
diff --git a/src/lang/fr.json b/src/lang/fr.json
index 3bdeec6..14bae37 100644
--- a/src/lang/fr.json
+++ b/src/lang/fr.json
@@ -62,6 +62,7 @@
 	"gui.mods.extracting": "Extraction du mod...",
 	"gui.mods.installing": "Installation du mod...",
 	"gui.mods.installedmod": "Mod installé !",
+	"gui.mods.dragdrop": "Glissez/déposez un mod pour l'installer",
 
 	"gui.browser.info": "Info",
 	"gui.browser.madeby": "par",
diff --git a/src/utils.js b/src/utils.js
index 1448007..2ea91cd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -544,40 +544,44 @@ const mods = {
 			}
 
 			try {
-				fs.createReadStream(mod).pipe(unzip.Extract({path: cache}))
-				.on("finish", () => {
-					setTimeout(() => {
-						let manifest = path.join(cache, "manifest.json");
-						if (fs.existsSync(manifest)) {
-							files = fs.readdirSync(path.join(cache, "mods"));
-							if (fs.existsSync(path.join(cache, "mods/mod.json"))) {
-								if (mods.install(path.join(cache, "mods"), require(manifest).name, manifest, true)) {
-									return true;
-								}
-							} else {
-								for (let i = 0; i < files.length; i++) {
-									let mod = path.join(cache, "mods", files[i]);
-									if (fs.statSync(mod).isDirectory()) {
-										setTimeout(() => {
-											if (mods.install(mod, false, manifest)) {return true};
-										}, 1000)
+				if (mod.replace(/.*\./, "").toLowerCase() == "zip") {
+					fs.createReadStream(mod).pipe(unzip.Extract({path: cache}))
+					.on("finish", () => {
+						setTimeout(() => {
+							let manifest = path.join(cache, "manifest.json");
+							if (fs.existsSync(manifest)) {
+								files = fs.readdirSync(path.join(cache, "mods"));
+								if (fs.existsSync(path.join(cache, "mods/mod.json"))) {
+									if (mods.install(path.join(cache, "mods"), require(manifest).name, manifest, true)) {
+										return true;
+									}
+								} else {
+									for (let i = 0; i < files.length; i++) {
+										let mod = path.join(cache, "mods", files[i]);
+										if (fs.statSync(mod).isDirectory()) {
+											setTimeout(() => {
+												if (mods.install(mod, false, manifest)) {return true};
+											}, 1000)
+										}
 									}
-								}
 
-								if (files.length == 0) {
-									ipcMain.emit("failedmod");
-									return notamod();
+									if (files.length == 0) {
+										ipcMain.emit("failedmod");
+										return notamod();
+									}
 								}
-							}
 
-							return notamod();
-						}
+								return notamod();
+							}
 
-						if (mods.install(cache)) {
-							installed();
-						} else {return notamod()}
-					}, 1000)
-				});
+							if (mods.install(cache)) {
+								installed();
+							} else {return notamod()}
+						}, 1000)
+					});
+				} else {
+					return notamod();
+				}
 			}catch(err) {return notamod()}
 		}
 	},