Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-19 23:06:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/5066 Setting

Browse source
This commit is contained in:
Vanessa 2023-06-02 21:49:22 +08:00
parent 16216796b6
commit 17fc039ad5
5 changed files with 111 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

94
app/src/plugin/Setting.ts Normal file
View file

@ -0,0 +1,94 @@
import {isMobile} from "../util/functions";
import {Dialog} from "../dialog";
export class Setting {
private items: IPluginSettingOption[] = [];
private confirmCallback: () => void;
private destroyCallback: () => void;
private width: string;
private height: string;
constructor(options: {
height?: string,
width?: string,
destroyCallback?: () => void
confirmCallback?: () => void
}) {
this.confirmCallback = options.confirmCallback;
this.width = options.width || (isMobile() ? "92vw" : "768px");
this.height = options.height || "80vh";
}
public addItem(options: IPluginSettingOption) {
this.items.push(options);
}
public open(name: string) {
const dialog = new Dialog({
title: name,
content: `<div class="b3-dialog__content">
</div>
<div class="b3-dialog__action${this.confirmCallback ? "" : " fn__none"}">
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button>
<div class="fn__space${this.confirmCallback ? "" : " fn__none"}"></div>
<button class="b3-button b3-button--text${this.confirmCallback ? "" : " fn__none"}">${window.siyuan.languages.save}</button>
</div>`,
width: this.width,
height: this.height,
destroyCallback: () => {
if (this.destroyCallback) {
this.destroyCallback();
}
}
});
const contentElement = dialog.element.querySelector(".b3-dialog__content");
this.items.forEach((item) => {
let html = ""
let actionElement = item.actionElement;
if (!item.actionElement && item.createActionElement) {
actionElement = item.createActionElement();
}
if (actionElement && actionElement.tagName === "TEXTAREA") {
html = `<label class="b3-label fn__flex">
<div class="fn__flex-1">
${item.title}
${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
<div class="fn__hr"></div>
</div>
</label>`
} else {
html = `<label class="fn__flex b3-label config__item">
<div class="fn__flex-1">
${item.title}
${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
</div>
<span class="fn__space${actionElement ? "" : " fn__none"}"></span>
</label>`
}
contentElement.insertAdjacentHTML("beforeend", html);
if (actionElement) {
if (["INPUT", "TEXTAREA"].includes(actionElement.tagName)) {
dialog.bindInput(actionElement as HTMLInputElement, () => {
(btnsElement[1] as HTMLButtonElement).click();
});
}
if (actionElement.tagName === "TEXTAREA") {
contentElement.lastElementChild.lastElementChild.insertAdjacentElement("beforeend", actionElement);
} else {
contentElement.lastElementChild.insertAdjacentElement("beforeend", actionElement);
}
}
})
contentElement.querySelector("input")?.focus();
const btnsElement = dialog.element.querySelectorAll(".b3-dialog__action .b3-button");
btnsElement[0].addEventListener("click", () => {
dialog.destroy();
});
btnsElement[1].addEventListener("click", () => {
if (this.confirmCallback) {
this.confirmCallback();
}
dialog.destroy();
});
}
}