matt/WebEditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved file drag and drop code to separate file

Browse Source 
Drag and drop import works in the editor window now
This commit is contained in:
Matthew Welch 2021-01-28 20:05:29 -08:00
parent 5037bf41be
commit 40e3ecee22
6 changed files with 140 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/editor.html
View File

@ -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>

19
src/index.ts
View File

@ -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 old_window = BrowserWindow.getFocusedWindow();
let 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) => {
openFile(file_path, new_file)
ipcMain.on("open", (event, file_path="", new_window=false) => {
openFile(file_path, new_window);
})
ipcMain.on("quit", (event) => {

135
src/js/editor.ts
View File

@ -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) {
$("#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);
}
tryOpen(file_name);
})
ipcRenderer.on("try-start-new", (event, 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);
}
tryStartNew(file_name);
})
ipcRenderer.on("try-quit", (event) => {
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");
}
tryQuit();
})
ipcRenderer.on("try-close-window", (event) => {
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");
}
tryCloseWindow();
})

31
src/js/file_drop.ts Normal file
View File

@ -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});
}
});

40
src/js/splash.ts
View File

@ -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) => {
if (event.originalEvent.dataTransfer.types.includes("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");
}
$(document).on("open-dropped-files", (event, files) => {
openDroppedFiles(files);
})
.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});
}
});

5
src/splash.html
View File

@ -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>