[js] 添加一个顶栏按钮,实现点击即打开代码片段界面

最终实现的 JS 代码片段:

/**
 * 在顶栏添加按钮,快捷打开代码片段界面 JS片段
 * 参考 https://ld246.com/article/1674026309504 修改,同时感谢 [Undii](https://ld246.com/member/Undii) 提供 帮助
 * 为顶栏增加代码片段按钮,点击后创建快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addSnippets = true;// 设置

// 插入按钮
// 插入日历笔记本选择挂件 
// 参考: https://ld246.com/article/1662969146166  原作者: BryceAndJuly
// 参考: https://github.com/svchord/Rem-Craft 原作者: Seven Chor

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets"></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
        dispatchKeyEvent("config");

        setTimeout(function() {
            // 找到包含 data-name="appearance" 的 <li> 元素
            var element = document.querySelector('li[data-name="appearance"]');
  
            // 创建一个点击事件
            var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
            });
  
            // 触发点击事件
            element.dispatchEvent(event);
        }, 100); // 1000毫秒 = 1秒

        setTimeout(function() {
            // 获取按钮元素
            var button = document.getElementById('codeSnippet');
  
            // 创建一个新的点击事件
            var clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
            });
  
            // 触发按钮的点击事件
            button.dispatchEvent(clickEvent);
  
        }, 200); // 1000毫秒 = 1秒
    }
  );
}


/**
 * 
 */
function dispatchKeyEvent(functionName) {
  let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
  keyInit["bubbles"] = true;
  let keydownEvent = new KeyboardEvent('keydown', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
  let keyUpEvent = new KeyboardEvent('keyup', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}

/**
 * 
 * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
 */
function parseHotKeyStr(hotkeyStr) {
  let result = {
    ctrlKey: false,
    altKey: false,
    metaKey: false,
    shiftKey: false,
    key: 'A',
    keyCode: 0
  }
  if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
    console.error("解析快捷键设置失败", hotkeyStr);
    throw new Error("解析快捷键设置失败");
  }
  let onlyKey = hotkeyStr;
  if (hotkeyStr.indexOf("⌘") != -1) {
    result.ctrlKey = true;
    onlyKey = onlyKey.replace("⌘", "");
  }
  if (hotkeyStr.indexOf("⌥") != -1) {
    result.altKey = true;
    onlyKey = onlyKey.replace("⌥", "");
  }
  if (hotkeyStr.indexOf("⇧") != -1) {
    result.shiftKey = true;
    onlyKey = onlyKey.replace("⇧", "");
  }
  // 未处理 windows btn (MetaKey) 
  result.key = onlyKey;
  // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
  // 更改中,思源改为使用keyCode判断快捷键按下事件,这里进行了对应的转换
  // 另请参考该提交中涉及的文件
  result.keyCode = keyCodeList[result.key];
  console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
  switch (result.key) {
    case "→": {
      result.key = "ArrowRight";
      break;
    }
    case "←": {
      result.key = "ArrowLeft";
      break;
    }
    case "↑": {
      result.key = "ArrowUp";
      break;
    }
    case "↓": {
      result.key = "ArrowDown";
      break;
    }
    case "⌦": {
      result.key = "Delete";
      break;
    }
    case "⌫": {
      result.key = "Backspace";
      break;
    }
    case "↩": {
      result.key = "Enter";
      break;
    }
  }
  return result;
}

if (g_addSnippets) addSnippets();

const keyCodeList = {
  "⌫": 8,
  "⇥": 9,
  "↩": 13,
  "⇧": 16,
  "⌘": 91,
  "⌥": 18,
  "Pause": 19,
  "CapsLock": 20,
  "Escape": 27,
  " ": 32,
  "PageUp": 33,
  "PageDown": 34,
  "End": 35,
  "Home": 36,
  "←": 37,
  "↑": 38,
  "→": 39,
  "↓": 40,
  "PrintScreen": 44,
  "Insert": 45,
  "⌦": 46,
  "0": 48,
  "1": 49,
  "2": 50,
  "3": 51,
  "4": 52,
  "5": 53,
  "6": 54,
  "7": 55,
  "8": 56,
  "9": 57,
  "A": 65,
  "B": 66,
  "C": 67,
  "D": 68,
  "E": 69,
  "F": 70,
  "G": 71,
  "H": 72,
  "I": 73,
  "J": 74,
  "K": 75,
  "L": 76,
  "M": 77,
  "N": 78,
  "O": 79,
  "P": 80,
  "Q": 81,
  "R": 82,
  "S": 83,
  "T": 84,
  "U": 85,
  "V": 86,
  "W": 87,
  "X": 88,
  "Y": 89,
  "Z": 90,
  "ContextMenu": 93,
  "MyComputer": 182,
  "MyCalculator": 183,
  ";": 186,
  "=": 187,
  ",": 188,
  "-": 189,
  ".": 190,
  "/": 191,
  "`": 192,
  "[": 219,
  "\\": 220,
  "]": 221,
  "'": 222,
  "*": 106,
  "+": 107,
  "-": 109,
  ".": 110,
  "/": 111,
  "F1": 112,
  "F2": 113,
  "F3": 114,
  "F4": 115,
  "F5": 116,
  "F6": 117,
  "F7": 118,
  "F8": 119,
  "F9": 120,
  "F10": 121,
  "F11": 122,
  "F12": 123,
  "NumLock": 144,
  "ScrollLock": 145
};

原贴:

看到个 帖子 ,添加按钮应该是这样:

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets" ></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener("click", function() {
      openSnippets();
    }, false);
}

