syntaxbullet/docs.sheetjs.com
1
Fork 0
forked from sheetjs/docs.sheetjs.com
Code Pull Requests Activity

fix: [Electron Demo] - move dropzone to entire document/window.

Browse Source
This commit is contained in:
syntaxbullet 2025-05-01 12:15:07 +02:00
parent d35203cb2b
commit 843441893b
3 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docz/static/electron/index.js
View File

@ -156,32 +156,31 @@ function attachDropListeners() {
setTimeout(() => readFile(e.target.files), 0);
});
addListener("readBtn", "click", handleReadBtn);
if (!dropzone || !dropContainer) return;
const handleDrag = (e) => {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = "copy";
dropContainer.classList.add("drag-over");
document.body.classList.add("drag-over");
};
const handleDragLeave = (e) => {
e.stopPropagation();
e.preventDefault();
dropContainer.classList.remove("drag-over");
document.body.classList.remove("drag-over");
};
dropzone.addEventListener(
document.body.addEventListener(
"drop",
(e) => {
e.stopPropagation();
e.preventDefault();
dropContainer.classList.remove("drag-over");
document.body.classList.remove("drag-over");
readFile(e.dataTransfer.files);
},
false
);
dropzone.addEventListener("dragenter", handleDrag, false);
dropzone.addEventListener("dragover", handleDrag, false);
dropzone.addEventListener("dragleave", handleDragLeave, false);
dropzone.addEventListener("dragend", handleDragLeave, false);
document.body.addEventListener("dragenter", handleDrag, false);
document.body.addEventListener("dragover", handleDrag, false);
document.body.addEventListener("dragleave", handleDragLeave, false);
document.body.addEventListener("dragend", handleDragLeave, false);
}
// --- File Reader for Drag-and-Drop and Input ---

8
docz/static/electron/main.js
View File

@ -28,6 +28,7 @@ function firstSpreadsheetFromArgv() {
/* ---- single-instance guard (needed for Windows / Linux) ---- */
// on windows and linux, opening a file opens a new instance of the app, this prevents that.
// https://www.electronjs.org/docs/latest/api/app#event-second-instance
const gotLock = app.requestSingleInstanceLock();
if (!gotLock) app.quit();
else {
@ -38,18 +39,19 @@ else {
});
}
/* ---- platform-specific “open file” hooks ---- */
/* ---- platform-specific “open file” hooks (macOS) ---- */
// https://www.electronjs.org/docs/latest/api/app#event-open-file-macos
app.on('open-file', (event, fp) => { // macOS Dock / Finder
event.preventDefault();
sendToRenderer(fp);
});
// https://www.electronjs.org/docs/latest/api/app#event-open-url-macos
app.on('open-url', (event, url) => { // you can add a custom protocol if you want to handle URLs
event.preventDefault();
sendToRenderer(url.replace('file://', '')); // crude, adjust if you keep deep-links
});
/* ---- normal start-up, harvest argv ---- */
/* ---- normal start-up, harvest argv (Windows & Linux) ---- */
app.whenReady().then(() => {
const fp = firstSpreadsheetFromArgv(); // Windows & Linux first launch
if (fp) pendingPaths.push(fp);

8
docz/static/electron/styles.css
View File

@ -136,7 +136,6 @@ button:focus, input[type="submit"]:focus, input[type="file"]:focus {
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 1px dashed var(--text-muted);
padding: 1rem;
width: 75%;
max-width: 600px;
@ -148,13 +147,6 @@ button:focus, input[type="submit"]:focus, input[type="file"]:focus {
display: none;
}
.file-upload.drag-over {
border-color: var(--text-accent);
background-color: #e6f8ee;
box-shadow: 0 0 0 2px var(--text-accent);
transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
#drop {
width: 100%;
height: 100%;