import server from "./server.js"; import linkService from "./link.js"; import utils from "./utils.js"; import treeCache from "./tree_cache.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 { /** * @param {TabContext} ctx */ 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)); this.$content.on('click', '.note-book-open-children-button', async ev => { const $card = $(ev.target).closest('.note-book-card'); const noteId = $card.attr('data-note-id'); const note = await treeCache.getNote(noteId); $card.find('.note-book-open-children-button').hide(); $card.find('.note-book-hide-children-button').show(); await this.renderIntoElement(note, $card.find('.note-book-children-content')); }); this.$content.on('click', '.note-book-hide-children-button', async ev => { const $card = $(ev.target).closest('.note-book-card'); $card.find('.note-book-open-children-button').show(); $card.find('.note-book-hide-children-button').hide(); $card.find('.note-book-children-content').empty(); }); } 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-card').css("flex-basis", ZOOMS[zoomLevel] + "%"); } async render() { this.$content.empty(); await this.renderIntoElement(this.ctx.note, this.$content); } async renderIntoElement(note, $container) { for (const childNote of await note.getChildNotes()) { const $card = $('