[Plugin] Navigation Bar

[129s]

Features:

• Breadcrumb Navigation: win-explorer-like direction view
• Quick Search: click on the blank area or search button
• History Navigation: chrome-like navigation through note history
• Home Button: quick access to note labeled with #home
• Refresh Button: reload current note content
• Star Button: ddd/remove #star label to the note (another developing plugin , with an experimental version attached in the end)

i have finetuned the native layout to make it more integrated.

How to use:

1. copy paste into a code note
2. set note type to JS frontend
3. add #widget label

class NavigationBar extends api.NoteContextAwareWidget {
    get widgetName() {
        return "navigationBar";
    }

    get parentWidget() {
        return "center-pane";
    }

    get position(){return 0;}

    async doRender() {
        this.contentSized = true;
    
        this.$widget = $(`
            <div id="nav-bar-container">
                <!-- 左侧按钮组 -->
                <div id="nav-buttons-left">
                    <button id="nav-btn-back" class="nav-btn" title="Back"><i class='bx bx-left-arrow-alt'></i></button>
                    <button id="nav-btn-forward" class="nav-btn" title="Forward"><i class='bx bx-right-arrow-alt'></i></button>
                    <button id="nav-btn-refresh" class="nav-btn" title="Refresh"><i class='bx bx-refresh'></i></button>
                    <button id="nav-btn-home" class="nav-btn" title="Home"><i class='bx bx-home'></i></button>
                </div>
    
                <!-- 中间主区域 -->
                <div id="nav-main-area">
                    <!-- 左右图标 -->
                    <i id="nav-search-icon" class='bx bx-search nav-btn'></i>
                
                    <!-- 视图容器 -->
                    <div id="nav-view-container">
                        <!-- 状态1: 面包屑视图 -->
                        <div id="nav-breadcrumb-view">
                            <!-- 面包屑内容 -->
                        </div>
                
                        <!-- 状态2: 搜索输入视图 -->
                        <div id="nav-input-view" class="hidden">
                            <input type="text" id="nav-bar-input" autocomplete="off">
                        </div>
                    </div>
                    
                    <i id="nav-star-icon" class='bx bx-star nav-btn' title="Add to Starred"></i>
                    
                    <!-- 搜索结果下拉菜单 -->
                    <div id="nav-bar-dropdown" class="ck ck-balloon-panel ck-mention-balloon nav-bar-hidden">
                        <!-- 搜索结果将在这里显示 -->
                    </div>
                </div>
        `);
    
        this.$widget.append(`
            <style>
                /* --- 外部容器和布局 --- */
                #nav-bar-container {
                    position: relative;
                    padding: 8px 16px;
                    min-height: 48px;
                    display: flex;
                    align-items: center;
                    gap: 8px; /* 按钮和主区域的间距 */
                    background-color: var(--main-background-color);
                    flex-shrink: 0;
                }
    
                /* --- 左侧按钮 --- */
                #nav-buttons-left {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
                
                .nav-btn {
                    background: transparent;
                    border: none;
                    color: var(--muted-text-color);
                    font-size: 22px;
                    
                    width: 26px;
                    height: 26px;
                    padding: 0;
                    border-radius: 50%;
                
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0; /* 防止按钮在 flex 布局中被压缩 */
                }

                .nav-btn:hover {
                    background-color: var(--more-accented-background-color);
                    color: var(--main-text-color);
                }
                .nav-btn:disabled {
                    opacity: 0.4;
                    cursor: not-allowed;
                }
    
                /* --- 中间主区域 --- */
                #nav-main-area {
                    flex-grow: 1;
                    position: relative;
                    display: flex;
                    align-items: center;
                    border: 1px solid var(--main-border-color);
                    background-color: var(--main-background-color);
                    
                    height: 36px;
                    border-radius: 18px;
                    
                    padding: 0 8px;
                    gap: 4px;
                }

                #nav-main-area:focus-within {
                    border-color: var(--main-border-color-active);
                }

                #nav-view-container {
                    flex-grow: 1;
                    overflow: hidden; /* 防止内容溢出 */
                }
    
                /* --- 面包屑与输入框视图 --- */
                #nav-breadcrumb-view, #nav-input-view {
                    width: 100%;
                }
                .hidden {
                    display: none !important;
                }

                /* --- 面包屑视图样式 --- */
                #nav-breadcrumb-view {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .breadcrumb-item, .breadcrumb-current {
                    padding: 2px 8px;
                    border-radius: 24px;
                }
                .breadcrumb-item, .breadcrumb-current {
                    cursor: pointer;
                }
                .breadcrumb-item:hover, .breadcrumb-separator:hover, .breadcrumb-current:hover {
                    background-color: var(--more-accented-background-color);
                }
                .breadcrumb-separator {
                    font-size: 16px;
                    color: var(--muted-text-color);
                    padding: 4px 2px;
                    border-radius: 4px;
                    border-radius: 24px;
                    cursor: pointer;
                }


                #nav-bar-input {
                    width: 100%;
                    height: 34px;
                    
                    box-sizing: border-box;
                    border: none;
                    border-radius: 24px;
                    background-color: transparent;
                    color: var(--main-text-color);
                }
                #nav-bar-input:focus {
                    outline: none;
                }

                #nav-star-icon.bxs-star { /* 收藏后的实心样式 */
                    color: #f5c518; 
                }
                
                #nav-breadcrumb-view, #nav-input-view {
                    width: 100%;
                    flex-grow: 1;
                }

                /* --- 下拉菜单 --- */
                #nav-bar-dropdown {
                    position: absolute;
                    top: calc(100% + 4px); /* 定位在主区域下方 */
                    left: 0;
                    right: 0;
                    z-index: 1050;
                    max-height: 400px;
                    overflow-y: auto;
                    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
                }
                .nav-bar-hidden {
                    display: none;
                }
                .nav-bar-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 8px 12px;
                    cursor: pointer;
                    border-bottom: 1px solid var(--main-border-color-light);
                }
                .nav-bar-item:last-child { border-bottom: none; }
                .nav-bar-item:hover, .nav-bar-item.selected {
                    background-color: var(--more-accented-background-color);
                }
                .nav-bar-item-title { font-weight: bold; }
                .nav-bar-item-path {
                    font-size: 0.85em;
                    color: var(--muted-text-color);
                    margin-left: 15px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }


                /* tab栏调整 */
                .tab-row-widget-scrolling-container {
                    margin:0;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end; 
                }
                
                .note-tab.type-code.mime-application-javascript {
                    transform: none;
                    <!-- 我不知道为什么原来的这里有1px的偏移 -->
                }
                
                .tab-row-widget-container {
                    display: flex;
                    align-items: bottom;
                }
                
                .tab-row-widget-container > .note-tab[active] > .note-tab-wrapper {
                    border-radius: 0px 0px 0px 0px;
                    box-shadow: none;
                    background-color: var(--main-background-color);
                    border-bottom-color: transparent !important;
                }
            </style>
        `);
        
        return this.$widget;
    }

