book has now zoom

This commit is contained in:
zadam
2019-10-04 22:21:14 +02:00
parent 144e75da9e
commit 02eb737b9d
6 changed files with 110 additions and 13 deletions

View File

@@ -1,6 +1,18 @@
import bundleService from "./bundle.js";
import server from "./server.js";
import linkService from "./link.js";
import utils from "./utils.js";
const MIN_ZOOM_LEVEL = 1;
const MAX_ZOOM_LEVEL = 6;
const ZOOMS = {
1: 100,
2: 49,
3: 32,
4: 24,
5: 19,
6: 16
};
class NoteDetailBook {
/**
@@ -9,14 +21,32 @@ class NoteDetailBook {
constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$tabContent.find('.note-detail-book');
this.$content = this.$component.find('.note-detail-book-content');
this.$zoomInButton = this.$component.find('.book-zoom-in');
this.$zoomOutButton = this.$component.find('.book-zoom-out');
this.setZoom(1);
this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1));
this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1));
}
setZoom(zoomLevel) {
this.zoomLevel = zoomLevel;
this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL);
this.$zoomOutButton.prop("disabled", zoomLevel === MAX_ZOOM_LEVEL);
this.$content.find('.note-book').css("flex-basis", ZOOMS[zoomLevel] + "%");
}
async render() {
this.$component.empty();
this.$content.empty();
for (const childNote of await this.ctx.note.getChildNotes()) {
this.$component.append(
this.$content.append(
$('<div class="note-book">')
.css("flex-basis", ZOOMS[this.zoomLevel] + "%")
.addClass("type-" + childNote.type)
.append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNote.noteId, null, false)))
.append($('<div class="note-book-content">').append(await this.getNoteContent(childNote)))
);
@@ -48,6 +78,35 @@ class NoteDetailBook {
else if (note.type === 'image') {
return $("<img>").attr("src", `api/images/${note.noteId}/${note.title}`);
}
else if (note.type === 'file') {
function getFileUrl() {
// electron needs absolute URL so we extract current host, port, protocol
return utils.getHost() + "/api/notes/" + note.noteId + "/download";
}
const $downloadButton = $('<button class="file-download btn btn-primary" type="button">Download</button>');
const $openButton = $('<button class="file-open btn btn-primary" type="button">Open</button>');
$downloadButton.click(() => utils.download(getFileUrl()));
$openButton.click(() => {
if (utils.isElectron()) {
const open = require("open");
open(getFileUrl());
}
else {
window.location.href = getFileUrl();
}
});
// open doesn't work for protected notes since it works through browser which isn't in protected session
$openButton.toggle(!note.isProtected);
return $('<div>')
.append($downloadButton)
.append(' &nbsp; ')
.append($openButton);
}
else {
return "<em>Content of this note cannot be displayed in the book format</em>";
}
@@ -64,7 +123,7 @@ class NoteDetailBook {
onNoteChange() {}
cleanup() {
this.$component.empty();
this.$content.empty();
}
scrollToTop() {