Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 00:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/9860

Browse source
This commit is contained in:
Vanessa 2023-12-18 10:41:02 +08:00
parent 01205215eb
commit 1d0c09eaf6
2 changed files with 79 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

123
app/src/config/util/snippets.ts
View file

@ -54,22 +54,26 @@ export const openSnippets = () => {
</div> </div>
<div class="fn__flex-1" style="overflow:auto;padding: 16px 24px"> <div class="fn__flex-1" style="overflow:auto;padding: 16px 24px">
<div> <div>
${cssHTML}
<div class="fn__flex"> <div class="fn__flex">
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetCSS"> <span aria-label="${window.siyuan.languages.addAttr} CSS" id="addCodeSnippetCSS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
<svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} CSS <svg><use xlink:href="#iconAdd"></use></svg>
</button> </span>
<div class="fn__space"></div>
<input data-action="toggleCSS" class="b3-switch b3-switch--side fn__flex-center" type="checkbox"${window.siyuan.config.snippet.enabledCSS ? " checked" : ""}>
</div> </div>
${cssHTML}
</div> </div>
<div class="fn__none"> <div class="fn__none">
${jsHTML}
<div class="fn__flex"> <div class="fn__flex">
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<button class="b3-button b3-button--outline fn__flex-center fn__size200" id="addCodeSnippetJS"> <span aria-label="${window.siyuan.languages.addAttr} JS" id="addCodeSnippetJS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
<svg><use xlink:href="#iconAdd"></use></svg> ${window.siyuan.languages.addAttr} JS <svg><use xlink:href="#iconAdd"></use></svg>
</button> </span>
<div class="fn__space"></div>
<input data-action="toggleJS" class="b3-switch b3-switch--side fn__flex-center" type="checkbox"${window.siyuan.config.snippet.enabledJS ? " checked" : ""}>
</div> </div>
${jsHTML}
</div> </div>
</div> </div>
<div class="b3-dialog__action"> <div class="b3-dialog__action">
@ -90,58 +94,75 @@ export const openSnippets = () => {
contentElement.textContent = item.content; contentElement.textContent = item.content;
}); });
const removeIds: string[] = []; const removeIds: string[] = [];
const toggleCSSElement = dialog.element.querySelector('.b3-switch[data-action="toggleCSS"]') as HTMLInputElement;
const toggleJSElement = dialog.element.querySelector('.b3-switch[data-action="toggleJS"]') as HTMLInputElement;
toggleCSSElement.addEventListener("change", (event) => {
toggleSnippet(toggleCSSElement, toggleJSElement);
});
toggleJSElement.addEventListener("change", (event) => {
toggleSnippet(toggleCSSElement, toggleJSElement);
});
dialog.element.addEventListener("click", (event) => { dialog.element.addEventListener("click", (event) => {
const target = event.target as HTMLElement; let target = event.target as HTMLElement;
if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") { while (target && !target.isSameNode(dialog.element)) {
target.parentElement.insertAdjacentHTML("beforebegin", genSnippet({ if (target.id === "addCodeSnippetCSS" || target.id === "addCodeSnippetJS") {
type: target.id === "addCodeSnippetCSS" ? "css" : "js", target.parentElement.parentElement.insertAdjacentHTML("beforeend", genSnippet({
name: "", type: target.id === "addCodeSnippetCSS" ? "css" : "js",
content: "", name: "",
enabled: false content: "",
})); enabled: false
return; }));
} event.stopPropagation();
if (target.classList.contains("b3-button--cancel")) { event.preventDefault();
dialog.destroy({cancel: "true"}); break;
return; } else if (target.classList.contains("b3-button--cancel")) {
} dialog.destroy({cancel: "true"});
if (target.classList.contains("b3-button--text")) { event.stopPropagation();
setSnippet(dialog, response.data.snippets, removeIds); event.preventDefault();
return; break;
} } else if (target.classList.contains("b3-button--text")) {
const tabElement = hasClosestByClassName(target, "item"); setSnippet(dialog, response.data.snippets, removeIds);
if (tabElement) { event.stopPropagation();
if (tabElement.getAttribute("data-type") === "css") { event.preventDefault();
tabElement.classList.add("item--focus"); break;
tabElement.nextElementSibling.classList.remove("item--focus"); } else if (target.classList.contains("item")) {
tabElement.parentElement.nextElementSibling.firstElementChild.classList.remove("fn__none"); if (target.getAttribute("data-type") === "css") {
tabElement.parentElement.nextElementSibling.lastElementChild.classList.add("fn__none"); target.classList.add("item--focus");
} else { target.nextElementSibling.classList.remove("item--focus");
tabElement.classList.add("item--focus"); target.parentElement.nextElementSibling.firstElementChild.classList.remove("fn__none");
tabElement.previousElementSibling.classList.remove("item--focus"); target.parentElement.nextElementSibling.lastElementChild.classList.add("fn__none");
tabElement.parentElement.nextElementSibling.firstElementChild.classList.add("fn__none"); } else {
tabElement.parentElement.nextElementSibling.lastElementChild.classList.remove("fn__none"); target.classList.add("item--focus");
target.previousElementSibling.classList.remove("item--focus");
target.parentElement.nextElementSibling.firstElementChild.classList.add("fn__none");
target.parentElement.nextElementSibling.lastElementChild.classList.remove("fn__none");
}
event.stopPropagation();
event.preventDefault();
break;
} else if (target.dataset.action === "remove") {
const itemElement = target.parentElement.parentElement;
removeIds.push("#snippet" + (itemElement.getAttribute("data-type") === "css" ? "CSS" : "JS") + itemElement.getAttribute("data-id"));
itemElement.nextElementSibling.remove();
itemElement.remove();
event.stopPropagation();
event.preventDefault();
break;
} }
return; target = target.parentElement;
}
const removeElement = hasClosestByClassName(target, "b3-tooltips");
if (removeElement) {
const itemElement = removeElement.parentElement.parentElement;
removeIds.push("#snippet" + (itemElement.getAttribute("data-type") === "css" ? "CSS" : "JS") + itemElement.getAttribute("data-id"));
itemElement.nextElementSibling.remove();
itemElement.remove();
} }
}); });
}); });
}; };
const genSnippet = (options: ISnippet) => { const genSnippet = (options: ISnippet) => {
return `<div data-id="${options.id || ""}" data-type="${options.type}"> return `<div class="fn__hr--b"></div>
<div data-id="${options.id || ""}" data-type="${options.type}">
<div class="fn__flex"> <div class="fn__flex">
<input type="text" class="fn__size200 b3-text-field" placeholder="${window.siyuan.languages.title}"> <input type="text" class="fn__size200 b3-text-field" placeholder="${window.siyuan.languages.title}">
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="fn__space"></div> <div class="fn__space"></div>
<span aria-label="${window.siyuan.languages.remove}" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show"> <span aria-label="${window.siyuan.languages.remove}" data-action="remove" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
<svg><use xlink:href="#iconTrashcan"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
</span> </span>
<div class="fn__space"></div> <div class="fn__space"></div>
@ -188,3 +209,9 @@ const setSnippet = (dialog: Dialog, oldSnippets: ISnippet[], removeIds: string[]
} }
} }
}; };
const toggleSnippet = (toggleCSSElement: HTMLInputElement, toggleJSElement: HTMLInputElement) => {
window.siyuan.config.snippet.enabledCSS = toggleCSSElement.checked;
window.siyuan.config.snippet.enabledJS = toggleJSElement.checked;
fetchPost("/api/setting/setSnippet", window.siyuan.config.snippet)
}

4
app/src/types/index.d.ts vendored
View file

@ -676,6 +676,10 @@ interface IAccount {
} }
interface IConfig { interface IConfig {
snippet: {
enabledCSS: boolean
enabledJS: boolean
}
cloudRegion: number cloudRegion: number
bazaar: { bazaar: {
trust: boolean trust: boolean