trilium/src/public/javascripts/services/note_detail_image.js

122 lines
4.1 KiB
JavaScript
Raw Normal View History

2018-11-08 17:11:00 +08:00
import utils from "./utils.js";
2019-10-20 16:00:18 +08:00
import toastService from "./toast.js";
import server from "./server.js";
2019-11-09 05:34:30 +08:00
import noteDetailService from "./note_detail.js";
2018-11-08 17:11:00 +08:00
2019-05-03 04:24:43 +08:00
class NoteDetailImage {
/**
2019-05-09 01:55:24 +08:00
* @param {TabContext} ctx
2019-05-03 04:24:43 +08:00
*/
constructor(ctx) {
this.ctx = ctx;
2019-05-09 01:55:24 +08:00
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");
2019-11-09 05:34:30 +08:00
this.$uploadNewRevisionButton = ctx.$tabContent.find(".image-upload-new-revision");
this.$uploadNewRevisionInput = ctx.$tabContent.find(".image-upload-new-revision-input");
2019-05-09 01:55:24 +08:00
this.$fileName = ctx.$tabContent.find(".image-filename");
this.$fileType = ctx.$tabContent.find(".image-filetype");
this.$fileSize = ctx.$tabContent.find(".image-filesize");
2018-11-08 17:11:00 +08:00
2019-05-09 01:55:24 +08:00
this.$imageDownloadButton = ctx.$tabContent.find(".image-download");
2019-11-09 05:34:30 +08:00
this.$imageDownloadButton.on('click', () => utils.download(this.getFileUrl()));
2018-11-08 17:11:00 +08:00
2019-11-09 05:34:30 +08:00
this.$copyToClipboardButton.on('click',() => {
2019-05-03 04:24:43 +08:00
this.$imageWrapper.attr('contenteditable','true');
2018-11-08 17:11:00 +08:00
2019-05-03 04:24:43 +08:00
try {
this.selectImage(this.$imageWrapper.get(0));
2019-05-03 04:24:43 +08:00
const success = document.execCommand('copy');
2018-11-08 17:11:00 +08:00
2019-05-03 04:24:43 +08:00
if (success) {
2019-10-20 16:00:18 +08:00
toastService.showMessage("Image copied to the clipboard");
2019-05-03 04:24:43 +08:00
}
else {
2019-10-20 16:00:18 +08:00
toastService.showAndLogError("Could not copy the image to clipboard.");
2019-05-03 04:24:43 +08:00
}
}
finally {
window.getSelection().removeAllRanges();
this.$imageWrapper.removeAttr('contenteditable');
}
});
2019-11-09 05:34:30 +08:00
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('');
2019-11-09 05:34:30 +08:00
const formData = new FormData();
formData.append('upload', fileToUpload);
2019-11-09 05:34:30 +08:00
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) {
2019-11-09 18:58:52 +08:00
toastService.showMessage("New image revision has been uploaded.");
2019-11-09 05:34:30 +08:00
2019-11-09 06:09:57 +08:00
await utils.clearBrowserCache();
2019-11-09 05:34:30 +08:00
await noteDetailService.reload();
}
else {
2019-11-09 18:58:52 +08:00
toastService.showError("Upload of a new image revision failed: " + result.message);
2019-11-09 05:34:30 +08:00
}
});
2019-05-03 04:24:43 +08:00
}
2018-11-08 17:11:00 +08:00
2019-05-12 18:58:55 +08:00
async render() {
const attributes = await server.get('notes/' + this.ctx.note.noteId + '/attributes');
2019-05-03 04:24:43 +08:00
const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);
2018-11-09 01:35:23 +08:00
2019-05-03 04:24:43 +08:00
this.$component.show();
2018-11-09 01:35:23 +08:00
2019-05-03 04:24:43 +08:00
this.$fileName.text(attributeMap.originalFileName || "?");
2019-11-09 16:36:08 +08:00
this.$fileSize.text(this.ctx.note.contentLength + " bytes");
this.$fileType.text(this.ctx.note.mime);
2018-11-09 01:35:23 +08:00
2019-11-09 05:34:30 +08:00
const imageHash = this.ctx.note.utcDateModified.replace(" ", "_");
this.$imageView.prop("src", `api/images/${this.ctx.note.noteId}/${this.ctx.note.title}?${imageHash}`);
2019-05-03 04:24:43 +08:00
}
2018-11-09 01:35:23 +08:00
2019-05-03 04:24:43 +08:00
selectImage(element) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
2018-11-09 01:35:23 +08:00
}
2019-05-03 04:24:43 +08:00
getFileUrl() {
return utils.getUrlForDownload(`api/notes/${this.ctx.note.noteId}/download`);
2018-11-09 01:35:23 +08:00
}
show() {}
2019-05-03 04:24:43 +08:00
getContent() {}
focus() {}
onNoteChange() {}
cleanup() {}
scrollToTop() {
this.$component.scrollTop(0);
}
2018-11-08 17:11:00 +08:00
}
2019-05-03 04:24:43 +08:00
export default NoteDetailImage