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,
|
require_file: true,
|
||||||
dropzone_class: '--drag-hover',
|
dropzone_class: '--drag-hover',
|
||||||
on_drop: async ev => {
|
on_drop: async ev => {
|
||||||
// If we got exactly one file, try to open it directly
|
// Safari doesn't support .items; the spec doesn't support directories; the WebKit
|
||||||
// TODO should have some sensible handling of receiving multiple packs
|
// interface /does/ support directories but obviously isn't standard (yet?).
|
||||||
if (ev.dataTransfer.files && ev.dataTransfer.files.length === 1) {
|
// Try to make this all work.
|
||||||
let file = ev.dataTransfer.files[0];
|
// 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();
|
let buf = await file.arrayBuffer();
|
||||||
await this.conductor.parse_and_load_game(buf, null, '/' + file.name);
|
await this.conductor.parse_and_load_game(buf, null, '/' + file.name);
|
||||||
return;
|
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;
|
align-items: center;
|
||||||
|
|
||||||
font-size: 10vmin;
|
font-size: 10vmin;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0;
|
top: 0.5rem;
|
||||||
bottom: 0;
|
bottom: 0.5rem;
|
||||||
left: 1rem;
|
left: 0.5rem;
|
||||||
right: 1rem;
|
right: 0.5rem;
|
||||||
background: #fff2;
|
background: #0004;
|
||||||
border: 0.25rem dashed white;
|
border: 0.125rem dashed white;
|
||||||
border-radius: 1rem;
|
border-radius: 0.25rem;
|
||||||
text-shadow: 0 1px 5px black;
|
text-shadow: 0 1px 5px black;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
#splash > .drag-overlay::before {
|
||||||
|
content: "drop levels here";
|
||||||
|
}
|
||||||
#splash.--drag-hover > .drag-overlay {
|
#splash.--drag-hover > .drag-overlay {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user