wip attachment widget

2025-11-11 15:55:52 +01:00 · 2023-03-30 23:48:26 +02:00
parent 9be524ef89
commit fa406d3ded
7 changed files with 138 additions and 61 deletions
--- a/src/public/app/widgets/attachment_detail.js
+++ b/src/public/app/widgets/attachment_detail.js
@@ -0,0 +1,101 @@
+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";
+
+const TPL = `
+<div class="attachment-detail">
+    <style>
+        .attachment-detail-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-detail-wrapper"></div>
+</div>`;
+
+export default class AttachmentDetailWidget extends BasicWidget {
+    constructor(attachment) {
+        super();
+
+        this.attachment = attachment;
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$wrapper = this.$widget.find('.attachment-detail-wrapper');
+
+        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}">`;
+        } else {
+            return '';
+        }
+    }
+}