    async initialRenderCompleteEvent() {
        
        // 缓存组件
        this.$input = this.$widget.find('#nav-bar-input');
        this.$dropdown = this.$widget.find('#nav-bar-dropdown');
        this.$breadcrumbView = this.$widget.find('#nav-breadcrumb-view');
        this.$inputView = this.$widget.find('#nav-input-view');
        this.$searchIcon = this.$widget.find('#nav-search-icon');
        this.$btnRefresh = this.$widget.find('#nav-btn-refresh');
        this.$btnHome = this.$widget.find('#nav-btn-home');
        this.$starIcon = this.$widget.find('#nav-star-icon');
        this.$btnBack = this.$widget.find('#nav-btn-back');
        this.$btnForward = this.$widget.find('#nav-btn-forward');

        
        this.debounceTimeout = null;
        this.selectedIndex = -1;
        this.isSearchMode = false;

        // --- 事件监听 ---

        // 监听输入事件
        this.$input.on('input', () => {
            clearTimeout(this.debounceTimeout);
            this.debounceTimeout = setTimeout(() => this.updateDropdown(), 150); // 防抖处理
        });

        // 监听键盘事件
        this.$input.on('keydown', e => this.handleKeyDown(e));

        // 监听下拉菜单的点击事件
        this.$dropdown.on('click', '.nav-bar-item', e => {
            const noteId = $(e.currentTarget).data('note-id');
            this.navigateTo(noteId);
        });

        // 缓存引用，并使用事件委托来处理点击事件
        this.$breadcrumbView.on('click', '.breadcrumb-item', e => {
            const noteId = $(e.currentTarget).data('note-id');
            if (noteId) {
                this.navigateTo(noteId);
            }
        });
        
        this.$breadcrumbView.on('click', '.breadcrumb-separator', e => {
            e.stopPropagation(); // 防止事件冒泡触发其他点击
            const noteId = $(e.currentTarget).data('note-id');
            if (noteId) {
                this.showChildrenDropdown(noteId, $(e.currentTarget));
            }
        });
        // 点击空白处或搜索图标，进入搜索模式
        this.$breadcrumbView.on('click', e => {
            // 确保点击的是容器本身，而不是子元素
            if (e.target === this.$breadcrumbView[0]) {
                this.enterSearchMode();
            }
        });
        this.$searchIcon.on('click', () => this.enterSearchMode());
        
        // 在输入框中按 Esc 退出搜索模式
        this.$input.on('keydown', e => {
            if (e.key === 'Escape') {
                this.exitSearchMode();
            }
        });

        // --- 刷新按钮 ---
        this.$btnRefresh.on('click', () => {
            if (this.currentNote) {
                api.reloadNotes([this.currentNote.noteId]);
            }
        });
        
        // --- 主页按钮 ---
        this.$btnHome.on('click', async () => {
            const homeNote = await api.runOnBackend(() => {
                const note = api.getNoteWithLabel('home');
                return note ? { noteId: note.noteId } : null;
            });
        
            if (homeNote && homeNote.noteId) {
                this.navigateTo(homeNote.noteId);
            } else {
                api.showError('No note with #home label found.');
            }
        });

        
        // --- 收藏按钮 ---
        this.$starIcon.on('click', async () => {
            if (!this.currentNote) return;
        
            const noteId = this.currentNote.noteId;
            const hasStar = await this.currentNote.hasLabel('star');
        
            if (hasStar) {
                // --- 移除标签 ---
                await api.runOnBackend((noteId, labelName) => {
                    const note = api.getNote(noteId);
                    if (note) {
                        note.removeLabel(labelName);
                    }
                }, [noteId, 'star']);
                
                // 更新前端UI
                this.$starIcon.removeClass('bxs-star').addClass('bx-star');
                this.$starIcon.attr('title', 'Add to Starred');
        
            } else {
                await api.runOnBackend((noteId, labelName) => {
                    const note = api.getNote(noteId);
                    if (note) {
                        note.addLabel(labelName);
                    }
                }, [noteId, 'star']);
                
                // 更新前端UI
                this.$starIcon.addClass('bxs-star').removeClass('bx-star');
                this.$starIcon.attr('title', 'Remove from Starred');
            }
        });

        // --- 前进/后退按钮点击事件 ---
        this.$btnBack.on('click', () => api.triggerCommand("backInNoteHistory"));
        this.$btnForward.on('click', () => api.triggerCommand("forwardInNoteHistory"));
        
        // 点击页面其他地方时，退出
        $(document).on('click', e => {
            if (!this.$widget.is(e.target) && this.$widget.has(e.target).length === 0) {
                this.hideDropdown();
                if (this.isSearchMode) {
                    this.exitSearchMode();
                }
            }
        });

    }

    
    async refreshWithNote(note) {
        this.currentNote = note;
        this.exitSearchMode();
    
        if (this.$input) {
            this.$input.val('');
            this.hideDropdown();
        }
    
        const ancestors = await api.runOnBackend((noteId) => {
            const note = api.getNote(noteId);
            if (!note) return [];
    
            return note.getAncestors().map(ancestor => ({
                noteId: ancestor.noteId,
                title: ancestor.title
            }));
        }, [note.noteId]);

        ancestors.reverse(); // 这个列表本来是反的
        
        // --- 生成并存储路径字符串 ---
        const pathParts = ancestors.map(a => a.title);
        pathParts.push(note.title);
        this.currentPathString = pathParts.join(' / ');
        this.$breadcrumbView.empty();
    
        ancestors.forEach(ancestorNote => {
            const $item = $(`<span class="breadcrumb-item" data-note-id="${ancestorNote.noteId}">${ancestorNote.title}</span>`);
            const $separator = $(`<i class='bx bx-chevron-right breadcrumb-separator' data-note-id="${ancestorNote.noteId}"></i>`);
            this.$breadcrumbView.append($item).append($separator);
        });
    
        const $currentItem = $(`<span class="breadcrumb-current">${note.title}</span>`);
        this.$breadcrumbView.append($currentItem);

        // 更新star状态
        const hasStar = await note.hasLabel('star');
        if (hasStar) {
            this.$starIcon.addClass('bxs-star').removeClass('bx-star');
            this.$starIcon.attr('title', 'Remove from Starred');
        } else {
            this.$starIcon.removeClass('bxs-star').addClass('bx-star');
            this.$starIcon.attr('title', 'Add to Starred');
        }
        
        // TODO: 更新前进后退按钮的状态
    }


