ability to set book zoom level via label

This commit is contained in:
zadam 2019-10-05 12:01:00 +02:00
parent 59d1cb1833
commit ea71e96f72
4 changed files with 14 additions and 7 deletions

View File

@ -3,6 +3,7 @@ import linkService from "./link.js";
import utils from "./utils.js"; import utils from "./utils.js";
import treeCache from "./tree_cache.js"; import treeCache from "./tree_cache.js";
import renderService from "./render.js"; import renderService from "./render.js";
import zoom from "./zoom.js";
const MIN_ZOOM_LEVEL = 1; const MIN_ZOOM_LEVEL = 1;
const MAX_ZOOM_LEVEL = 6; const MAX_ZOOM_LEVEL = 6;
@ -45,7 +46,6 @@ class NoteDetailBook {
this.$zoomInButton = this.$component.find('.book-zoom-in-button'); this.$zoomInButton = this.$component.find('.book-zoom-in-button');
this.$zoomOutButton = this.$component.find('.book-zoom-out-button'); this.$zoomOutButton = this.$component.find('.book-zoom-out-button');
this.$expandChildrenButton = this.$component.find('.expand-children-button'); this.$expandChildrenButton = this.$component.find('.expand-children-button');
this.setZoom(1);
this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1)); this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1));
this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1)); this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1));
@ -93,6 +93,10 @@ class NoteDetailBook {
} }
setZoom(zoomLevel) { setZoom(zoomLevel) {
if (!(zoomLevel in ZOOMS)) {
zoomLevel = 1;
}
this.zoomLevel = zoomLevel; this.zoomLevel = zoomLevel;
this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL); this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL);
@ -105,6 +109,9 @@ class NoteDetailBook {
async render() { async render() {
this.$content.empty(); this.$content.empty();
const zoomLevel = parseInt(await this.ctx.note.getLabelValue('bookZoomLevel')) || 1;
this.setZoom(zoomLevel);
await this.renderIntoElement(this.ctx.note, this.$content); await this.renderIntoElement(this.ctx.note, this.$content);
} }

View File

@ -31,11 +31,6 @@
font-weight: 600; font-weight: 600;
} }
.link-map-container .floating-button {
position: absolute !important;
z-index: 100;
}
.link-map-active-note { .link-map-active-note {
background-color: var(--accented-background-color) !important; background-color: var(--accented-background-color) !important;
} }

View File

@ -824,10 +824,15 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
z-index: 100; z-index: 100;
} }
.note-detail-book {
height: 100%;
}
.note-detail-book-content { .note-detail-book-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
height: 100%;
align-content: start; align-content: start;
} }

View File

@ -1,5 +1,5 @@
<div class="note-detail-book note-detail-component"> <div class="note-detail-book note-detail-component">
<div class="btn-group floating-button" style="right: 10px; top: 20px;"> <div class="btn-group floating-button" style="right: 20px; top: 20px;">
<button type="button" <button type="button"
class="expand-children-button btn icon-button jam jam-arrows-v" class="expand-children-button btn icon-button jam jam-arrows-v"
title="Expand all children"></button> title="Expand all children"></button>