import server from "./server.js"; import linkService from "./link.js"; import utils from "./utils.js"; import treeCache from "./tree_cache.js"; import renderService from "./render.js"; const MIN_ZOOM_LEVEL = 1; const MAX_ZOOM_LEVEL = 6; const ZOOMS = { 1: { width: "100%", height: "100%" }, 2: { width: "49%", height: "350px" }, 3: { width: "32%", height: "250px" }, 4: { width: "24%", height: "200px" }, 5: { width: "19%", height: "175px" }, 6: { width: "16%", height: "150px" } }; 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-button'); this.$zoomOutButton = this.$component.find('.book-zoom-out-button'); this.$expandChildrenButton = this.$component.find('.expand-children-button'); this.setZoom(1); this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1)); this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1)); this.$expandChildrenButton.click(async () => { for (let i = 1; i < 30; i++) { // protection against infinite cycle const $unexpandedLinks = this.$content.find('.note-book-open-children-button:visible'); if ($unexpandedLinks.length === 0) { break; } for (const link of $unexpandedLinks) { const $card = $(link).closest(".note-book-card"); await this.expandCard($card); } } }); this.$content.on('click', '.note-book-open-children-button', async ev => { const $card = $(ev.target).closest('.note-book-card'); await this.expandCard($card); }); 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(); }); } async expandCard($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')); } 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].width); this.$content.find('.note-book-content').css("max-height", ZOOMS[zoomLevel].height); } 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 = $('