[js] 求助 js 代码,左键展开文档树,中键打开文档

思源假子文件夹插件 视频教程 - 链滴

一个小建议:能否在打开页面的同时,自动展开该页面的子页面 - 链滴

点击展开文档树 - 链滴

可以通过 JS 代码实现鼠标中键展开文档吗? - 链滴

基于以上帖子及下面的“中键展开文档树”的代码,哪位大佬能帮忙写一个 js 代码,实现以下功能:

如果当前文档下面含有子文档:

  1. 鼠标左键文档树条目,展开文档树(显示该文档下的子文档),不打开文档
  2. 鼠标中键文档树条目,不展开文档树,打开文档(原左键的默认功能)

先感谢 @zxkmm,@Undii,@wilsons 等大佬的相关插件、代码和热心帮助!

// 中键展开文档树:基于https://ld246.com/article/1682476267736 (function(){ let g_reset = setInterval(main, 2000); function main() { if (document.querySelector('.sy__file')) { clearInterval(g_reset); }else{ return false; } document.querySelector('.sy__file').addEventListener('mousedown', event => { if (event.button != 1) return; let notTitleFlag = false; if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true; let target = event.target.parentNode; let temp = event.target; //console.log("0426",event); for (let i = 0; i < 4 && temp; i++) { if (temp?.getAttribute("data-type") == "navigation-file" || temp?.getAttribute("data-type") == "navigation-root") { target = temp; break; } temp = temp?.parentNode; } //console.log("0426target", target); if (target?.getAttribute("data-type") == "navigation-file" || target?.getAttribute("data-type") == "navigation-root") { const b3ListItemToggle = target.querySelector('.b3-list-item__toggle'); const title = target.querySelector('.b3-list-item__text'); if (b3ListItemToggle.classList.contains('fn__hidden')) return; event.preventDefault(); b3ListItemToggle.click(); if (event.ctrlKey) { title.click(); } } }, true); } })();
  • 思源笔记

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

    融合块、大纲和双向链接,重构你的思维。

    24892 引用 • 102480 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    133 引用 • 900 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9458 引用 • 43092 回帖 • 108 关注
4 操作
wilsons 在 2025-01-13 09:04:54 更新了该帖
wenbocn 在 2025-01-12 23:03:59 更新了该帖
wenbocn 在 2025-01-09 15:21:16 更新了该帖
wenbocn 在 2025-01-09 15:04:16 更新了该帖

相关帖子

被采纳的回答
优质回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Floria233 1 评论

    感谢,这个关注好几天了,确实很有用。我也有差不多类似的需求,只是之前一直偷懒没有多想(懒到宁愿一直用文档树那个小折叠号,一直都这么麻烦),而且也描绘不清楚这个痛点究竟该怎么解决,800 分太壕了,感谢发帖的大大和回帖的大大 😄 造福一众小白啊哈哈

    壕无人性
    EmberSky
  • 其他回帖
  • wilsons 2 5 评论

    已经实现了,代码 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%B7%A6%E4%BE%A7%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E9%94%AE%E6%89%93%E5%BC%80%E5%92%8C%E7%82%B9%E5%87%BB%E5%B1%95%E5%BC%80.js

    pc 版 中键打开,单击展开
    触屏版 长按打开,点击展开


    @zxkmm 我发现一个方便判断是否空文件的 api /api/block/getTreeStat 传入文档 id 即可,返回值有个字段 runeCount 代表字符个数的意思 0 是空文档,大于 0 非空文档

    1 回复
    感谢,等我油孔对比下哪种比较快
    zxkmm
    快慢这个要看思源 api 实现了,不过,这个比较精准 。其实之前还想到一种方法,就是通过/api/filetree/getDoc 获取文档的内容,由于这个 api 是动态加载,一般不会加载太多内容,然后空文档的时候,这个返回结果的 content 字段长度是 239,可以依据这长度判断,比如大于 500 铁定非空文档,小于 500 的话,就用 lute 把块转换为 markdown 去掉换行和{: xxx}标记后,看内容是否为空,为空则是空文档,为什么选 500,为了兼容性更好,也可以直接用 239 判断,但不知道不同版本是否有出入。
    wilsons 1
    @wilsons 话说 runeCount 和 wordCount 有啥区别 (b.t.w.我对比了下发现 sql 和 api 速度没有太多差别)
    zxkmm
    @zxkmm runeCount 是字符统计,比如 hello 有 5 个字符;wordCount 是字统计,英文是单词,中文应该是一个汉字,比如 Hello, 世界! 😊 是 7 个字,hello 是 1 个,逗号,空格,感叹号,表情各 1 个,世界 2 个,共 7 个,在编辑器里可以测试下。另外,我刚才大致看了下 getTreeStat 是一次性读入 sy 文件到内存,文件大了应该有性能瓶颈,还是建议使用 getDoc api 这个是动态加载按需加载,就是实现起来复杂了些。
    wilsons 1
    @wilsons 感谢大佬
    zxkmm
  • zxkmm 1 2 评论

    可以尝试一下找个 ai,把我的插件源码全都复制过去然后让它加功能就行,插件的功能性代码全都在 index.ts,我感觉 ai 会写 sql,我不会写所以没办法查子文档

    我感觉最理想的设计应该是:点之后如果这个文档是空的,就作展开操作,否则如果文档不是空的,就作打开文档操作。但还是因为我不会写 sql 所以没办法写这个功能

    1 回复
    大佬,判断是否有子文档不用写 SQL 也可以,1,data-count 属性判断(貌似最新版才行,3.1.14 后是可以,旧版不支持实时更新,需要刷新才行),2,.b3-list-item__arrow 是否有小箭头判断
    wilsons 2
    @wilsons 👍🏻👍🏻
    wenbocn
  • wenbocn

    赞,太给力了 👍 👍👍

    一个小问题,按中键打开文档时,能否取消原中键的滚动功能?

    7ea4729d3a5c9b1e9d86e6afcacc365.jpg

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Outlook
    1 引用 • 5 回帖 • 2 关注
  • Anytype
    3 引用 • 31 回帖 • 15 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Word
    13 引用 • 40 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    133 引用 • 900 回帖 • 1 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 678 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 2 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 443 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    169 引用 • 1527 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 612 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 6 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 28 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 176 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 4 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 88 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 702 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • sts
    2 引用 • 2 回帖 • 223 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 806 关注