    // --- 核心功能函数 ---
    async updateDropdown() {
        const query = this.$input.val().trim();

        if (!query) {
            this.hideDropdown();
            return;
        }
        
        const results = await api.runOnBackend(    
            (query) => {    
                const notes = api.searchForNotes(query, {     
                    fastSearch: true,    
                    limit: 10    
                });    
                    
                return notes.map(note => {  
                    const parentNotes = note.getParentNotes();  
                    const parentTitle = parentNotes.length > 0 ? parentNotes[0].title : '';  
                      
                    return {  
                        noteId: note.noteId,    
                        title: note.title,    
                        path: parentTitle,
                        type: note.type,  
                        icon: note.getIcon()  
                    };  
                });    
            },    
            [query]    
        );
      
    // console.log("searchForNotes: ",query,results);  
      
    this.$dropdown.empty();  
    this.selectedIndex = -1;  
      
    if (results.length > 0) {  
        results.forEach(note => {  
            // console.log(note);  
            const item = $(`  
                <div class="nav-bar-item" data-note-id="${note.noteId}" style="display: flex; justify-content: space-between; align-items: center; padding: 8px;">  
                    <div style="display: flex; align-items: center; flex: 1;">  
                        <i class="${note.icon}" style="margin-right: 8px;"></i>  
                        <span class="nav-bar-item-title">${note.title}</span>  
                    </div>  
                    <span class="nav-bar-item-path" style="color: #666; font-size: 0.9em; margin-left: 16px;">${note.path}</span>  
                </div>  
            `);  
            this.$dropdown.append(item);  
        });  
        this.showDropdown();  
    } else {  
        this.hideDropdown();  
    }
    }

