[js] 右键文档树定位按钮时先折叠再定位

本贴最后更新于 444 天前,其中的信息可能已经物是人非

效果是右键文档树上的定位按钮时,先折叠其他打开的笔记本,再定位到当前文档

image.png

JS 代码片段:

设置开头的变量为 true 时是“左键定位, 右键折叠定位”,为 false 时互换为“左键折叠定位, 右键定位”

// 右键文档树定位按钮时先折叠再定位 JS片段
// author by JeffreyChen https://ld246.com/article/1727980528164
(function() {
  // 设置为 true 时是“左键定位, 右键折叠定位”,为 false 时互换为“左键折叠定位, 右键定位”
  const originalBehavior = true;

  function addFocusHandler() {
    const MAX_RETRIES = 100; // 最大重试次数
    const RETRY_INTERVAL = 200; // 重试间隔(毫秒)
    let retryCount = 0;

    const FOCUS_BUTTON_SELECTOR = '.layout-tab-container > .file-tree .block__icon[data-type="focus"]';
    const FILE_TREE_SELECTOR = ".layout-tab-container > .file-tree > .fn__flex-1 > ul.b3-list[data-url]";

    function collapseLists() {
      const fileTreeLists = document.querySelectorAll(FILE_TREE_SELECTOR);

      fileTreeLists.forEach(list => {
        const fragment = new DocumentFragment();
        Array.from(list.children).forEach(item => {
          if (item.matches('li.b3-list-item')) {
            const toggleElement = item.querySelector('.b3-list-item__toggle');
            const arrowElement = item.querySelector('.b3-list-item__arrow');

            if (toggleElement && arrowElement.classList.contains('b3-list-item__arrow--open')) {
              arrowElement.classList.remove('b3-list-item__arrow--open');

              const nextSibling = item.nextElementSibling;
              if (nextSibling && nextSibling.matches('ul')) {
                fragment.appendChild(nextSibling);
              }
            }
          }
        });

        // 批量清空节点
        requestAnimationFrame(() => fragment.replaceChildren());
      });
    }

    function tryModifyAriaLabelAndAddHandler() {
      const focusButton = document.querySelector(FOCUS_BUTTON_SELECTOR);

      if (focusButton) {
        if (originalBehavior) {
          // 原始逻辑
          focusButton.setAttribute('aria-label', '左键定位, 右键折叠定位');
          focusButton.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // 阻止默认右键行为
            collapseLists();
            focusButton.click(); // 模拟点击当前按钮
          });
        } else {
          // 左右互换逻辑
          focusButton.setAttribute('aria-label', '左键折叠定位, 右键定位');
          
          function leftClickHandler(e) {
            e.preventDefault(); // 阻止左键点击的默认行为
            collapseLists();
            focusButton.click(); // 模拟点击当前按钮
          }

          function contextMenuHandler(e) {
            e.preventDefault(); // 阻止右键点击的默认行为
            focusButton.removeEventListener('click', leftClickHandler);
            focusButton.click(); // 模拟点击当前按钮
            setTimeout(() => {
              focusButton.addEventListener('click', leftClickHandler);
            }, 0);
          }

          // 为左键和右键添加相应的监听器
          focusButton.addEventListener('click', leftClickHandler);
          focusButton.addEventListener('contextmenu', contextMenuHandler);
        }
      } else {
        retryCount++;
        if (retryCount < MAX_RETRIES) {
          setTimeout(tryModifyAriaLabelAndAddHandler, RETRY_INTERVAL); // 继续重试
        } else {
          console.error('代码片段报错:无法找到文档树上的定位按钮');
        }
      }
    }

    // 初次调用
    tryModifyAriaLabelAndAddHandler();
  }

  // 添加处理程序
  addFocusHandler();
})();

目前已知的问题是:

  1. 如果当前文档所在的笔记本是展开的,使用时会有一点不必要的抖动。开发需求已经反馈到:Issue #12695 · siyuan-note/siyuan
  2. 有时候不能定位到预期中的文档,这个是思源的问题,已经反馈到:Issue #12694 · siyuan-note/siyuan
打赏 30 积分后可见
30 积分 • 9 打赏
  • 思源笔记

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

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

    28446 引用 • 119789 回帖
  • 代码片段

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

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

    285 引用 • 1988 回帖
