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

本贴最后更新于 249 天前,其中的信息可能已经水流花落

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

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

点击展开文档树 - 链滴

可以通过 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); } })();
  • 思源笔记

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

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

    27193 引用 • 113805 回帖
  • 代码片段

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

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

    245 引用 • 1770 回帖
  • Q&A

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

    10544 引用 • 48013 回帖 • 61 关注
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 更新了该帖

相关帖子

被采纳的回答
优质回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wenbocn

    可能是新版本的问题,在 3.1.19 中,新建一个文档,默认是这样的

    image.png

    1 回复
  • 其他回帖
  • 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
  • wenbocn 8 评论

    可以了,非常感谢!!现在的方式就是我原来预期的结果。👍 👍👍

    今天 @zxkmm 新提出了一种方案,左键点击文档条目,如果文档为空,且有子文档的话,展开不打开;如果文档不为空的话,打开且展开。感觉这个方案也很好,请问您方便添加上这个选项吗?

    另外,能否中键点击最后一级文档,也能够打开?

    1 回复
    已经实现在插件里面了
    zxkmm
    最后一级文档是什么意思?意思是中键无论点击文档还是文件夹都打开?
    wilsons
    @wilsons 是的
    wenbocn
    @wilsons 或者改为,发现文档内容为空,而且有子文档的话,自动设置其图标为文件夹形式。而内容不为空的不更改。只修改文件图标,不更改打开方式,这样可以吗?
    wenbocn
    @wenbocn 都行,看你需要,建议想清楚使用场景后决定哪种方式,不然到时候不能满足需要就白忙活了。
    wilsons
    @wilsons 判断文件是否为空,修改文件图标,不更改打开方式。感觉这种方式好,请大佬帮忙改一下 js,非常感谢 😁
    wenbocn
    @wenbocn 确认下,1. 中键无论点击文档还是文件夹都打开 2. 文件夹被单击的时候,如果文件内容为空,修改为指定的图标,对吗?
    wilsons
    @wilsons 是的是的。
    wenbocn
  • wenbocn 2 评论

    @wilsons 大佬,终于找到该 js 失效的稳定重现方法了。

    如下图,使用“文档树”中的更多按钮,对全部文档进行排序,会导致该 js 失效。单独某个笔记本排序不会出现问题。以前的偶尔失效仍然不知道怎么引起的。希望也是这个原因。

    image.png

    @wilsons 请问是否把该 js 在软件启动或排序完成后,延迟一会再生效,可能就能避免冲突,正常使用了?
    wenbocn
    @wenbocn 确实有这个问题,0.0.3 已修复了,排序不受影响。
    wilsons 1
  • 查看全部回帖

推荐标签 标签

  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 4 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    39 引用 • 167 回帖 • 2 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 281 关注
  • Excel
    31 引用 • 28 回帖
  • C++

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

    108 引用 • 153 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1340 回帖 • 1 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • Google

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

    50 引用 • 192 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 446 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 277 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    188 引用 • 832 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    558 引用 • 676 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 651 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    694 引用 • 537 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    84 引用 • 414 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖
  • abitmean

    有点意思就行了

    39 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 664 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 420 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    212 引用 • 358 回帖
  • Dubbo

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

    60 引用 • 82 回帖 • 624 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 649 关注