Moved file drag and drop code to separate file

Drag and drop import works in the editor window now

src/editor.html

@@ -122,6 +122,10 @@
   </div>
 </div>
 
+<div id="file-drop" style="display: none; width: 100%; height: 100%; background: rgba(255,255,255,.5); position: absolute; top:0">
+  <div class="position-absolute top-50 start-50 translate-middle" style="pointer-events: none">Drop files here</div>
+</div>
+
 <script>
   if (typeof module === 'object') {
     window.module = module;
@@ -132,6 +136,7 @@
 <script>if (window.module) module = window.module;</script>
 <script>
   require("./../build/js/editor.js");
+  require("./../build/js/file_drop.js");
 </script>
 </body>
 </html>

src/index.ts

@@ -161,7 +161,7 @@ function start() {
   if (args["_"].length > 0) {
     for (let file_path of args["_"]) {
       log.info(file_path);
-      openFile(file_path, true, true);
+      openFile(file_path, true);
     }
   } else {
     createSplashScreen();
@@ -253,7 +253,7 @@ function chooseFile(title, for_save=false) {
   }
 }
 
-function openFile(file_path="", make_new_file=false, make_new_window=false) {
+function openFile(file_path="", make_new_window=false) {
   if (file_path === "") {
     file_path = chooseFile("Open website data");
   }
@@ -262,16 +262,15 @@ function openFile(file_path="", make_new_file=false, make_new_window=false) {
     if (result) {
       let json = getUpdatedJson(result);
       updateRecentFiles(file_path);
-      if (make_new_file) {
+      let window = BrowserWindow.getFocusedWindow();
-        let old_window = BrowserWindow.getFocusedWindow();
+      if (make_new_window) {
         createEditorWindow(file_path, json);
-        if (old_window && !make_new_window) {
-          old_window.close();
-        }
       } else {
-        let window = BrowserWindow.getFocusedWindow();
         window.webContents.send("open", file_path, json);
       }
+      if (window && window.title == "Web Editor - splash") {
+        window.close();
+      }
     }
   }
 }
@@ -431,8 +430,8 @@ ipcMain.on("save", (event, file_name, json_data) => {
   saveFile(file_name, json_data);
 })
 
-ipcMain.on("open", (event, file_path="", new_file=false, new_window=false) => {
+ipcMain.on("open", (event, file_path="", new_window=false) => {
-  openFile(file_path, new_file)
+  openFile(file_path, new_window);
 })
 
 ipcMain.on("quit", (event) => {

src/js/editor.ts

@@ -1147,6 +1147,81 @@ function updateSaveStatus(file_modified, new_file_name=null) {
 	}
 }
 
+function tryOpen(file_name) {
+	if (current_file_modified) {
+		$("#confirm-open-file").one("click", () => {
+			ipcRenderer.send("open", file_name);
+		})
+		let modal_el = $("#open-file")
+		let modal = new bootstrap.Modal(modal_el[0]);
+		modal.show();
+		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
+			$("#confirm-open-file").off();
+		})
+	} else {
+		ipcRenderer.send("open", file_name);
+	}
+}
+
+function tryStartNew(file_name) {
+	if (current_file_modified) {
+		$("#confirm-start-new").one("click", () => {
+			ipcRenderer.send("create-new", file_name);
+		})
+		let modal_el = $("#start-new")
+		let modal = new bootstrap.Modal(modal_el[0]);
+		modal.show();
+		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
+			$("#confirm-start-new").off();
+		})
+	} else {
+		ipcRenderer.send("create-new", file_name);
+	}
+}
+
+function tryQuit() {
+	if (current_file_modified) {
+		$("#confirm-quit").one("click", () => {
+			ipcRenderer.send("quit");
+		})
+		let modal_el = $("#quit")
+		let modal = new bootstrap.Modal(modal_el[0]);
+		modal.show();
+		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
+			$("#confirm-quit").off();
+		})
+	} else {
+		ipcRenderer.send("quit");
+	}
+}
+
+function tryCloseWindow() {
+	if (current_file_modified) {
+		$("#confirm-quit").one("click", () => {
+			ipcRenderer.send("close-window");
+		})
+		let modal_el = $("#quit")
+		let modal = new bootstrap.Modal(modal_el[0]);
+		modal.show();
+		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
+			$("#confirm-quit").off();
+		})
+	} else {
+		ipcRenderer.send("close-window");
+	}
+}
+
+function openDroppedFiles(files) {
+	if (files.length == 1) {
+		tryOpen(files[0].path)
+	} else {
+		for (const f of files) {
+			// console.log(f.path);
+			ipcRenderer.send("open", f.path, true);
+		}
+	}
+}
+
 function getColumnIDs(columns): Array<string> {
 	let ids = [];
 	for (let col of columns) {
@@ -1316,6 +1391,10 @@ $(document).on("keydown", (event: JQuery.KeyDownEvent) => {
 	}
 })
 
+$(document).on("open-dropped-files", (event, files) => {
+	openDroppedFiles(files);
+})
+
 ipcRenderer.on("open", (event, file_name, json) => {
 	openFile(file_name, json);
 })
@@ -1348,65 +1427,17 @@ ipcRenderer.on("file-saved", (event, file_name) => {
 })
 
 ipcRenderer.on("try-open", (event, file_name) => {
-	if (current_file_modified) {
+	tryOpen(file_name);
-		$("#confirm-open-file").one("click", () => {
-			ipcRenderer.send("open", file_name);
-		})
-		let modal_el = $("#open-file")
-		let modal = new bootstrap.Modal(modal_el[0]);
-		modal.show();
-		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
-			$("#confirm-open-file").off();
-		})
-	} else {
-		ipcRenderer.send("open", file_name);
-	}
 })
 
 ipcRenderer.on("try-start-new", (event, file_name) => {
-	if (current_file_modified) {
+	tryStartNew(file_name);
-		$("#confirm-start-new").one("click", () => {
-			ipcRenderer.send("create-new", file_name);
-		})
-		let modal_el = $("#start-new")
-		let modal = new bootstrap.Modal(modal_el[0]);
-		modal.show();
-		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
-			$("#confirm-start-new").off();
-		})
-	} else {
-		ipcRenderer.send("create-new", file_name);
-	}
 })
 
 ipcRenderer.on("try-quit", (event) => {
-	if (current_file_modified) {
+	tryQuit();
-		$("#confirm-quit").one("click", () => {
-			ipcRenderer.send("quit");
-		})
-		let modal_el = $("#quit")
-		let modal = new bootstrap.Modal(modal_el[0]);
-		modal.show();
-		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
-			$("#confirm-quit").off();
-		})
-	} else {
-		ipcRenderer.send("quit");
-	}
 })
 
 ipcRenderer.on("try-close-window", (event) => {
-	if (current_file_modified) {
+	tryCloseWindow();
-		$("#confirm-quit").one("click", () => {
-			ipcRenderer.send("close-window");
-		})
-		let modal_el = $("#quit")
-		let modal = new bootstrap.Modal(modal_el[0]);
-		modal.show();
-		modal_el[0].addEventListener("hidden.bs.modal", (event) => {
-			$("#confirm-quit").off();
-		})
-	} else {
-		ipcRenderer.send("close-window");
-	}
 })

