登录注册

求 js 代码，只展开当前活动页签的文档树

本贴最后更新于 370 天前，其中的信息可能已经时移俗易

求 js 代码，在使用“始终定位打开的文档”功能时，只展开当前文档的文档树，自动关闭（不展开）其它无关的文档树。例如：

有笔记本 A，内有文档 A1，子文档 A2、子子文档 A3。

有笔记本 B，内有文档 B1，子文档 B2、子子文档 B3。

已将文档 A2、B2 打开，显示在上方页签栏中。

启用“始终定位打开的文档”功能。

点击 A2 页签，左侧文档树自动展开，并定位到 A-A1-A2；A3 列表不展开

点击 B2 页签，左侧文档树自动展开，定位到 B-B1-B2；同时关闭 A-A1-A2 文档树的展开状态，恢复到笔记本 A。也就是仅保留当前活动页签对应的文档树是展开状态，其它文档树分支全部关闭，包括当前活动文档的子文档树。

思源笔记

思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

融合块、大纲和双向链接，重构你的思维。
25850 引用 • 107037 回帖 • 1 关注
Q&A

提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
9924 引用 • 45065 回帖 • 79 关注

1 操作

wenbocn 在 2024-06-02 13:54:35 更新了该帖

wenbocn 11 个月前济南位置

200 悬赏

1 关注

3 收藏

1 操作

35 回帖

1.4k 204 5 858 2 5 337

相关帖子

被采纳的回答

wilsons • 10 个月前 • 1

付费者捐赠者

时隔 1 个多月，你解决了吗？相见即是有缘，看到此贴感觉有些思路，就尝试写了下，实现了这个功能。由于刚接触思源，对思源 api 还不是很了解，所以选择用 js 代码片段实现，纯原生 js 实现，方法比较笨，勉强能用。

不足之处也请论坛里的大佬们多多批评指正！

效果如下：

完整代码如下：


// 等待标签页容器渲染完成后开始监听
whenElementExist('.layout__center').then(async element => {
    // 等待笔记列表加载完毕
    await sleep(40);
    // 监听页签切换事件
    observeTabChanged(element, (tab) => {
        // 折叠所有笔记，然后定位当前笔记
        collapseAllBooksThenFocusCurrentBook(element, tab);
    });
});
// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(element, tab) {
    // 等待激活文档加载完毕
    await whenElementExist(()=>{
        const content = element.querySelector('.layout-tab-container [data-id="'+tab.getAttribute("data-id")+'"]');
        return content && content.getAttribute("data-loading") === "finished";
    });
    // 折叠所有笔记
    document.querySelectorAll("ul.b3-list[data-url]").forEach(async book => {
        const bookName = tab.getAttribute("aria-label")?.split('/')[0];
        if(bookName) {
            // 如果在本笔记中则不再折叠
            const bookText = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
            if(bookText === bookName) {
                return;
            }
        }
        // 折叠笔记
        const bookArrowBtn = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__toggle');
        if (bookArrowBtn && bookArrowBtn.firstElementChild.classList.contains("b3-list-item__arrow--open")) {
            bookArrowBtn.click();
        }
    });
    // 定位当前笔记
    document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}
// 监听页签切换事件
function observeTabChanged(parentNode, callback) {
    // 创建一个回调函数来处理观察到的变化
    const observerCallback = function(mutationsList, observer) {
        // 用常规方式遍历 mutationsList 中的每一个 mutation
        for (let mutation of mutationsList) {
            // 属性被修改
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                const element = mutation.target;
                if (element.tagName.toLowerCase() === 'li' && element.getAttribute('data-type') === 'tab-header' && element.classList.contains('item--focus')) {
                    if(typeof callback === 'function') callback(element);
                }
            }
            // 如果有新的子节点被添加
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'li') {
                        if (node.getAttribute('data-type') === 'tab-header' && node.classList.contains('item--focus')) {
                            if(typeof callback === 'function') callback(node);
                        }
                    }
                });
            }
        }
    };
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(observerCallback);
    // 配置观察器：传递一个对象来指定观察器的行为
    const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
    // 开始观察目标节点
    observer.observe(parentNode, config);
    // 返回一个函数，用于停止观察
    return function stopObserving() {
        observer.disconnect();
    };
}
// 延迟执行
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            let element = null;
            if (typeof selector === 'function') {
                element = selector();
            } else {
                element = document.querySelector(selector);
            }
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}

