From f06c82085ef4f592bfa10af1e5bd2e38740bc375 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=94=E9=98=B3=E9=99=8C=E5=AE=A2?= Date: Sat, 6 Apr 2024 13:24:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E7=BB=8F=E5=85=B8=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=B7=BB=E5=8A=A0=E5=AE=9E=E6=97=B6=E8=AF=BB?= =?UTF-8?q?=E5=8F=96=E5=92=8C=E5=AE=9E=E6=97=B6=E4=BF=9D=E5=AD=98=E7=9A=84?= =?UTF-8?q?=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 39 ++++++++++++++++++++++++--- src/libs/index.d.ts | 2 +- src/libs/setting-utils.ts | 55 ++++++++++++++++++++++++++++++++++++--- 3 files changed, 89 insertions(+), 7 deletions(-) diff --git a/src/index.ts b/src/index.ts index 0e8893a..a444fb8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -177,6 +177,13 @@ export default class PluginSample extends Plugin { type: "textinput", title: "Readonly text", description: "Input description", + action: { + callback: () => { + // Return data and save it in real time + let value = this.settingUtils.takeAndSave("Input") + console.log(value); + } + } }); this.settingUtils.addItem({ key: "InputArea", @@ -184,6 +191,13 @@ export default class PluginSample extends Plugin { type: "textarea", title: "Readonly text", description: "Input description", + action: { + callback: () => { + // Read data in real time + let value = this.settingUtils.take("InputArea") + console.log(value); + } + } }); this.settingUtils.addItem({ key: "Check", @@ -191,9 +205,12 @@ export default class PluginSample extends Plugin { type: "checkbox", title: "Checkbox text", description: "Check description", - checkbox: { + action: { callback: () => { - console.log("Checkbox clicked"); + // Return data and save it in real time + let value = !this.settingUtils.get("Check") + this.settingUtils.set("Check", value) + console.log(value); } } }); @@ -201,11 +218,18 @@ export default class PluginSample extends Plugin { key: "Select", value: 1, type: "select", - title: "Readonly text", + title: "Select", description: "Select description", options: { 1: "Option 1", 2: "Option 2" + }, + action: { + callback: () => { + // Read data in real time + let value = this.settingUtils.take("Select") + console.log(value); + } } }); this.settingUtils.addItem({ @@ -218,6 +242,15 @@ export default class PluginSample extends Plugin { min: 0, max: 100, step: 1, + }, + action:{ + // The callback is called after the action of Silder changes, + // so it should be the this.settingUtils.get() method. + callback: () => { + // Read data in real time + let value = this.settingUtils.get("Slider") + console.log(value); + } } }); this.settingUtils.addItem({ diff --git a/src/libs/index.d.ts b/src/libs/index.d.ts index 5181c19..cdb1ea3 100644 --- a/src/libs/index.d.ts +++ b/src/libs/index.d.ts @@ -12,7 +12,7 @@ interface ISettingItem { step: number; }; options?: { [key: string | number]: string }; - checkbox?: { + action?: { callback: () => void; } button?: { diff --git a/src/libs/setting-utils.ts b/src/libs/setting-utils.ts index 02053a2..8d2bc53 100644 --- a/src/libs/setting-utils.ts +++ b/src/libs/setting-utils.ts @@ -65,7 +65,7 @@ export class SettingUtils { } /** - * Get setting item value + * read the data after saving * @param key key name * @returns setting item value */ @@ -73,6 +73,27 @@ export class SettingUtils { return this.settings.get(key)?.value; } + /** + * Read in real time, + * do not read from the configuration file + * @param key key name + * @returns value in html + */ + take(key: string) { + let item = this.getElement(key) + this.settings.set(key, item) + if (item.type === 'button') { + return item.value + } + return item.value + } + + /** + * Set data to this.settings, + * but do not save it to the configuration file + * @param key key name + * @param value value + */ set(key: string, value: any) { let item = this.settings.get(key); if (item) { @@ -80,6 +101,7 @@ export class SettingUtils { this.updateElementFromValue(key); } } + /** * Set and save setting item value * If you want to set and save immediately you can use this method @@ -95,6 +117,18 @@ export class SettingUtils { } } + /** + * Read data from html and save it + * @param key key name + * @param value value + * @return value in html + */ + async takeAndSave(key: string) { + let value = this.take(key) + await this.save() + return value + } + /** * Disable setting item * @param key key name @@ -105,6 +139,7 @@ export class SettingUtils { element.disabled = true; } } + /** * Enable setting item * @param key key name @@ -122,6 +157,8 @@ export class SettingUtils { */ dump(): Object { let data: any = {}; + + for (let [key, item] of this.settings) { if (item.type === 'button') continue; data[key] = item.value; @@ -139,7 +176,7 @@ export class SettingUtils { element.checked = item.value; element.className = "b3-switch fn__flex-center"; itemElement = element; - element.onchange = item.checkbox?.callback ?? (() => { }); + element.onchange = item.action?.callback ?? (() => { }); break; case 'select': let selectElement: HTMLSelectElement = document.createElement('select'); @@ -153,6 +190,7 @@ export class SettingUtils { selectElement.appendChild(optionElement); } selectElement.value = item.value; + selectElement.onchange = item.action?.callback ?? (() => { }); itemElement = selectElement; break; case 'slider': @@ -166,6 +204,7 @@ export class SettingUtils { sliderElement.value = item.value; sliderElement.onchange = () => { sliderElement.ariaLabel = sliderElement.value; + item.action?.callback(); } itemElement = sliderElement; break; @@ -173,12 +212,15 @@ export class SettingUtils { let textInputElement: HTMLInputElement = document.createElement('input'); textInputElement.className = 'b3-text-field fn__flex-center fn__size200'; textInputElement.value = item.value; + textInputElement.onkeyup = item.action?.callback ?? (() => { }); itemElement = textInputElement; + break; case 'textarea': let textareaElement: HTMLTextAreaElement = document.createElement('textarea'); textareaElement.className = "b3-text-field fn__block"; textareaElement.value = item.value; + textareaElement.onkeyup = item.action?.callback ?? (() => { }); itemElement = textareaElement; break; case 'number': @@ -192,7 +234,7 @@ export class SettingUtils { let buttonElement: HTMLButtonElement = document.createElement('button'); buttonElement.className = "b3-button b3-button--outline fn__flex-center fn__size200"; buttonElement.innerText = item.button?.label ?? 'Button'; - buttonElement.onclick = item.button?.callback ?? (() => {}); + buttonElement.onclick = item.button?.callback ?? (() => { }); itemElement = buttonElement; break; case 'hint': @@ -212,11 +254,18 @@ export class SettingUtils { }) } + /** + * Set the value in the setting to the value of the element + * and return the element information + * @param key key name + * @returns element + */ getElement(key: string) { let item = this.settings.get(key); let element = this.elements.get(key) as any; switch (item.type) { case 'checkbox': + element.value = element.checked ? true : false; element.checked = item.value; break; case 'select':