Fix drag and drop with directories; improve drop zone
This commit is contained in:
parent
f03144ba91
commit
fda1c6c66e
48
js/main.js
48
js/main.js
@ -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));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
19
style.css
19
style.css
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user