    enterSearchMode() {
        if (this.isSearchMode) return;
        this.isSearchMode = true;
    
        // 1. 切换视图
        this.$breadcrumbView.addClass('hidden');
        this.$inputView.removeClass('hidden');
    
        // 2. 输入框显示当前路径
        this.$input.val(this.currentPathString);
    
        // 3. 聚焦并全选
        setTimeout(() => { // 使用setTimeout确保元素可见后再操作
            this.$input.focus().select();
        }, 0);
    }
    
    exitSearchMode() {
        if (!this.isSearchMode) return;
        this.isSearchMode = false;
    
        // 切换视图
        this.$inputView.addClass('hidden');
        this.$breadcrumbView.removeClass('hidden');
        
        // 清理工作
        this.$input.val('');
        this.hideDropdown();
    }

    // 下拉列表的键盘操作
    handleKeyDown(e) {
        const items = this.$dropdown.find('.nav-bar-item');
        if (items.length === 0) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            this.selectedIndex = (this.selectedIndex + 1) % items.length;
            this.updateSelection(items);
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            this.selectedIndex = (this.selectedIndex - 1 + items.length) % items.length;
            this.updateSelection(items);
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (this.selectedIndex >= 0) {
                const noteId = $(items[this.selectedIndex]).data('note-id');
                this.navigateTo(noteId);
            }
        } else if (e.key === 'Escape') {
            this.hideDropdown();
        }
    }

    updateSelection(items) {
        items.removeClass('selected');
        const selectedItem = $(items[this.selectedIndex]);
        selectedItem.addClass('selected');
        // 确保选中的项目在可视区域内
        this.$dropdown.scrollTop(selectedItem.position().top + this.$dropdown.scrollTop() - this.$dropdown.height() / 2);
    }

    navigateTo(noteId) {
        if (noteId) {
            api.activateNote(noteId);
        }
    }

    async showChildrenDropdown(parentId, $targetElement) {
        const children = await api.runOnBackend((parentId) => {
            const parent = api.getNote(parentId);
            if (!parent) return [];
            // 过滤掉内部笔记并排序
            return parent.getChildNotes()
                .filter(child => !child.title.startsWith("_lb_"))
                .sort((a, b) => a.title.localeCompare(b.title))
                .map(child => ({
                    noteId: child.noteId,
                    title: child.title,
                    icon: child.getIcon()
                }));
        }, [parentId]);
    
        this.$dropdown.empty();
    
        if (children.length > 0) {
            children.forEach(child => {
                const item = $(`
                    <div class="nav-bar-item" data-note-id="${child.noteId}">
                        <div style="display: flex; align-items: center;">
                            <i class="${child.icon}" style="margin-right: 8px;"></i>
                            <span class="nav-bar-item-title">${child.title}</span>
                        </div>
                    </div>
                `);
                this.$dropdown.append(item);
            });
    
            // 定位并显示下拉菜单
            const targetOffset = $targetElement.position();
            this.$dropdown.css({
                top: targetOffset.top + $targetElement.outerHeight() + 2,
                left: targetOffset.left,
                right: 'auto',
                width: '250px'
            });
            this.showDropdown();
    
        } else {
            this.hideDropdown();
        }
    }



    showDropdown() {
    this.$dropdown.addClass('ck-balloon-panel_visible');
    this.$dropdown.removeClass('nav-bar-hidden');
    }
    
    hideDropdown() {
        this.$dropdown.removeClass('ck-balloon-panel_visible');
        this.selectedIndex = -1;
    }


}

