expand all children button

This commit is contained in:
zadam 2019-10-05 11:22:42 +02:00
parent 7c54ba63ce
commit 59d1cb1833
2 changed files with 36 additions and 10 deletions

View File

@ -42,22 +42,34 @@ class NoteDetailBook {
this.ctx = ctx; this.ctx = ctx;
this.$component = ctx.$tabContent.find('.note-detail-book'); this.$component = ctx.$tabContent.find('.note-detail-book');
this.$content = this.$component.find('.note-detail-book-content'); this.$content = this.$component.find('.note-detail-book-content');
this.$zoomInButton = this.$component.find('.book-zoom-in'); this.$zoomInButton = this.$component.find('.book-zoom-in-button');
this.$zoomOutButton = this.$component.find('.book-zoom-out'); this.$zoomOutButton = this.$component.find('.book-zoom-out-button');
this.$expandChildrenButton = this.$component.find('.expand-children-button');
this.setZoom(1); 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));
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 => { this.$content.on('click', '.note-book-open-children-button', async ev => {
const $card = $(ev.target).closest('.note-book-card'); 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(); await this.expandCard($card);
$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 => { this.$content.on('click', '.note-book-hide-children-button', async ev => {
@ -70,6 +82,16 @@ class NoteDetailBook {
}); });
} }
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) { setZoom(zoomLevel) {
this.zoomLevel = zoomLevel; this.zoomLevel = zoomLevel;

View File

@ -1,11 +1,15 @@
<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: 10px; top: 20px;">
<button type="button" <button type="button"
class="book-zoom-in btn icon-button jam jam-search-plus" class="expand-children-button btn icon-button jam jam-arrows-v"
title="Expand all children"></button>
<button type="button"
class="book-zoom-in-button btn icon-button jam jam-search-plus"
title="Zoom In"></button> title="Zoom In"></button>
<button type="button" <button type="button"
class="book-zoom-out btn icon-button jam jam-search-minus" class="book-zoom-out-button btn icon-button jam jam-search-minus"
title="Zoom Out"></button> title="Zoom Out"></button>
</div> </div>