@@ -264,39 +263,6 @@ export const appearance = {
}
});
},
- _bindSnippet: (element: HTMLElement) => {
- const itemContentElement = hasClosestByClassName(element, "b3-label");
- if (!itemContentElement) {
- return;
- }
- fetchPost("/api/snippet/setSnippet", {
- id: itemContentElement.getAttribute("data-id"),
- name: itemContentElement.querySelector("input").value,
- type: itemContentElement.querySelector(".b3-chip").textContent,
- content: itemContentElement.querySelector("textarea").value,
- enabled: (itemContentElement.querySelector(".b3-switch") as HTMLInputElement).checked
- }, (response) => {
- itemContentElement.setAttribute("data-id", response.data.id);
- renderSnippet();
- });
- },
- _genSnippet: (options: ISnippet) => {
- return `
-
-
${options.type}
-
-
-
-
-
-
-
-
-
-
-
-
`;
- },
bindEvent: () => {
if (window.siyuan.config.appearance.customCSS) {
fetchPost("/api/setting/getCustomCSS", {
@@ -305,82 +271,8 @@ export const appearance = {
appearance.onGetcustomcss(response.data);
});
}
- const codeSnippetPanelElement = appearance.element.querySelector("#codeSnippetPanel");
- const codeSnippetElement = appearance.element.querySelector("#codeSnippet");
- codeSnippetElement.addEventListener("click", () => {
- if (codeSnippetPanelElement.innerHTML) {
- codeSnippetPanelElement.innerHTML = "";
- return;
- }
- fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
- let html = `
-
-
-
-
-
-
`;
- response.data.snippets.forEach((item: ISnippet) => {
- html += appearance._genSnippet(item);
- });
- codeSnippetPanelElement.innerHTML = html;
- response.data.snippets.forEach((item: ISnippet) => {
- const nameElement = (codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] input`) as HTMLInputElement);
- nameElement.value = item.name;
- const contentElement = codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] textarea`) as HTMLTextAreaElement;
- contentElement.textContent = item.content;
- nameElement.addEventListener("blur", () => {
- appearance._bindSnippet(nameElement);
- });
- contentElement.addEventListener("blur", () => {
- appearance._bindSnippet(contentElement);
- });
- codeSnippetPanelElement.querySelector(`[data-id="${item.id}"] .b3-switch`).addEventListener("change", () => {
- appearance._bindSnippet(contentElement);
- });
- });
- });
- });
- codeSnippetPanelElement.addEventListener("click", (event) => {
- const target = event.target as HTMLElement;
- if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
- target.parentElement.insertAdjacentHTML("afterend", appearance._genSnippet({
- type: target.id === "addCodeSnippetCSS" ? "css" : "js",
- name: "",
- content: "",
- enabled: false
- }));
- codeSnippetPanelElement.querySelector(".b3-text-field").addEventListener("blur", (event) => {
- appearance._bindSnippet(event.target as HTMLElement);
- });
- codeSnippetPanelElement.querySelector("textarea.b3-text-field").addEventListener("blur", (event) => {
- appearance._bindSnippet(event.target as HTMLElement);
- });
- codeSnippetPanelElement.querySelector(".b3-switch").addEventListener("change", (event) => {
- appearance._bindSnippet(event.target as HTMLElement);
- });
- return;
- }
- const removeElement = hasClosestByClassName(target, "b3-tooltips");
- if (removeElement) {
- const id = removeElement.parentElement.parentElement.getAttribute("data-id");
- removeElement.parentElement.parentElement.remove();
- if (!id) {
- return;
- }
- fetchPost("/api/snippet/removeSnippet", {
- id
- }, (response) => {
- const exitElement = document.getElementById(`snippet${response.data.type === "css" ? "CSS" : "JS"}${response.data.id}`) as HTMLScriptElement;
- if (exitElement) {
- exitElement.remove();
- }
- });
- }
+ appearance.element.querySelector("#codeSnippet").addEventListener("click", () => {
+ openSnippets()
});
const appearanceCustomElement = appearance.element.querySelector("#appearanceCustom");
appearanceCustomElement.addEventListener("click", () => {
diff --git a/app/src/config/util/colorPicker.ts b/app/src/config/util/colorPicker.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/src/config/util.ts b/app/src/config/util/setAccessAuthCode.ts
similarity index 90%
rename from app/src/config/util.ts
rename to app/src/config/util/setAccessAuthCode.ts
index e1d4abd05..2521556b5 100644
--- a/app/src/config/util.ts
+++ b/app/src/config/util/setAccessAuthCode.ts
@@ -1,6 +1,6 @@
-import {Dialog} from "../dialog";
-import {isMobile} from "../util/functions";
-import {fetchPost} from "../util/fetch";
+import {Dialog} from "../../dialog";
+import {isMobile} from "../../util/functions";
+import {fetchPost} from "../../util/fetch";
export const setAccessAuthCode = () => {
const dialog = new Dialog({
diff --git a/app/src/config/util/snippets.ts b/app/src/config/util/snippets.ts
new file mode 100644
index 000000000..50b7df0c6
--- /dev/null
+++ b/app/src/config/util/snippets.ts
@@ -0,0 +1,155 @@
+import {fetchPost} from "../../util/fetch";
+import {hasClosestByClassName} from "../../protyle/util/hasClosest";
+import {Dialog} from "../../dialog";
+
+export const renderSnippet = () => {
+ fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
+ response.data.snippets.forEach((item: ISnippet) => {
+ const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
+ let exitElement = document.getElementById(id) as HTMLScriptElement;
+ if (!item.enabled) {
+ if (exitElement) {
+ exitElement.remove();
+ }
+ return;
+ }
+ if (exitElement) {
+ if (exitElement.innerHTML === item.content) {
+ return;
+ }
+ exitElement.remove();
+ }
+ if (item.type === "css") {
+ document.head.insertAdjacentHTML("beforeend", ``);
+ } else if (item.type === "js") {
+ exitElement = document.createElement("script");
+ exitElement.type = "text/javascript";
+ exitElement.text = item.content;
+ exitElement.id = id;
+ document.head.appendChild(exitElement);
+ }
+ });
+ });
+};
+
+export const openSnippets = () => {
+ fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
+ let cssHTML = "";
+ let jsHTML = "";
+ response.data.snippets.forEach((item: ISnippet) => {
+ if (item.type === "css") {
+ cssHTML += genSnippet(item);
+ } else {
+ jsHTML += genSnippet(item);
+ }
+ });
+ const dialog = new Dialog({
+ width: "70vw",
+ content: `
+
+
+
+ ${cssHTML}
+
+
+
+
+
+
+ ${jsHTML}
+
+
+
+
+
+
+
+
+
+
+
`
+ });
+ response.data.snippets.forEach((item: ISnippet) => {
+ const nameElement = (dialog.element.querySelector(`[data-id="${item.id}"] input`) as HTMLInputElement);
+ nameElement.value = item.name;
+ const contentElement = dialog.element.querySelector(`[data-id="${item.id}"] textarea`) as HTMLTextAreaElement;
+ contentElement.textContent = item.content;
+ });
+ dialog.element.addEventListener("click", (event) => {
+ const target = event.target as HTMLElement;
+ if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
+ target.parentElement.insertAdjacentHTML("beforebegin", genSnippet({
+ type: target.id === "addCodeSnippetCSS" ? "css" : "js",
+ name: "",
+ content: "",
+ enabled: false
+ }));
+ return;
+ }
+ if (target.classList.contains("b3-button--cancel")) {
+ dialog.destroy();
+ return;
+ }
+ if (target.classList.contains("b3-button--text")) {
+ const snippets: ISnippet[] = [];
+ dialog.element.querySelectorAll("[data-id]").forEach((item) => {
+ snippets.push({
+ id: item.getAttribute("data-id"),
+ name: item.querySelector("input").value,
+ type: item.getAttribute("data-type"),
+ content: item.querySelector("textarea").value,
+ enabled: (item.querySelector(".b3-switch") as HTMLInputElement).checked
+ })
+ });
+ fetchPost("/api/snippet/setSnippets", {snippets}, () => {
+ renderSnippet();
+ dialog.destroy();
+ });
+ return;
+ }
+ const tabElement = hasClosestByClassName(target, "item");
+ if (tabElement) {
+ if (tabElement.getAttribute("data-type") === "css") {
+ tabElement.classList.add("item--focus");
+ tabElement.nextElementSibling.classList.remove("item--focus");
+ tabElement.parentElement.nextElementSibling.firstElementChild.classList.remove("fn__none");
+ tabElement.parentElement.nextElementSibling.lastElementChild.classList.add("fn__none");
+ } else {
+ tabElement.classList.add("item--focus");
+ tabElement.previousElementSibling.classList.remove("item--focus");
+ tabElement.parentElement.nextElementSibling.firstElementChild.classList.add("fn__none");
+ tabElement.parentElement.nextElementSibling.lastElementChild.classList.remove("fn__none");
+ }
+ return;
+ }
+ const removeElement = hasClosestByClassName(target, "b3-tooltips");
+ if (removeElement) {
+ removeElement.parentElement.parentElement.nextElementSibling.remove();
+ removeElement.parentElement.parentElement.remove();
+ }
+ });
+ });
+};
+
+const genSnippet = (options: ISnippet) => {
+ return `
`;
+};
diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts
index 4ea3a6441..232138316 100644
--- a/app/src/mobile/util/initFramework.ts
+++ b/app/src/mobile/util/initFramework.ts
@@ -5,7 +5,8 @@ import {validateName} from "../../editor/rename";
import {getEventName} from "../../protyle/util/compatibility";
import {mountHelp} from "../../util/mount";
import {fetchPost} from "../../util/fetch";
-import {renderSnippet, setInlineStyle} from "../../util/assets";
+import {setInlineStyle} from "../../util/assets";
+import {renderSnippet} from "../../config/util/snippets";
import {setEmpty} from "./setEmpty";
import {disabledProtyle, enableProtyle} from "../../protyle/util/onGet";
import {getOpenNotebookCount} from "../../util/pathName";
diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts
index 28f551a7e..4b0581cf9 100644
--- a/app/src/mobile/util/menu.ts
+++ b/app/src/mobile/util/menu.ts
@@ -4,7 +4,7 @@ import {popSearch} from "./search";
import {initAppearance} from "../settings/appearance";
import {closePanel} from "./closePanel";
import {Constants} from "../../constants";
-import {setAccessAuthCode} from "../../config/util";
+import {setAccessAuthCode} from "../../config/util/setAccessAuthCode";
import {mountHelp, newDailyNote, newNotebook} from "../../util/mount";
import {needSubscribe} from "../../util/needSubscribe";
import {repos} from "../../config/repos";
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index c16cffb72..be15119ff 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -86,36 +86,6 @@ export const loadAssets = (data: IAppearance) => {
}
};
-export const renderSnippet = () => {
- fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
- response.data.snippets.forEach((item: ISnippet) => {
- const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
- let exitElement = document.getElementById(id) as HTMLScriptElement;
- if (!item.enabled) {
- if (exitElement) {
- exitElement.remove();
- }
- return;
- }
- if (exitElement) {
- if (exitElement.innerHTML === item.content) {
- return;
- }
- exitElement.remove();
- }
- if (item.type === "css") {
- document.head.insertAdjacentHTML("beforeend", ``);
- } else if (item.type === "js") {
- exitElement = document.createElement("script");
- exitElement.type = "text/javascript";
- exitElement.text = item.content;
- exitElement.id = id;
- document.head.appendChild(exitElement);
- }
- });
- });
-};
-
export const initAssets = () => {
const emojiElement = document.getElementById("emojiScript");
const loadingElement = document.getElementById("loading");
diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts
index 56eaeba83..880f8a512 100644
--- a/app/src/util/onGetConfig.ts
+++ b/app/src/util/onGetConfig.ts
@@ -14,7 +14,8 @@ import {globalShortcut} from "./globalShortcut";
import {fetchPost} from "./fetch";
import {mountHelp, newDailyNote} from "./mount";
import {MenuItem} from "../menus/Menu";
-import {initAssets, loadAssets, renderSnippet, setInlineStyle, setMode} from "./assets";
+import {initAssets, loadAssets, setInlineStyle, setMode} from "./assets";
+import {renderSnippet} from "../config/util/snippets";
import {getOpenNotebookCount} from "./pathName";
import {openFileById} from "../editor/util";
import {focusByRange} from "../protyle/util/selection";