gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

zoom for the attachment images

Browse Source
This commit is contained in:
zadam 2023-07-14 21:06:15 +02:00
parent fed5f1a7d2
commit 5f6fded833
3 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libraries/wheel-zoom.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
src/public/app/services/content_renderer.js
View File

@ -35,7 +35,7 @@ async function getRenderedContent(entity, options = {}) {
await renderCode(entity, options, $renderedContent); await renderCode(entity, options, $renderedContent);
} }
else if (type === 'image') { else if (type === 'image') {
renderImage(entity, $renderedContent); renderImage(entity, $renderedContent, options);
} }
else if (!options.tooltip && ['file', 'pdf', 'audio', 'video'].includes(type)) { else if (!options.tooltip && ['file', 'pdf', 'audio', 'video'].includes(type)) {
renderFile(entity, type, $renderedContent); renderFile(entity, type, $renderedContent);
@ -118,7 +118,7 @@ async function renderCode(note, options, $renderedContent) {
$renderedContent.append($("<pre>").text(trim(blob.content, options.trim))); $renderedContent.append($("<pre>").text(trim(blob.content, options.trim)));
} }
function renderImage(entity, $renderedContent) { function renderImage(entity, $renderedContent, options = {}) {
const sanitizedTitle = entity.title.replace(/[^a-z0-9-.]/gi, ""); const sanitizedTitle = entity.title.replace(/[^a-z0-9-.]/gi, "");
let url; let url;
@ -129,11 +129,27 @@ function renderImage(entity, $renderedContent) {
url = `api/attachments/${entity.attachmentId}/image/${sanitizedTitle}?${entity.utcDateModified}">`; url = `api/attachments/${entity.attachmentId}/image/${sanitizedTitle}?${entity.utcDateModified}">`;
} }
$renderedContent.append( $renderedContent // styles needed for the zoom to work well
$("<img>") .css('display', 'flex')
.css('align-items', 'center')
.css('justify-content', 'center');
const $img = $("<img>")
.attr("src", url) .attr("src", url)
.css("max-width", "100%") .attr("id", "attachment-image-" + idCounter++)
); .css("max-width", "100%");
$renderedContent.append($img);
if (options.imageHasZoom) {
libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
WZoom.create(`#${$img.attr("id")}`, {
maxScale: 10,
speed: 20,
zoomOnClick: false
});
});
}
} }
function renderFile(entity, type, $renderedContent) { function renderFile(entity, type, $renderedContent) {

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

@ -167,7 +167,9 @@ export default class AttachmentDetailWidget extends BasicWidget {
this.$wrapper.find('.attachment-details') this.$wrapper.find('.attachment-details')
.text(`Role: ${this.attachment.role}, Size: ${utils.formatSize(this.attachment.contentLength)}`); .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-actions-container').append(this.attachmentActionsWidget.render());
this.$wrapper.find('.attachment-content-wrapper').append((await contentRenderer.getRenderedContent(this.attachment)).$renderedContent);
const {$renderedContent} = await contentRenderer.getRenderedContent(this.attachment, { imageHasZoom: true });
this.$wrapper.find('.attachment-content-wrapper').append($renderedContent);
} }
async copyAttachmentLinkToClipboard() { async copyAttachmentLinkToClipboard() {