From 1c51419db5f9f4ad329f4f96070d58097e9d8d0a Mon Sep 17 00:00:00 2001 From: zadam Date: Sat, 30 Jan 2021 20:21:44 +0100 Subject: [PATCH] image properties converted to collapsible section container --- .../layouts/desktop_extra_window_layout.js | 2 + .../app/layouts/desktop_main_window_layout.js | 2 + .../type_property_widgets/image_properties.js | 111 +++++++++++++++ src/public/app/widgets/type_widgets/image.js | 132 ++++-------------- 4 files changed, 144 insertions(+), 103 deletions(-) create mode 100644 src/public/app/widgets/type_property_widgets/image_properties.js diff --git a/src/public/app/layouts/desktop_extra_window_layout.js b/src/public/app/layouts/desktop_extra_window_layout.js index 460c8b2f4..2d5a78202 100644 --- a/src/public/app/layouts/desktop_extra_window_layout.js +++ b/src/public/app/layouts/desktop_extra_window_layout.js @@ -18,6 +18,7 @@ import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js"; import NoteListWidget from "../widgets/note_list.js"; import SqlResultWidget from "../widgets/sql_result.js"; import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js"; +import ImagePropertiesWidget from "../widgets/type_property_widgets/image_properties.js"; export default class DesktopExtraWindowLayout { constructor(customWidgets) { @@ -50,6 +51,7 @@ export default class DesktopExtraWindowLayout { new TabCachingWidget(() => new CollapsibleSectionContainer() .child(new SearchDefinitionWidget()) .child(new FilePropertiesWidget()) + .child(new ImagePropertiesWidget()) .child(new PromotedAttributesWidget()) .child(new OwnedAttributeListWidget()) .child(new InheritedAttributesWidget()) diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js index 2fa7a9531..391c31ee7 100644 --- a/src/public/app/layouts/desktop_main_window_layout.js +++ b/src/public/app/layouts/desktop_main_window_layout.js @@ -29,6 +29,7 @@ import Container from "../widgets/container.js"; import SqlResultWidget from "../widgets/sql_result.js"; import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js"; import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js"; +import ImagePropertiesWidget from "../widgets/type_property_widgets/image_properties.js"; const RIGHT_PANE_CSS = ` -
- - - - - -
-
- -
- - Original file name: - - - - - File type: - - - - - File size: - - -
- - `; class ImageTypeWidget extends TypeWidget { @@ -58,88 +33,39 @@ class ImageTypeWidget extends TypeWidget { this.contentSized(); this.$imageWrapper = this.$widget.find('.note-detail-image-wrapper'); this.$imageView = this.$widget.find('.note-detail-image-view'); - this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard"); - this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision"); - this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input"); - this.$fileName = this.$widget.find(".image-filename"); - this.$fileType = this.$widget.find(".image-filetype"); - this.$fileSize = this.$widget.find(".image-filesize"); - - this.$imageDownloadButton = this.$widget.find(".image-download"); - this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId)); - - 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.noteId, - headers: await 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(); - - this.refresh(); - } - else { - toastService.showError("Upload of a new image revision failed: " + result.message); - } - }); } async doRefresh(note) { - const attributes = note.getAttributes(); - const attributeMap = utils.toObject(attributes, l => [l.name, l.value]); - - this.$widget.show(); - - const noteComplement = await this.tabContext.getNoteComplement(); - - this.$fileName.text(attributeMap.originalFileName || "?"); - this.$fileSize.text(noteComplement.contentLength + " bytes"); - this.$fileType.text(note.mime); - const imageHash = utils.randomString(10); this.$imageView.prop("src", `api/images/${note.noteId}/${note.title}?${imageHash}`); } + copyImageToClipboardEvent({tabId}) { + if (!this.isTab(tabId)) { + return; + } + + 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'); + } + } + selectImage(element) { const selection = window.getSelection(); const range = document.createRange();