File drag and drop, sort of.

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

View File

@ -149,12 +149,14 @@ class TfFilesElement extends LitElement {
return { return {
current: {type: String}, current: {type: String},
files: {type: Object}, files: {type: Object},
dropping: {type: Number},
}; };
} }
constructor() { constructor() {
super(); super();
this.files = {}; this.files = {};
this.dropping = 0;
} }
file_click(file) { 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>`; 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() { render() {
let self = this; let self = this;
return html` return html`
@ -202,9 +234,15 @@ class TfFilesElement extends LitElement {
content: '*'; content: '*';
} }
</style> </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))} ${Object.keys(this.files).sort().map(x => self.render_file(x))}
</div> </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; files.current = gCurrentFile;
} }
gEditor.focus(); gEditor.focus();
} }