function openSnippets() {

}

addSnippets();

但是我不知道怎么打开代码片段界面

  • 思源笔记

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

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

    22026 引用 • 87850 回帖 • 4 关注
  • 代码片段

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

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

    54 引用 • 295 回帖
  • Q&A

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

    7938 引用 • 36313 回帖 • 167 关注
1 操作
JeffreyChen 在 2024-10-04 17:26:37 更新了该帖

相关帖子

被采纳的回答
  • Undii 1

    主要是 模拟点击应该在 点击顶栏按钮、并且打开设置页之后进行
    你这里的 setTimeout 并没有和点击顶栏按钮关联起来,也就是,“延迟模拟点击打开代码片段”,这个事情之会在代码生效时执行一次。在 4 秒内打开了设置,这里代码就会正确执行一次。

    settingBtn.addEventListener( 
    
    "click", 
    
    function (e) { 
    
    dispatchKeyEvent("config");
    // setTimeout写在这里
     } );
    

    上面的代码,是将 click 点击顶栏按钮的事件和 function 关联了起来,具体的,这里执行了 dispatchKeyEvent 来模拟快捷键打开设置页面,

    所以 setTimeout 应该写在这里;

    我也在原帖中更新了相应的代码。

欢迎来到这里!

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

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

    假如你只想通过代码片段来实现,可以用代码模拟点击 siyuan-> 设置-> 外观-> 代码片段来实现.

    也可以用 openapi 实现. fetchPost /api/snippet/getSnippet", 具体代码可参考 siyuan\app\src\config\util\snippets.ts

    1 回复
  • 其他回帖
  • Undii 1 1 评论

    主要是 模拟点击应该在 点击顶栏按钮、并且打开设置页之后进行
    你这里的 setTimeout 并没有和点击顶栏按钮关联起来,也就是,“延迟模拟点击打开代码片段”,这个事情之会在代码生效时执行一次。在 4 秒内打开了设置,这里代码就会正确执行一次。

    settingBtn.addEventListener( 
    
    "click", 
    
    function (e) { 
    
    dispatchKeyEvent("config");
    // setTimeout写在这里
     } );
    

    上面的代码,是将 click 点击顶栏按钮的事件和 function 关联了起来,具体的,这里执行了 dispatchKeyEvent 来模拟快捷键打开设置页面,

    所以 setTimeout 应该写在这里;

    我也在原帖中更新了相应的代码。

    1 回复
    用 api 的话 返回的是代码片段的内容 需要自己写一个 dialog 显示 这个最好用插件做。
    Undii
  • 两个 setTimeout 的位置错了,应该放在 dispatchKeyEvent("config"); 之后;

    我没想过 GPT 还能做这个;这是怎么给 GPT 说的呢?

    setTimeout 延迟两秒似乎也不需要,能更快,设置几百应该就行;

    2 回复
  • 这回我搞懂了,能顺利运行了,谢谢你 😘

  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,而不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • CloudFoundry

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

    5 引用 • 18 回帖 • 164 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 726 关注
  • 前端

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

    247 引用 • 1347 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    285 引用 • 728 回帖
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    14 引用 • 106 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 461 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 3 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 47 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 534 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 624 关注
  • 阿里云

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

    89 引用 • 345 回帖
  • Markdown

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

    167 引用 • 1509 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注
  • Git

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

    209 引用 • 358 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 333 关注
  • 30Seconds

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

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

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 97 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 615 关注
  • Bug

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

    75 引用 • 1737 回帖 • 1 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 新人

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

    52 引用 • 228 回帖 • 1 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注