使用方法：

设置》外观》代码片段》js 中新增加代码片段，然后把上面的代码粘贴过去即可。

优质回帖

wilsons • 10 个月前 • 2
付费者捐赠者

@wenbocn 我已完美实现了不闪动的版本，并且改进了官方定位，在未打开目录树时，左侧 dock 区目录树显示隐藏按钮样式会获取焦点的 bug

效果如下

完整代码如下

由于链滴代码长度有限制，只能放到 jsrun 了。
wilsons • 2 个月前 • 2
付费者捐赠者
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。

其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？

如果想最终焦点落在文档树上，可以在 focusCurrentDocInTrees 函数的开头加上 sleep(120)，等待大纲切换完毕再定位

如果想最终焦点落在文档上，则在 focusCurrentDocInTrees 函数的末尾加上以下代码，定位文档树后恢复文档焦点
```
// 文档树模拟点击后恢复文档窗口（编辑器）的焦点(最终焦点在文档)
whenElementExist('.layout__tab--active .b3-list--background .b3-list-item--focus').then(() => {
    const activepPotyle = document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')||document.querySelector('[data-type="wnd"] .protyle:not(.fn__none)');
    if(activepPotyle) activepPotyle.click();
});
```
这是我修改后的代码，只需要配置这个参数即可

// 最终焦点落在文档树还是文档上？ tree 文档树，doc 文档
const lastFoucsIn = 'doc';

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%8F%AA%E5%B1%95%E5%BC%80%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E9%A1%B5%E7%AD%BE%E7%9A%84%E6%96%87%E6%A1%A3%E6%A0%91.js
player • 11 个月前 • 1 赞同
付费者捐赠者

ToolbarBox

这里有除了自动定位的其他代码。自动定位就做个监听，针对 class layout__wnd--active ，发现有 tab 的变化，就触发一次，locateDoc() 即可。

35 回帖

求 js 代码，只展开当前活动页签的文档树

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册关于

请输入回帖内容 ...

wilsons • 10 个月前 • 1

付费者捐赠者

不足之处也请论坛里的大佬们多多批评指正！

效果如下：

完整代码如下：


// 等待标签页容器渲染完成后开始监听
whenElementExist('.layout__center').then(async element => {
    // 等待笔记列表加载完毕
    await sleep(40);
    // 监听页签切换事件
    observeTabChanged(element, (tab) => {
        // 折叠所有笔记，然后定位当前笔记
        collapseAllBooksThenFocusCurrentBook(element, tab);
    });
});
// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(element, tab) {
    // 等待激活文档加载完毕
    await whenElementExist(()=>{
        const content = element.querySelector('.layout-tab-container [data-id="'+tab.getAttribute("data-id")+'"]');
        return content && content.getAttribute("data-loading") === "finished";
    });
    // 折叠所有笔记
    document.querySelectorAll("ul.b3-list[data-url]").forEach(async book => {
        const bookName = tab.getAttribute("aria-label")?.split('/')[0];
        if(bookName) {
            // 如果在本笔记中则不再折叠
            const bookText = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
            if(bookText === bookName) {
                return;
            }
        }
        // 折叠笔记
        const bookArrowBtn = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__toggle');
        if (bookArrowBtn && bookArrowBtn.firstElementChild.classList.contains("b3-list-item__arrow--open")) {
            bookArrowBtn.click();
        }
    });
    // 定位当前笔记
    document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}
