Fix drag and drop with directories; improve drop zone

This commit is contained in:
Eevee (Evelyn Woods) 2021-01-04 12:56:30 -07:00
parent f03144ba91
commit fda1c6c66e
2 changed files with 48 additions and 19 deletions

View File

@ -1956,21 +1956,47 @@ class Splash extends PrimaryView {
require_file: true,
dropzone_class: '--drag-hover',
on_drop: async ev => {
// If we got exactly one file, try to open it directly
// TODO should have some sensible handling of receiving multiple packs
if (ev.dataTransfer.files && ev.dataTransfer.files.length === 1) {
let file = ev.dataTransfer.files[0];
// Safari doesn't support .items; the spec doesn't support directories; the WebKit
// interface /does/ support directories but obviously isn't standard (yet?).
// Try to make this all work.
// By the way, if you access .files, it seems .items becomes inaccessible??
// TODO also, we don't yet support receiving multiple packs
let files;
if (ev.dataTransfer.items) {
// Prefer the WebKit entry interface, which preserves directory structure, but
// fall back to a list of files if we must
let entries = [];
files = [];
for (let item of ev.dataTransfer.items) {
if (item.kind !== 'file')
continue;
files.push(item.getAsFile());
if (item.webkitGetAsEntry) {
entries.push(item.webkitGetAsEntry());
}
}
// Do NOT try this if we only got a single regular file
if (entries.length && ! (entries.length === 1 && ! entries[0].isDirectory)) {
await this.search_multi_source(new util.EntryFileSource(entries));
return;
}
}
else {
files = ev.dataTransfer.files;
}
// If all we have is a list of files, try to open the first one directly (since we
// can't handle multiple yet)
// TODO can we detect if a file is actually supposed to be a directory and say the
// browser doesn't support the experimental interface for this?
if (files && files.length) {
let file = files[0];
let buf = await file.arrayBuffer();
await this.conductor.parse_and_load_game(buf, null, '/' + file.name);
return;
}
// Otherwise, try the WebKit entry interface, which also exposes directory structure
let entries = [];
for (let item of ev.dataTransfer.items) {
entries.push(item.webkitGetAsEntry());
}
await this.search_multi_source(new util.EntryFileSource(entries));
},
});
}

View File

@ -588,17 +588,20 @@ pre.stack-trace {
align-items: center;
font-size: 10vmin;
position: absolute;
top: 0;
bottom: 0;
left: 1rem;
right: 1rem;
background: #fff2;
border: 0.25rem dashed white;
border-radius: 1rem;
position: fixed;
top: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
right: 0.5rem;
background: #0004;
border: 0.125rem dashed white;
border-radius: 0.25rem;
text-shadow: 0 1px 5px black;
text-align: center;
}
#splash > .drag-overlay::before {
content: "drop levels here";
}
#splash.--drag-hover > .drag-overlay {
display: flex;
}