added a context menu for image to copy, #1954

This commit is contained in:
zadam 2022-11-09 23:41:25 +01:00
parent 055bd77bd6
commit c6e766f5c6
3 changed files with 44 additions and 6 deletions

View File

@ -76,6 +76,10 @@ class ContextMenu {
addItems($parent, items) {
for (const item of items) {
if (!item) {
continue;
}
if (item.title === '----') {
$parent.append($("<div>").addClass("dropdown-divider"));
} else {

View File

@ -28,7 +28,7 @@ const TPL = `
<button class="image-open btn btn-sm btn-primary" type="button">Open</button>
<button class="image-copy-to-clipboard btn btn-sm btn-primary" type="button">Copy to clipboard</button>
<button class="image-copy-reference-to-clipboard btn btn-sm btn-primary" type="button">Copy reference to clipboard</button>
<button class="image-upload-new-revision btn btn-sm btn-primary" type="button">Upload new revision</button>
</div>
@ -61,7 +61,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-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");
@ -74,7 +74,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
this.$imageDownloadButton = this.$widget.find(".image-download");
this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));
this.$copyToClipboardButton.on('click', () => this.triggerEvent(`copyImageToClipboard`, {ntxId: this.noteContext.ntxId}));
this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
this.$uploadNewRevisionButton.on("click", () => {
this.$uploadNewRevisionInput.trigger("click");
@ -121,7 +121,5 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
this.$fileName.text(attributeMap.originalFileName || "?");
this.$fileSize.text(noteComplement.contentLength + " bytes");
this.$fileType.text(note.mime);
const imageHash = utils.randomString(10);
}
}

View File

@ -2,6 +2,7 @@ import utils from "../../services/utils.js";
import toastService from "../../services/toast.js";
import TypeWidget from "./type_widget.js";
import libraryLoader from "../../services/library_loader.js";
import contextMenu from "../../services/context_menu.js";
const TPL = `
<div class="note-detail-image note-detail-printable">
@ -54,6 +55,37 @@ class ImageTypeWidget extends TypeWidget {
});
});
if (utils.isElectron()) {
// for browser we want to let the native menu
this.$imageView.on('contextmenu', e => {
e.preventDefault();
contextMenu.show({
x: e.pageX,
y: e.pageY,
items: [
{
title: "Copy reference to clipboard",
command: "copyImageReferenceToClipboard",
uiIcon: "bx bx-empty"
},
{title: "Copy image to clipboard", command: "copyImageToClipboard", uiIcon: "bx bx-empty"},
],
selectMenuItemHandler: ({command}) => {
if (command === 'copyImageReferenceToClipboard') {
this.copyImageReferenceToClipboard();
} else if (command === 'copyImageToClipboard') {
const webContents = utils.dynamicRequire('@electron/remote').getCurrentWebContents();
utils.dynamicRequire('electron');
webContents.copyImageAt(e.pageX, e.pageY);
} else {
throw new Error(`Unrecognized command ${command}`);
}
}
});
});
}
super.doRender();
}
@ -61,11 +93,15 @@ class ImageTypeWidget extends TypeWidget {
this.$imageView.prop("src", `api/images/${note.noteId}/${note.title}`);
}
copyImageToClipboardEvent({ntxId}) {
copyImageReferenceToClipboardEvent({ntxId}) {
if (!this.isNoteContext(ntxId)) {
return;
}
this.copyImageReferenceToClipboard();
}
copyImageReferenceToClipboard() {
this.$imageWrapper.attr('contenteditable','true');
try {