登录 注册

[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();
​

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

  • 思源笔记

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

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

    24827 引用 • 102128 回帖
  • 代码片段

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

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

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

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

    9418 引用 • 42911 回帖 • 109 关注
1 引用
有没有办法把代码片段设置做成一个按钮放在侧边栏？ • JeffreyChen
1 操作
JeffreyChen 在 2024-10-04 17:26:37 更新了该帖
50 悬赏
1 感谢
1 引用
1 操作
9 回帖
4
2
642 220 4 308 4 4 101

相关帖子

被采纳的回答
  • Undii • • 1 via Android
    付费者 捐赠者

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

    settingBtn.addEventListener( 

"click", 

function (e) { 

dispatchKeyEvent("config");
// setTimeout写在这里
 } );
​

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

    所以 setTimeout 应该写在这里；

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Undii •
    付费者 捐赠者

    两个 setTimeout 的位置错了，应该放在 dispatchKeyEvent("config"); 之后；

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

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

    2 回复
  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我首先理解了基础代码，然后再修改到可以正常打开设置界面，之后模拟点击我不会，就用开发者工具找到那个元素，然后：

    我：怎么用 JS 模拟点击按钮：<button class="b3-button b3-button--outline fn__flex-center fn__size200" id="codeSnippet"><svg><use xlink:href="#iconSettings"></use></svg>设置 </button> ？

    GPT：要使用 JavaScript 模拟点击按钮，可以通过以下步骤实现：

    1. 首先，获取对应的按钮元素。在这种情况下，您可以使用按钮的 id 属性来获取该元素。
    var button = document.getElementById('codeSnippet');
​
    1. 然后，您可以使用 click() 方法来模拟点击按钮。
    button.click();
​

    整体代码如下：

    var button = document.getElementById('codeSnippet');
button.click();
​

    这样，当您运行这段 JavaScript 代码时，它将模拟点击具有 id 为 codeSnippet 的按钮。

    我：让这个模拟点击在这段程序的最后阶段执行：

    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");
    },
    false
  );
}
​

    GPT：要在这段程序的最后阶段执行模拟点击按钮的操作，您可以在 addSnippets() 函数的最后调用前面提到的模拟点击按钮的代码。这样可以确保在设置按钮被添加到页面并且事件监听器被设置后再触发点击事件。

    下面是修改后的代码：

    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");
    },
    false
  );

  // 模拟点击按钮
  var button = document.getElementById('codeSnippet');
  button.click();
}
​

    在这个修改后的代码中，addSnippets() 函数会先执行添加设置按钮的操作，然后再执行模拟点击按钮的操作。这样可以确保在设置按钮被添加到页面并且事件监听器被设置后再触发点击事件。

    然后发现界面加载要一点时间，于是就：

    我：我想在前面增加 1s 的延时

    GPT：要在调用按钮点击事件处理程序之前增加 1 秒的延时，您可以使用 setTimeout() 函数来实现。setTimeout() 函数可以在指定的时间间隔后执行指定的函数。

    下面是一个示例代码，演示如何在调用按钮点击事件处理程序之前增加 1 秒的延时：

    // 获取按钮元素
var button = document.getElementById('codeSnippet');

// 创建一个新的点击事件
var clickEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});

// 增加1秒延时后触发按钮的点击事件
setTimeout(function() {
  button.dispatchEvent(clickEvent);
}, 1000); // 1000毫秒 = 1秒
​

    在这段代码中，setTimeout() 函数会在 1 秒后触发指定的函数，该函数会触发按钮的点击事件处理程序。这样就实现了在调用按钮点击事件处理程序之前增加 1 秒的延时。

    我就自己把代码加上去了。

  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我让 GPT 改了一下，成功了一次，然后就一直都不行了。我不太理解：

    回帖不能超过 4000 字，完整代码：顶栏按钮.zip

    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);
  }, 4000); // 4000毫秒 = 4秒

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

    感谢大佬！

    或许大佬愿意把这两个插件的功能整合一下么？

    点击 按钮 快速开关代码片段 + 点击“管理”快速打开代码片段窗口

    image.png

    image.png

  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：https://ld246.com/article/1692089679062 爱发电：https://afdian.com/a/JeffreyChen
回帖
8142
 帖子
135
 积分
2378

近期热议

推荐标签 标签

  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 143 关注
  • BAE

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

    19 引用 • 75 回帖 • 664 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 94 关注
  • 又拍云

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

    20 引用 • 37 回帖 • 570 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 206 关注
  • 星云链

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

    3 引用 • 16 回帖
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    172 引用 • 516 回帖 • 1 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • Excel
    31 引用 • 28 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 140 回帖
  • 黑曜石

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

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • Office

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

    5 引用 • 34 回帖 • 1 关注
  • 安全

    安全永远都不是一个小问题。

    203 引用 • 818 回帖 • 1 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    36 引用 • 155 回帖
  • Swift

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

    36 引用 • 37 回帖 • 545 关注
  • 代码片段

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

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

    133 引用 • 891 回帖 • 1 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 642 关注
  • Follow
    4 引用 • 12 回帖 • 8 关注
  • Redis

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

    286 引用 • 248 回帖 • 14 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • 印象笔记
    3 引用 • 16 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    28 引用 • 226 回帖 • 135 关注
  • 30Seconds

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

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

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 109 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 400 关注
  • 架构

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

    143 引用 • 442 回帖 • 1 关注
  • Access
    1 引用 • 3 回帖 • 4 关注

最新标签