`
: undefined}
`;
}
}
/**
* Create a tf-navigation element.
*/
customElements.define('tf-navigation', TfNavigationElement);
/**
* A file in the files sidebar.
*/
class TfFilesElement extends LitElement {
/**
* LitElement properties.
* @return The properties.
*/
static get properties() {
return {
current: {type: String},
files: {type: Object},
dropping: {type: Number},
drop_target: {type: String},
};
}
/**
* Create a TfFilesElement instance.
*/
constructor() {
super();
this.files = {};
this.dropping = 0;
}
/**
* Select a clicked file.
* @param file The file.
*/
file_click(file) {
this.dispatchEvent(
new CustomEvent('file_click', {
detail: {
file: file,
},
bubbles: true,
composed: true,
})
);
}
/**
* Render a single file in the file list.
* @param file The file.
* @return Lit HTML.
*/
render_file(file) {
let classes = ['file'];
if (file == this.current) {
classes.push('current');
}
if (!this.files[file].clean) {
classes.push('dirty');
}
if (this.drop_target == file) {
classes.push('drop');
}
return html`
this.file_click(file)}
>
${file}
`;
}
/**
* Create a file entry for a dropped file.
* @param event The event.
*/
async drop(event) {
event.preventDefault();
event.stopPropagation();
this.dropping = 0;
this.drop_target = undefined;
for (let file of event.dataTransfer.files) {
let buffer = await file.arrayBuffer();
let text = new TextDecoder('latin1').decode(buffer);
g_files[file.name] = {
doc: cm6.EditorState.create({
doc: text,
extensions: cm6.extensions,
}),
buffer: buffer,
isNew: true,
};
g_current_file = file.name;
}
openFile(g_current_file);
updateFiles();
}
/**
* Called when a file starts being dragged over the file.
* @param event The event.
*/
drag_enter(event) {
this.dropping++;
this.drop_target = event.srcElement.innerText.trim();
event.preventDefault();
}
/**
* Called when a file stops being dragged over the file.
* @param event The event.
*/
drag_leave(event) {
this.dropping--;
if (this.dropping == 0) {
this.drop_target = undefined;
}
}
/**
* Called when a file is being dragged over the file.
* @param event The event.
*/
drag_over(event) {
event.preventDefault();
}
/**
* Render the file.
* @return Lit HTML.
*/
render() {
let self = this;
return html`