module.exports = new NavigationBar();

Starred Notes

class StarIconWidget extends api.NoteContextAwareWidget {
    get parentWidget() { return 'left-pane'; }

    doRender() {
        this.$widget = $('<div>').addClass('star-icon-widget-placeholder').hide();
        return this.$widget;
    }

    initialRenderCompleteEvent() {
        this.initializeStarLogic();
    }

    async initializeStarLogic() {
        this.tree = await new Promise(resolve => {
            const interval = setInterval(() => {
                const $tree = $('.tree');
                if ($tree.length > 0) {
                    const treeInstance = $.ui.fancytree.getTree($tree[0]);
                    if (treeInstance && treeInstance.rootNode) {
                        clearInterval(interval);
                        resolve(treeInstance);
                    }
                }
            }, 100);
        });

        this.originalRenderNode = this.tree.options.renderNode;

        this.tree.options.renderNode = (event, data) => {
            if (this.originalRenderNode) {
                this.originalRenderNode.call(this.tree, event, data);
            }
        
            const noteId = data.node.data.noteId;
            if (!noteId) return;
        
            const $nodeSpan = $(data.node.span);
            const starIconClass = 'custom-star-icon';
        
            if ($nodeSpan.data('star-update-in-progress')) {
                return;
            }
            $nodeSpan.data('star-update-in-progress', true);
            
            $nodeSpan.find(`.${starIconClass}`).remove();
        
            api.getNote(noteId).then(note => {
                if (note && note.hasLabel('star')) {
                    const $star = $('<span class="note-icon bx bxs-star"></span>')
                        .addClass(starIconClass)
                        .css({ 'color': '#FDD835', 'margin': '4px' });
                    $nodeSpan.append($star);
                }
            }).finally(() => {
                $nodeSpan.data('star-update-in-progress', false);
            });
        };
        this.tree.visit(node => node.render());
    }

    entitiesReloadedEvent() {
        if (this.tree) {
            setTimeout(() => this.tree.visit(node => node.render()), 200);
        }
    }

    doDestroy() {
        if (this.tree && this.originalRenderNode) {
            this.tree.options.renderNode = this.originalRenderNode;
            this.tree.visit(node => node.render());
        }
        super.doDestroy();
    }
}

module.exports = new StarIconWidget();

[eliandoran]

Looks pretty cool!

[hulmgulm]

@eliandoran I noticed a strange thing with the getAncestors API used by this widget. Let's take the note "Level details" with the tree leading back to the root note called "Notizen":

Looking at the output of this backend call in the widget


you'll see that between the "Warzone" note and the "Spiele" note are a lot of hidden notes. I have to add, that the "Warzone" note has the bookmark property set, but why adds this a whole bunch of hidden notes, also leading to a wrong order of the parent notes?

[hulmgulm]

This is the path displayed:

[eliandoran]

@hulmgulm , if you bookmark a note the note and its subtree will be cloned into the hidden subtree.
getAncestors() does not provide any guarantee of order, it simply returns a list of all the ancestors of the note; so in this sense, it's correct.

However, the issue is that getAncestors() is being used to display the path of the note. The path of the note cannot be read from a BNote since a note can be placed in multiple branches. Instead the BBranch needs to be obtained and used.

See the "Note paths" ribbon tab for reference.

[hulmgulm]

I really like these two widgets. What I do not fully understand is, what I can do with the stars. Will it only show them with a star in the dropdowns or the tree or is there a list of stared notes which I can use to open them quicky? Or something completely different I missed?

[129s]

unfortunately,it's just a decoration now. in fact , i just do this for demonstrating a handy button to add a specific label like "star". i am not sure if it's necessary to make an extra list displaying these notes because you can view them by simply searching that label.but i have got some other cool ideas with the stars. they will be included in a series of widgets, which i called them "treeview overhaul".