// 监听页签切换事件
function observeTabChanged(parentNode, callback) {
    // 创建一个回调函数来处理观察到的变化
    const observerCallback = function(mutationsList, observer) {
        // 用常规方式遍历 mutationsList 中的每一个 mutation
        for (let mutation of mutationsList) {
            // 属性被修改
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                const element = mutation.target;
                if (element.tagName.toLowerCase() === 'li' && element.getAttribute('data-type') === 'tab-header' && element.classList.contains('item--focus')) {
                    if(typeof callback === 'function') callback(element);
                }
            }
            // 如果有新的子节点被添加
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'li') {
                        if (node.getAttribute('data-type') === 'tab-header' && node.classList.contains('item--focus')) {
                            if(typeof callback === 'function') callback(node);
                        }
                    }
                });
            }
        }
    };
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(observerCallback);
    // 配置观察器：传递一个对象来指定观察器的行为
    const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
    // 开始观察目标节点
    observer.observe(parentNode, config);
    // 返回一个函数，用于停止观察
    return function stopObserving() {
        observer.disconnect();
    };
}
// 延迟执行
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            let element = null;
            if (typeof selector === 'function') {
                element = selector();
            } else {
                element = document.querySelector(selector);
            }
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}

使用方法：

设置》外观》代码片段》js 中新增加代码片段，然后把上面的代码粘贴过去即可。

4 回复

其他回帖
wilsons • 10 个月前
付费者捐赠者

你可以录屏看看，我这边并没有发现你说的问题，可能和你的样式有关。

看我这边效果

仔细看，你会发现，当文档树隐藏时，切换标签，文档树显示隐藏按钮的焦点会闪动下，这就是切换标签时，默认的官方定位会让这个按钮聚焦，而我动态把这个聚焦给去掉了。

1 回复

wilsons • 10 个月前

付费者捐赠者

把这个


// 定位当前笔记
document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();

改为下面这个就好了


// 定位当前笔记
    if(document.querySelector('#dockLeft span[data-type="file"].dock__item--active')) {
        document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
    }

不过，我测试下来，还是会闪动的。

wilsons • 2 个月前 • 2
付费者捐赠者
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。

其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？

如果想最终焦点落在文档树上，可以在 focusCurrentDocInTrees 函数的开头加上 sleep(120)，等待大纲切换完毕再定位

如果想最终焦点落在文档上，则在 focusCurrentDocInTrees 函数的末尾加上以下代码，定位文档树后恢复文档焦点
```
// 文档树模拟点击后恢复文档窗口（编辑器）的焦点(最终焦点在文档)
whenElementExist('.layout__tab--active .b3-list--background .b3-list-item--focus').then(() => {
    const activepPotyle = document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')||document.querySelector('[data-type="wnd"] .protyle:not(.fn__none)');
    if(activepPotyle) activepPotyle.click();
});
```
这是我修改后的代码，只需要配置这个参数即可

// 最终焦点落在文档树还是文档上？ tree 文档树，doc 文档
const lastFoucsIn = 'doc';

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%8F%AA%E5%B1%95%E5%BC%80%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E9%A1%B5%E7%AD%BE%E7%9A%84%E6%96%87%E6%A1%A3%E6%A0%91.js
2 回复

1 操作
wilsons 在 2025-03-14 20:25:34 更新了该回帖
查看全部回帖

wenbocn

济南

回帖

436

帖子

积分

16284

求 js 代码，只展开当前活动页签的文档树

相关帖子

关于折叠的几个性能问题

求助怎么把 sql 查询到的数据列表填入 echarts 的饼图键值对里啊？

统信 uos arm linux 系统同步提示云端数据损坏

config.json 用户配置中密码竟然是明文密码，没有加密

请问如何使编辑界面固定为 A4 宽度？

用百度网盘进行思源笔记数据同步

思源手机端导入 ZIP 失败

欢迎来到这里！

近期热议

推荐标签标签

最新标签

求 js 代码，只展开当前活动页签的文档树

相关帖子

关于折叠的几个性能问题

求助怎么把 sql 查询到的数据列表 填入 echarts 的饼图键值对里啊？

统信 uos arm linux 系统同步提示云端数据损坏

config.json 用户配置中密码竟然是明文密码，没有加密

请问如何使编辑界面固定为 A4 宽度？

用百度网盘进行思源笔记数据同步

思源手机端导入 ZIP 失败

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

求助怎么把 sql 查询到的数据列表填入 echarts 的饼图键值对里啊？

推荐标签标签