src/js/file_drop.ts

@@ -0,0 +1,31 @@
+import * as $ from "../../third_party/js/jquery-3.5.1";
+
+$("#file-drop").on('drop', (event) => {
+    if (event.originalEvent.dataTransfer.types.includes("Files")) {
+        event.preventDefault();
+        event.stopPropagation();
+        let files = event.originalEvent.dataTransfer.files;
+        $(document).trigger("open-dropped-files", [files]);
+        $("#file-drop").css("display", "none");
+    }
+})
+    .on('dragover', (event) => {
+        if (event.originalEvent.dataTransfer.types.includes("Files")) {
+            event.preventDefault();
+            event.stopPropagation();
+            $("#file-drop").css("display", "block");
+        }
+    })
+    .on('dragleave', (event) => {
+        if (event.originalEvent.dataTransfer.types.includes("Files")) {
+            $("#file-drop").css("display", "none");
+        }
+    });
+
+$(window).on('dragenter', (event) => {
+    if (event.originalEvent.dataTransfer.types.includes("Files")) {
+        let width = $(window).width();
+        let height = $(window).height();
+        $("#file-drop").css({"display": "block", "width": width, "height": height});
+    }
+});

src/js/splash.ts

@@ -33,6 +33,13 @@ async function removeRecentFile(file) {
 	showRecentFiles();
 }
 
+function openDroppedFiles(files) {
+	for (const f of files) {
+		console.log(f.path);
+		ipcRenderer.send("open", f.path, true);
+	}
+}
+
 showRecentFiles();
 
 $("#create-new").on("click", () => {
@@ -43,35 +50,6 @@ $("#open-file").on("click", () => {
 	ipcRenderer.send("open", "", true);
 })
 
-$("#file-drop").on('drop', (event) => {
+$(document).on("open-dropped-files", (event, files) => {
-	if (event.originalEvent.dataTransfer.types.includes("Files")) {
+	openDroppedFiles(files);
-		event.preventDefault();
-		event.stopPropagation();
-		let files = event.originalEvent.dataTransfer.files;
-		for (const f of files) {
-			ipcRenderer.send("open", f.path, true, true);
-		}
-		$("#file-drop").css("display", "none");
-	}
 })
-	.on('dragover', (event) => {
-	if (event.originalEvent.dataTransfer.types.includes("Files")) {
-		event.preventDefault();
-		event.stopPropagation();
-		$("#file-drop").css("display", "block");
-	}
-})
-	.on('dragleave', (event) => {
-		if (event.originalEvent.dataTransfer.types.includes("Files")) {
-			$("#file-drop").css("display", "none");
-		}
-	});
-
-
-$(window).on('dragenter', (event) => {
-	if (event.originalEvent.dataTransfer.types.includes("Files")) {
-		let width = $(document).width();
-		let height = $(document).height();
-		$("#file-drop").css({"display": "block", "width": width, "height": height});
-	}
-});

src/splash.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Web Editor</title>
+  <title>Web Editor - splash</title>
   <link rel="stylesheet" href="../third_party/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
@@ -14,7 +14,7 @@
   <br/>
   <button id="open-file" class="btn btn-secondary">Open</button>
 </div>
-<div id="file-drop" style="display: none; width: 100%; height: 100%; background: white; opacity: 50%; position: absolute">
+<div id="file-drop" style="display: none; width: 100%; height: 100%; background: rgba(255,255,255,.5); position: absolute">
   <div class="position-absolute top-50 start-50 translate-middle" style="pointer-events: none">Drop files here</div>
 </div>
 <script>
@@ -27,6 +27,7 @@
 <script>if (window.module) module = window.module;</script>
 <script>
   require("./../build/js/splash.js");
+  require("./../build/js/file_drop.js");
 </script>
 </body>
 </html>