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

View File

@ -36,10 +36,10 @@ export default class AbstractTextTypeWidget extends TypeWidget {
.append($link) .append($link)
); );
const {renderedContent} = await noteContentRenderer.getRenderedContent(note); const {renderedContent, type} = await noteContentRenderer.getRenderedContent(note);
$el.append( $el.append(
$('<div class="include-note-content">') $(`<div class="include-note-content type-${type}">`)
.append(renderedContent) .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; 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 { .include-note.box-size-medium .include-note-content {
max-height: 20em; max-height: 20em;
overflow: auto; 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 { .alert-warning {
color: var(--main-text-color) !important; color: var(--main-text-color) !important;
background-color: var(--accented-background-color) !important; background-color: var(--accented-background-color) !important;