fixes for rendering PDF previews e.g. in include note

This commit is contained in:
zadam 2020-08-10 23:39:17 +02:00
parent 7779fd1dfe
commit 4e8d1dac67
3 changed files with 29 additions and 11 deletions

View File

@ -24,7 +24,7 @@ async function getRenderedContent(note) {
.attr("src", `api/images/${note.noteId}/${note.title}`)
.css("max-width", "100%");
}
else if (type === 'file') {
else if (type === 'file' || type === 'pdf') {
function getFileUrl() {
return utils.getUrlForDownload("api/notes/" + note.noteId + "/download");
}
@ -47,19 +47,21 @@ async function getRenderedContent(note) {
// open doesn't work for protected notes since it works through browser which isn't in protected session
$openButton.toggle(!note.isProtected);
$rendered = $('<div>');
$rendered = $('<div style="display: flex; flex-direction: column; height: 100%;">');
if (note.mime === 'application/pdf' && utils.isElectron()) {
const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>');
if (type === 'pdf') {
const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
$pdfPreview.attr("src", utils.getUrlForDownload("api/notes/" + note.noteId + "/open"));
$rendered.append($pdfPreview);
}
$rendered
.append($downloadButton)
.append(' &nbsp; ')
.append($openButton);
$rendered.append(
$("<div>")
.append($downloadButton)
.append(' &nbsp; ')
.append($openButton)
);
}
else if (type === 'render') {
$rendered = $('<div>');
@ -90,6 +92,10 @@ async function getRenderedContent(note) {
function getRenderingType(note) {
let type = note.type;
if (type === 'file' && note.mime === 'application/pdf' && utils.isElectron()) {
type = 'pdf';
}
if (note.isProtected) {
if (protectedSessionHolder.isProtectedSessionAvailable()) {
protectedSessionHolder.touchProtectedSession();
@ -104,4 +110,4 @@ function getRenderingType(note) {
export default {
getRenderedContent
};
};

View File

@ -36,10 +36,10 @@ export default class AbstractTextTypeWidget extends TypeWidget {
.append($link)
);
const {renderedContent} = await noteContentRenderer.getRenderedContent(note);
const {renderedContent, type} = await noteContentRenderer.getRenderedContent(note);
$el.append(
$('<div class="include-note-content">')
$(`<div class="include-note-content type-${type}">`)
.append(renderedContent)
);
}

View File

@ -693,11 +693,23 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
overflow: auto;
}
.include-note.box-size-small .include-note-content.type-pdf {
height: 10em; /* PDF is rendered in iframe and must be sized absolutely */
}
.include-note.box-size-medium .include-note-content {
max-height: 20em;
overflow: auto;
}
.include-note.box-size-medium .include-note-content.type-pdf {
height: 20em; /* PDF is rendered in iframe and must be sized absolutely */
}
.include-note.box-size-full .include-note-content.type-pdf {
height: 50em; /* PDF is rendered in iframe and it's not possible to put full height so at least a large height */
}
.alert-warning {
color: var(--main-text-color) !important;
background-color: var(--accented-background-color) !important;