思源笔记折腾记录 - 快速开关代码片段

之前我们已经弄了在笔记内以文档的形式写代码片段的活儿了，但是这些代码片段还是要去设置界面才能开关，有点不大方便，所以这回来整个新的活，让它们更方便开关一点点。

首先还是要引入依赖，这回因为需要工具栏和保存代码片段，所以我们需要这两个东西

import 自定义工具栏 from "https://esm.sh/siyuan-noob/customToolbar";
import 核心api from "https://esm.sh/siyuan-noob/utilKernel/kernelApi.js";
​

​import.meta​是 esm 中的一个特殊对象，只有被 import​引入的代码才能够获取这个东西

let url =import.meta.url
let selfID = url.split("/").pop().split(".")[0];
​

为了正常运行这个代码片段，你需要重新安装思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)中的代码片段，之前的版本无法支持 import.meta

这里我们是为了用它来判断代码片段是不是你看的这篇文档自己编译出来的（不然它把它自己关了的话开关也就没有了）

自定义工具栏.注册工具栏按钮("#barBack", {
  图标: "#iconCode",
  提示: "开关代码片段",
  点击回调函数: async (event) => {
    const rect = event.currentTarget.getBoundingClientRect();
    let 当前代码片段 = await 核心api.getSnippet({ type: "all", enabled: 2 });
    let 旧代码片段 = JSON.parse(JSON.stringify(当前代码片段));
    当前代码片段.snippets.forEach((item) => {
      if (item.id !== selfID + "js") {
        let element = document.createElement("button");
        element.setAttribute("class", "b3-menu__item");
        let spanText;
        let id;
        let type;
  
        if (!item.id.endsWith("css") && !item.id.endsWith("js")) {
          id = item.id;
          type = item.type=='css'?'css':' js';
          spanText = `<div style="font-size:85%;color:var(--b3-theme-on-surface);width:60px;display:inline-block">${type}</div> 
         ${item.name}`;
        } else {
          if (item.id.endsWith("css")) {
            id = item.id.slice(0, item.id.length - 3);
            type = "cssInNote";
          } else {
            id = item.id.slice(0, item.id.length - 2);
            type = "jsInNote";
          }
	  let href 
	  if(window.require){
           href=`siyuan://blocks/${id}'>${item.name}`;
	  }else{
	href=`${window.location.href.split('?')[0].replace('/stage/build/app/','/stage/build/desktop/')}?id=${id}`
	  }
	            spanText = `<div style="font-size:85%;color:var(--b3-theme-on-surface);width:60px;display:inline-block">${type}</div>
          <a href='${href}'>${item.name}</a>`;

        }
  
        element.innerHTML = `
                  <div class="fn__flex-1">
<span class="fn__space"></span>
                  ${spanText}
                  </div>
                  <span class="fn__space"></span>
                      <input style="box-sizing: border-box"  class="b3-switch fn__flex-center"  type="checkbox" ${
                        item.enabled ? "checked" : ""
                      }>
                  `;
        element.setAttribute("data-type", type);
        element.setAttribute("data-id", id);
        //挂上事件，让菜单项里面的开关可以点击
	element.addEventListener(
          "click",
          (event) => {
            if (event.target.tagName !== "INPUT") {
              return;
            }
            item.enabled = !item.enabled;
            element.querySelector("input").value = item.enabled;
            element
              .querySelector("input")
              .setAttribute("checked", item.enabled);
            event.stopPropagation();
          },
          false
        );
        window.siyuan.menus.menu.append(element);
      }
    });
    //这个方法是思源自带的
    window.siyuan.menus.menu.popup({ x: rect.left, y: rect.top + rect.height });
    //啊这里就是判断要不要重载了
    let cb = async (e) => {
      let target = e.target;
      //如果不是在菜单里面的话
      if (!isMenuClicked(target)) {
        if (JSON.stringify(当前代码片段) !== JSON.stringify(旧代码片段)) {
          await 核心api.setSnippet(当前代码片段);
          window.location.reload();
        } else {
          window.removeEventListener("click", cb);
        }
      }
    };
    window.addEventListener("click", cb);
  },
});

//

​

这里用到了一个​isMenuClicked​的工具函数

function isMenuClicked(element) {
  if (element.parentElement) {
    if (element.parentElement !== window.siyuan.menus.menu.element) {
      return isMenuClicked(element.parentElement);
    } else {
      return true;
    }
  } else {
    return false;
  }
}
​

意思就是说如果点击的范围在思源的菜单里面就不管它，如果不在而且代码片段的设置不一样了的话，就重新加载主界面。

效果呢就像这样：

​​

好像毛病不大的样子，有链接的那些就是在笔记里面定义的代码片段啦，这样开关起来应该能方便一丢丢

如果这玩意对你有用可以去爱发电给我买杯咖啡

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

‍

‍