Merge pull request #29 from tengfei-xy/main

实时读取和实时保存

src/index.ts

@@ -177,6 +177,14 @@ export default class PluginSample extends Plugin {
             type: "textinput",
             title: "Readonly text",
             description: "Input description",
+            action: {
+                // Called when focus is lost and content changes
+                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 +192,14 @@ export default class PluginSample extends Plugin {
             type: "textarea",
             title: "Readonly text",
             description: "Input description",
+            // Called when focus is lost and content changes
+            action: {
+                callback: () => {
+                    // Read data in real time
+                    let value = this.settingUtils.take("InputArea")
+                    console.log(value);
+                }
+            }
         });
         this.settingUtils.addItem({
             key: "Check",
@@ -191,9 +207,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 +220,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 +244,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({

src/libs/index.d.ts

@@ -12,7 +12,7 @@ interface ISettingItem {
         step: number;
     };
     options?: { [key: string | number]: string };
-    checkbox?: {
+    action?: {
         callback: () => void;
     }
     button?: {

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) {
@@ -81,6 +102,33 @@ export class SettingUtils {
         }
     }
 
+    /**
+     * Set and save setting item value
+     * If you want to set and save immediately you can use this method
+     * @param key key name
+     * @param value value
+     */
+    async setAndSave(key: string, value: any) {
+        let item = this.settings.get(key);
+        if (item) {
+            item.value = value;
+            this.updateElementFromValue(key);
+            await this.save()
+        }
+    }
+
+    /**
+     * 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
@@ -91,6 +139,7 @@ export class SettingUtils {
             element.disabled = true;
         }
     }
+
     /**
      * Enable setting item
      * @param key key name
@@ -108,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;
@@ -125,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');
@@ -139,6 +190,7 @@ export class SettingUtils {
                     selectElement.appendChild(optionElement);
                 }
                 selectElement.value = item.value;
+                selectElement.onchange = item.action?.callback ?? (() => { });
                 itemElement = selectElement;
                 break;
             case 'slider':
@@ -152,6 +204,7 @@ export class SettingUtils {
                 sliderElement.value = item.value;
                 sliderElement.onchange = () => {
                     sliderElement.ariaLabel = sliderElement.value;
+                    item.action?.callback();
                 }
                 itemElement = sliderElement;
                 break;
@@ -159,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.onchange = 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.onchange = item.action?.callback ?? (() => { });
                 itemElement = textareaElement;
                 break;
             case 'number':
@@ -198,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':