mirror of
https://github.com/zadam/trilium.git
synced 2024-09-30 12:35:59 +08:00
122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
import utils from "./utils.js";
|
|
import toastService from "./toast.js";
|
|
import server from "./server.js";
|
|
import noteDetailService from "./note_detail.js";
|
|
|
|
class NoteDetailImage {
|
|
/**
|
|
* @param {TabContext} ctx
|
|
*/
|
|
constructor(ctx) {
|
|
this.ctx = ctx;
|
|
this.$component = ctx.$tabContent.find('.note-detail-image');
|
|
this.$imageWrapper = ctx.$tabContent.find('.note-detail-image-wrapper');
|
|
this.$imageView = ctx.$tabContent.find('.note-detail-image-view');
|
|
this.$copyToClipboardButton = ctx.$tabContent.find(".image-copy-to-clipboard");
|
|
this.$uploadNewRevisionButton = ctx.$tabContent.find(".image-upload-new-revision");
|
|
this.$uploadNewRevisionInput = ctx.$tabContent.find(".image-upload-new-revision-input");
|
|
this.$fileName = ctx.$tabContent.find(".image-filename");
|
|
this.$fileType = ctx.$tabContent.find(".image-filetype");
|
|
this.$fileSize = ctx.$tabContent.find(".image-filesize");
|
|
|
|
this.$imageDownloadButton = ctx.$tabContent.find(".image-download");
|
|
this.$imageDownloadButton.on('click', () => utils.download(this.getFileUrl()));
|
|
|
|
this.$copyToClipboardButton.on('click',() => {
|
|
this.$imageWrapper.attr('contenteditable','true');
|
|
|
|
try {
|
|
this.selectImage(this.$imageWrapper.get(0));
|
|
|
|
const success = document.execCommand('copy');
|
|
|
|
if (success) {
|
|
toastService.showMessage("Image copied to the clipboard");
|
|
}
|
|
else {
|
|
toastService.showAndLogError("Could not copy the image to clipboard.");
|
|
}
|
|
}
|
|
finally {
|
|
window.getSelection().removeAllRanges();
|
|
this.$imageWrapper.removeAttr('contenteditable');
|
|
}
|
|
});
|
|
|
|
this.$uploadNewRevisionButton.on("click", () => {
|
|
this.$uploadNewRevisionInput.trigger("click");
|
|
});
|
|
|
|
this.$uploadNewRevisionInput.on('change', async () => {
|
|
const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
|
|
this.$uploadNewRevisionInput.val('');
|
|
|
|
const formData = new FormData();
|
|
formData.append('upload', fileToUpload);
|
|
|
|
const result = await $.ajax({
|
|
url: baseApiUrl + 'images/' + this.ctx.note.noteId,
|
|
headers: server.getHeaders(),
|
|
data: formData,
|
|
type: 'PUT',
|
|
timeout: 60 * 60 * 1000,
|
|
contentType: false, // NEEDED, DON'T REMOVE THIS
|
|
processData: false, // NEEDED, DON'T REMOVE THIS
|
|
});
|
|
|
|
if (result.uploaded) {
|
|
toastService.showMessage("New image revision has been uploaded.");
|
|
|
|
await utils.clearBrowserCache();
|
|
|
|
await noteDetailService.reload();
|
|
}
|
|
else {
|
|
toastService.showError("Upload of a new image revision failed: " + result.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
async render() {
|
|
const attributes = await server.get('notes/' + this.ctx.note.noteId + '/attributes');
|
|
const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);
|
|
|
|
this.$component.show();
|
|
|
|
this.$fileName.text(attributeMap.originalFileName || "?");
|
|
this.$fileSize.text(this.ctx.note.contentLength + " bytes");
|
|
this.$fileType.text(this.ctx.note.mime);
|
|
|
|
const imageHash = this.ctx.note.utcDateModified.replace(" ", "_");
|
|
|
|
this.$imageView.prop("src", `api/images/${this.ctx.note.noteId}/${this.ctx.note.title}?${imageHash}`);
|
|
}
|
|
|
|
selectImage(element) {
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.selectNodeContents(element);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
}
|
|
|
|
getFileUrl() {
|
|
return utils.getUrlForDownload(`api/notes/${this.ctx.note.noteId}/download`);
|
|
}
|
|
|
|
show() {}
|
|
|
|
getContent() {}
|
|
|
|
focus() {}
|
|
|
|
onNoteChange() {}
|
|
|
|
cleanup() {}
|
|
|
|
scrollToTop() {
|
|
this.$component.scrollTop(0);
|
|
}
|
|
}
|
|
|
|
export default NoteDetailImage |