Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-30 04:01:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip attachment widget

Browse Source
This commit is contained in:
zadam 2023-04-01 13:58:53 +02:00
parent fa406d3ded
commit 53aebf1448
4 changed files with 31 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/public/app/widgets/attachment_detail.js
View File

@ -1,5 +1,3 @@
import TypeWidget from "./type_widget.js";
import server from "../../services/server.js";
import utils from "../../services/utils.js";
import AttachmentActionsWidget from "../buttons/attachments_actions.js";
import BasicWidget from "./basic_widget.js";
@ -36,7 +34,16 @@ const TPL = `
}
</style>
<div class="attachment-detail-wrapper"></div>
<div class="attachment-detail-wrapper">
<div class="attachment-title-line">
<h4 class="attachment-title"></h4>
<div class="attachment-details"></div>
<div style="flex: 1 1;">
<div class="attachment-actions-container"></div>
</div>
<div class="attachment-content"></div>
</div>
</div>`;
export default class AttachmentDetailWidget extends BasicWidget {
@ -44,56 +51,27 @@ export default class AttachmentDetailWidget extends BasicWidget {
super();
this.attachment = attachment;
this.attachmentActionsWidget = new AttachmentActionsWidget(attachment);
this.child(this.attachmentActionsWidget);
}
doRender() {
this.$widget = $(TPL);
this.$wrapper = this.$widget.find('.attachment-detail-wrapper');
this.$wrapper.find('.attachment-title').text(this.attachment.title);
this.$wrapper.find('.attachment-details')
.text(`Role: ${this.attachment.role}, Size: ${utils.formatSize(this.attachment.contentLength)}`);
this.$wrapper.find('.attachment-actions-container').append(this.attachmentActionsWidget.render());
this.$wrapper.find('.attachment-content').append(this.renderContent());
super.doRender();
}
async doRefresh(note) {
this.$list.empty();
this.children = [];
const attachments = await server.get(`notes/${this.noteId}/attachments?includeContent=true`);
if (attachments.length === 0) {
this.$list.html("<strong>This note has no attachments.</strong>");
return;
}
for (const attachment of attachments) {
const attachmentActionsWidget = new AttachmentActionsWidget(attachment);
this.child(attachmentActionsWidget);
this.$list.append(
$('<div class="attachment-detail-wrapper">')
.append(
$('<div class="attachment-title-line">')
.append($('<h4>').append($('<span class="attachment-title">').text(attachment.title)))
.append(
$('<div class="attachment-details">')
.text(`Role: ${attachment.role}, Size: ${utils.formatSize(attachment.contentLength)}`)
)
.append($('<div style="flex: 1 1;">')) // spacer
.append(attachmentActionsWidget.render())
)
.append(
$('<div class="attachment-content">')
.append(this.renderContent(attachment))
)
);
}
}
renderContent(attachment) {
if (attachment.content) {
return $("<pre>").text(attachment.content);
} else if (attachment.role === 'image') {
return `<img src="api/notes/${attachment.parentId}/images/${attachment.attachmentId}/${encodeURIComponent(attachment.title)}?${attachment.utcDateModified}">`;
renderContent() {
if (this.attachment.content) {
return $("<pre>").text(this.attachment.content);
} else if (this.attachment.role === 'image') {
return `<img src="api/notes/${this.attachment.parentId}/images/${this.attachment.attachmentId}/${encodeURIComponent(this.attachment.title)}?${this.attachment.utcDateModified}">`;
} else {
return '';
}

6
src/public/app/widgets/buttons/attachments_actions.js
View File

@ -1,5 +1,6 @@
import BasicWidget from "../basic_widget.js";
import server from "../../services/server.js";
import dialogService from "../../services/dialog.js";
const TPL = `
<div class="dropdown attachment-actions">
@ -39,9 +40,12 @@ export default class AttachmentActionsWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$widget.on('click', '.dropdown-item', () => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle'));
}
async deleteAttachmentCommand() {
await server.remove(`notes/${this.attachment.parentId}/attachments/${this.attachment.attachmentId}`);
if (await dialogService.confirm(`Are you sure you want to delete attachment '${this.attachment.title}'?`)) {
await server.remove(`notes/${this.attachment.parentId}/attachments/${this.attachment.attachmentId}`);
}
}
}

2
src/public/app/widgets/dialogs/note_revisions.js
View File

@ -234,8 +234,6 @@ export default class NoteRevisionsDialog extends BasicWidget {
const fullNoteRevision = await server.get(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`);
console.log(fullNoteRevision);
if (revisionItem.type === 'text') {
this.$content.html(fullNoteRevision.content);

61
src/public/app/widgets/type_widgets/attachments.js
View File

@ -2,6 +2,7 @@ import TypeWidget from "./type_widget.js";
import server from "../../services/server.js";
import utils from "../../services/utils.js";
import AttachmentActionsWidget from "../buttons/attachments_actions.js";
import AttachmentDetailWidget from "../attachment_detail.js";
const TPL = `
<div class="attachments note-detail-printable">
@ -9,34 +10,6 @@ const TPL = `
.attachments {
padding: 15px;
}
.attachment-wrapper {
margin-bottom: 20px;
}
.attachment-title-line {
display: flex;
align-items: baseline;
}
.attachment-details {
margin-left: 10px;
}
.attachment-content pre {
max-height: 400px;
background: var(--accented-background-color);
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.attachment-content img {
margin: 10px;
max-height: 300px;
max-width: 90%;
object-fit: contain;
}
</style>
<div class="attachment-list"></div>
@ -65,36 +38,10 @@ export default class AttachmentsTypeWidget extends TypeWidget {
}
for (const attachment of attachments) {
const attachmentActionsWidget = new AttachmentActionsWidget(attachment);
this.child(attachmentActionsWidget);
const attachmentDetailWidget = new AttachmentDetailWidget(attachment);
this.child(attachmentDetailWidget);
this.$list.append(
$('<div class="attachment-wrapper">')
.append(
$('<div class="attachment-title-line">')
.append($('<h4>').append($('<span class="attachment-title">').text(attachment.title)))
.append(
$('<div class="attachment-details">')
.text(`Role: ${attachment.role}, Size: ${utils.formatSize(attachment.contentLength)}`)
)
.append($('<div style="flex: 1 1;">')) // spacer
.append(attachmentActionsWidget.render())
)
.append(
$('<div class="attachment-content">')
.append(this.renderContent(attachment))
)
);
}
}
renderContent(attachment) {
if (attachment.content) {
return $("<pre>").text(attachment.content);
} else if (attachment.role === 'image') {
return `<img src="api/notes/${attachment.parentId}/images/${attachment.attachmentId}/${encodeURIComponent(attachment.title)}?${attachment.utcDateModified}">`;
} else {
return '';
this.$list.append(attachmentDetailWidget.render());
}
}
}