2 操作
JeffreyChen 在 2024-10-06 14:33:50 更新了该帖
JeffreyChen 在 2024-10-04 02:38:04 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 这个我是真喜欢

  • wenbocn

    👍🏻 非常棒的功能。

    请问能否左右键功能互换一下?

    请问能否提供一个 css 使定位折叠按钮不隐藏,一直显示,谢谢!

    1 回复
    1. 帖子更新了代码片段,在代码开头增加了一个变量切换
    2. 始终显示文档树上的按钮可以用下面这个 CSS:
      #layouts .layout-tab-container > .file-tree .block__icon {
          opacity: 1;
      }
      
  • wenbocn

    求助!

    大佬能否给一个定位文档后,点击展开该定位文档的功能。

    目的:

    使用了“二级文档树”插件,参考[css] 关于二级文档树的某些定制设计 - 链滴 (ld246.com),添加 css 自定义实现了左侧原文档树显示文件夹,右侧二级文档树显示文件的功能。使用原文档树的定位按钮时,只能在左侧原文档树定位,而不能使二级文档树定位。

    思路:使用原文档树的定位按钮时,在左侧原文档树定位到文档,然后点击将其展开,那么左侧(原文档树)显示该文档下的所有文件夹,同时右侧(二级文档树)显示该文档下的所有文件。

    1 回复
  • wenbocn

    @JeffreyChen 大佬能否帮忙想一下方案,非常感谢!

  • 改好了,不过左键点击的时候不行,我没研究出来为什么:

    // 右键文档树定位按钮时先折叠再定位 JS片段
    // author by JeffreyChen https://ld246.com/article/1727980528164
    (function() {
      // 设置为 true 时是“左键定位, 右键折叠定位”,为 false 时互换为“左键折叠定位, 右键定位”
      const originalBehavior = true;
    
      function addFocusHandler() {
        const MAX_RETRIES = 100; // 最大重试次数
        const RETRY_INTERVAL = 200; // 重试间隔(毫秒)
        let retryCount = 0;
    
        const FOCUS_BUTTON_SELECTOR = '.layout-tab-container > .file-tree .block__icon[data-type="focus"]';
        const FILE_TREE_SELECTOR = ".layout-tab-container > .file-tree > .fn__flex-1 > ul.b3-list[data-url]";
    
        function collapseLists() {
          const fileTreeLists = document.querySelectorAll(FILE_TREE_SELECTOR);
    
          fileTreeLists.forEach(list => {
            const fragment = new DocumentFragment();
            Array.from(list.children).forEach(item => {
              if (item.matches('li.b3-list-item')) {
                const toggleElement = item.querySelector('.b3-list-item__toggle');
                const arrowElement = item.querySelector('.b3-list-item__arrow');
    
                if (toggleElement && arrowElement.classList.contains('b3-list-item__arrow--open')) {
                  arrowElement.classList.remove('b3-list-item__arrow--open');
    
                  const nextSibling = item.nextElementSibling;
                  if (nextSibling && nextSibling.matches('ul')) {
                    fragment.appendChild(nextSibling);
                  }
                }
              }
            });
    
            // 批量清空节点
            requestAnimationFrame(() => fragment.replaceChildren());
          });
        }
    
        function simulateClickOnFocusedText() {
          const focusedTextElement = document.querySelector('.layout-tab-container > .file-tree > .fn__flex-1 .b3-list-item--focus > .b3-list-item__text');
          if (focusedTextElement) {
            focusedTextElement.click(); // 模拟点击找到的第一个元素
          } else {
            console.error('找不到聚焦文本元素');
          }
        }
    
        function tryModifyAriaLabelAndAddHandler() {
          const focusButton = document.querySelector(FOCUS_BUTTON_SELECTOR);
    
          if (focusButton) {
            // 在点击按钮后 500ms 模拟点击目标元素
            const handleButtonClick = () => {
              setTimeout(simulateClickOnFocusedText, 500); // 延时调用
            };
      
            if (originalBehavior) {
              // 原始逻辑
              focusButton.setAttribute('aria-label', '左键定位, 右键折叠定位');
              focusButton.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认右键行为
                collapseLists();
                focusButton.click(); // 模拟点击当前按钮
                handleButtonClick(); // 添加延时点击操作
              });
            } else {
              // 左右互换逻辑
              focusButton.setAttribute('aria-label', '左键折叠定位, 右键定位');
        
              function leftClickHandler(e) {
                e.preventDefault(); // 阻止左键点击的默认行为
                collapseLists();
                focusButton.click(); // 模拟点击当前按钮
                handleButtonClick(); // 添加延时点击操作
              }
    
              function contextMenuHandler(e) {
                e.preventDefault(); // 阻止右键点击的默认行为
                focusButton.removeEventListener('click', leftClickHandler);
                focusButton.click(); // 模拟点击当前按钮
                setTimeout(() => {
                  focusButton.addEventListener('click', leftClickHandler);
                }, 0);
                handleButtonClick(); // 添加延时点击操作
              }
    
              // 为左键和右键添加相应的监听器
              focusButton.addEventListener('click', leftClickHandler);
              focusButton.addEventListener('contextmenu', contextMenuHandler);
            }
          } else {
            retryCount++;
            if (retryCount < MAX_RETRIES) {
              setTimeout(tryModifyAriaLabelAndAddHandler, RETRY_INTERVAL); // 继续重试
            } else {
              console.error('代码片段报错:无法找到文档树上的定位按钮');
            }
          }
        }
    
        // 初次调用
        tryModifyAriaLabelAndAddHandler();
      }
    
      // 添加处理程序
      addFocusHandler();
    })();
    
    1 回复
  • wenbocn

    大佬给力,感谢!

    等试一下再给您反馈

  • wenbocn 1 评论

    非常感谢大佬,我这边左右键都是有效的。

    定位到文件夹(含有子文档)条目时,很好用。点击定位按钮后,左边定位到文件夹,右边显示该文件下的文档。

    但定位到文档(不含子文档)时,左侧原文档树和右侧 docker 文档树都没有响应。请问能否再麻烦大佬,在这种情况下,将左侧原文档树定位到这个文档所在的文件夹,如果可能的话,能否再触发一下二级文档树的定位按钮或用其他方法定位一下。

    谢谢!!!

    这个有点麻烦,我不太想写
    JeffreyChen
  • 这个如果文档树太长,还是目标文档还是会落到文档树栏下边去,能不能自动跳到文档树栏的中间?

    1 回复
  • 你这个症状是不是用了文档树自定义插件?

    1 回复
  • xnyshu 2 评论

    是的。

    @JeffreyChen 抱歉,这个真的不会写
    zxkmm
  • 插件只能定位不能折叠,代码片段可以折叠。
    xnyshu
    @xnyshu 打开开发者工具控制台,录屏让我看看整个过程;还有插件设置有没有修改过?设备是什么?
    JeffreyChen
    @JeffreyChen 控制台看不出有什么反应。我关了插件,用 js 代码正常。
    xnyshu
    @xnyshu 控制台连插件的输出都没有吗? 另外,前面的问题你还没回答
    JeffreyChen
    @JeffreyChen 设置修改过,不知道默认是什么设置了,好像刚开始是正常的。Macos 15
    xnyshu
    @xnyshu 最好还是录屏让我看看你操作的完整过程
    JeffreyChen
    @xnyshu 升级思源 v3.3.2 和升级插件 v0.2.0 再试试
    JeffreyChen
    @JeffreyChen 升级后可以了。
    xnyshu
请输入回帖内容 ...
JeffreyChen
目前作为思源笔记的半个客服、测试、开发、评审,在爱发电接受捐赠:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Vim

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

    29 引用 • 66 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • OAuth

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

    36 引用 • 103 回帖 • 44 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 577 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖 • 1 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3456 回帖 • 124 关注
  • C++

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

    110 引用 • 153 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 16 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 8 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 494 关注
  • Markdown

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

    173 引用 • 1559 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    91 引用 • 113 回帖
  • 笔记

    好记性不如烂笔头。

    315 引用 • 790 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    502 引用 • 1397 回帖 • 241 关注
  • OneDrive
    2 引用 • 2 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖 • 2 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 563 关注
  • Word
    13 引用 • 41 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3206 引用 • 8217 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 660 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖 • 1 关注