From 78a83334f42294fdc0e36c2c44e1fbff7369fd7c Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Fri, 18 Feb 2022 22:13:08 +0100
Subject: basic drag and drop support

Since apparently dragleave and dragenter don't quite work as intended we
have to resort to this obscure method which should work just fine on the
user's end.
---
 src/app/icons/download.png | Bin 0 -> 2200 bytes
 src/app/index.html         |   6 +++++
 src/app/main.css           |  58 ++++++++++++++++++++++++++++++++++++++++++++-
 src/app/main.js            |  33 +++++++++++++++++++++++++-
 src/index.js               |   2 ++
 src/lang/en.json           |   1 +
 6 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/app/icons/download.png

(limited to 'src')

diff --git a/src/app/icons/download.png b/src/app/icons/download.png
new file mode 100644
index 0000000..189c50d
Binary files /dev/null and b/src/app/icons/download.png differ
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..e44b549 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)});
@@ -173,6 +174,7 @@ if (cli.hasArgs()) {
 		cli.init();
 	}
 } else {
+	app.disableHardwareAcceleration();
 	app.on("ready", () => {
 		app.setPath("userData", path.join(app.getPath("cache"), app.name));
 		start();
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",
-- 
cgit v1.2.3