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

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

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 积分 • 7 打赏
  • 思源笔记

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

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

    22346 引用 • 89416 回帖 • 1 关注
  • 代码片段

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

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

    70 引用 • 375 回帖 • 1 关注
2 操作
JeffreyChen 在 2024-10-06 14:33:50 更新了该帖
JeffreyChen 在 2024-10-04 02:38:04 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 改好了,不过左键点击的时候不行,我没研究出来为什么:

    // 右键文档树定位按钮时先折叠再定位 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 回复
  • 其他回帖
  • 你这个症状是不是用了文档树自定义插件?

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

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

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

    谢谢!!!

  • JeffreyChen 1 1 赞同
    1. 帖子更新了代码片段,在代码开头增加了一个变量切换
    2. 始终显示文档树上的按钮可以用下面这个 CSS:
      #layouts .layout-tab-container > .file-tree .block__icon {
          opacity: 1;
      }
      
  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,而不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • Sym

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

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

    524 引用 • 4601 回帖 • 700 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • OnlyOffice
    4 引用 • 3 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 48 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • 书籍

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

    77 引用 • 390 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • CloudFoundry

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

    5 引用 • 18 回帖 • 167 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • 职场

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

    127 引用 • 1705 回帖 • 1 关注
  • Markdown

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

    167 引用 • 1513 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    408 引用 • 3574 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    26 引用 • 84 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 629 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 641 关注