tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

File drag and drop, sort of.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4527 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-10-17 21:37:42 +00:00
parent 5285b3f222
commit 76b6ff78cd
1 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
core/client.js
View File

@ -149,12 +149,14 @@ class TfFilesElement extends LitElement {
return {
current: {type: String},
files: {type: Object},
dropping: {type: Number},
};
}
constructor() {
super();
this.files = {};
this.dropping = 0;
}
file_click(file) {
@ -178,6 +180,36 @@ class TfFilesElement extends LitElement {
return html`<div class="${classes.join(' ')}" @click=${x => this.file_click(file)}>${file}</div>`;
}
async drop(event) {
event.preventDefault();
event.stopPropagation();
this.dropping = 0;
for (let file of event.dataTransfer.files) {
let text = '';
try {
text = await file.text();
} catch {
text = new TextDecoder('latin1').decode(await file.arrayBuffer());
}
gFiles[file.name] = {
doc: new CodeMirror.Doc(text, guessMode(file.name)),
generation: -1,
};
gCurrentFile = file.name;
}
openFile(gCurrentFile);
updateFiles();
}
drag_enter(event) {
this.dropping++;
event.preventDefault();
}
drag_leave(event) {
this.dropping--;
}
render() {
let self = this;
return html`
@ -202,9 +234,15 @@ class TfFilesElement extends LitElement {
content: '*';
}
</style>
<div>
<div @drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}>
${Object.keys(this.files).sort().map(x => self.render_file(x))}
</div>
<div
?hidden=${this.dropping == 0}
@drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}
style="text-align: center; vertical-align: middle; outline: 16px solid red; margin: -8px; background-color: rgba(255, 0, 0, 0.5); position: absolute; left: 16px; top: 16px; width: calc(100% - 16px); height: calc(100% - 16px); z-index: 1000">
Drop File(s)
</div>
`;
}
}
@ -992,7 +1030,6 @@ function updateFiles() {
}]));
files.current = gCurrentFile;
}
gEditor.focus();
}