From 29c494a3f4aa977341f103f0b794b692f0b73f5e Mon Sep 17 00:00:00 2001 From: frostime Date: Tue, 30 Apr 2024 16:32:26 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(setting-utils):=20getter=20and?= =?UTF-8?q?=20setting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 12 +-- src/libs/index.d.ts | 4 +- src/libs/setting-utils.ts | 153 ++++++++++++++++++-------------------- 3 files changed, 81 insertions(+), 88 deletions(-) diff --git a/src/index.ts b/src/index.ts index 4af2041..6a59d4c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -176,7 +176,7 @@ export default class PluginSample extends Plugin { // Called when focus is lost and content changes callback: () => { // Return data and save it in real time - let value = this.settingUtils.takeAndSave("Input") + let value = this.settingUtils.takeAndSave("Input"); console.log(value); } } @@ -191,7 +191,7 @@ export default class PluginSample extends Plugin { action: { callback: () => { // Read data in real time - let value = this.settingUtils.take("InputArea") + let value = this.settingUtils.take("InputArea"); console.log(value); } } @@ -205,8 +205,8 @@ export default class PluginSample extends Plugin { action: { callback: () => { // Return data and save it in real time - let value = !this.settingUtils.get("Check") - this.settingUtils.set("Check", value) + let value = !this.settingUtils.get("Check"); + this.settingUtils.set("Check", value); console.log(value); } } @@ -224,7 +224,7 @@ export default class PluginSample extends Plugin { action: { callback: () => { // Read data in real time - let value = this.settingUtils.take("Select") + let value = this.settingUtils.take("Select"); console.log(value); } } @@ -244,7 +244,7 @@ export default class PluginSample extends Plugin { action:{ callback: () => { // Read data in real time - let value = this.settingUtils.take("Slider") + let value = this.settingUtils.take("Slider"); console.log(value); } } diff --git a/src/libs/index.d.ts b/src/libs/index.d.ts index 7ca733f..539076a 100644 --- a/src/libs/index.d.ts +++ b/src/libs/index.d.ts @@ -3,7 +3,7 @@ * @Author : frostime * @Date : 2024-04-19 18:30:12 * @FilePath : /src/libs/index.d.ts - * @LastEditTime : 2024-04-30 15:53:15 + * @LastEditTime : 2024-04-30 16:26:23 * @Description : */ type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint"; @@ -38,4 +38,6 @@ interface ISettingUtilsItem extends ISettingItem { callback: () => void; } createElement?: (currentVal: any) => HTMLElement; + getEleVal?: (ele: HTMLElement) => any; + setEleVal?: (ele: HTMLElement, val: any) => void; } diff --git a/src/libs/setting-utils.ts b/src/libs/setting-utils.ts index e611ce8..19952c4 100644 --- a/src/libs/setting-utils.ts +++ b/src/libs/setting-utils.ts @@ -3,60 +3,83 @@ * @Author : frostime * @Date : 2023-12-17 18:28:19 * @FilePath : /src/libs/setting-utils.ts - * @LastEditTime : 2024-04-30 16:09:54 + * @LastEditTime : 2024-04-30 16:28:00 * @Description : */ import { Plugin, Setting } from 'siyuan'; -const valueOf = (ele: HTMLElement, parseNumber: Function=parseInt) => { - let val: any = null; - if (ele instanceof HTMLInputElement) { - if (ele.type === 'checkbox') { - val = ele.checked; - } else { - if (ele.type === 'number') { - val = parseNumber(ele.value); - } else { - val = ele.value; + +/** + * The default function to get the value of the element + * @param type + * @returns + */ +const createDefaultGetter = (type: TSettingItemType) => { + let getter: (ele: HTMLElement) => any; + switch (type) { + case 'checkbox': + getter = (ele: HTMLInputElement) => { + return ele.checked; } - } - } else if (ele instanceof HTMLSelectElement) { - val = ele.value; - } else if (ele instanceof HTMLTextAreaElement) { - val = ele.value; - } else { - val = ele?.textContent; + break; + case 'select': + case 'slider': + case 'textinput': + case 'textarea': + getter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => { + return ele.value; + } + break; + case 'number': + getter = (ele: HTMLInputElement) => { + return parseInt(ele.value); + } + break; + default: + getter = (ele: HTMLElement) => { + return ele?.textContent; + } + break; } - return val; + return getter; } -const setValue = (ele: HTMLElement, value: any) => { - if (ele === null || ele === undefined) return; - if (ele instanceof HTMLInputElement) { - if (ele.type === 'checkbox') { - ele.checked = value; - } else { - ele.value = value; - } - if (ele.type === 'range') { - ele.ariaLabel = value; - } - } else if (ele instanceof HTMLSelectElement) { - ele.value = value; - } else if (ele instanceof HTMLTextAreaElement) { - ele.value = value; - } else { - ele.textContent = value; + +/** + * The default function to set the value of the element + * @param type + * @returns + */ +const createDefaultSetter = (type: TSettingItemType) => { + let setter: (ele: HTMLElement, value: any) => void; + switch (type) { + case 'checkbox': + setter = (ele: HTMLInputElement, value: any) => { + ele.checked = value; + } + break; + case 'select': + case 'slider': + case 'textinput': + case 'textarea': + case 'number': + setter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: any) => { + ele.value = value; + } + break; } + return setter; + } + export class SettingUtils { plugin: Plugin; name: string; file: string; - settings: Map = new Map(); + settings: Map = new Map(); elements: Map = new Map(); constructor(args: { @@ -157,14 +180,15 @@ export class SettingUtils { * @returns value in html */ take(key: string, apply: boolean = false) { + let item = this.settings.get(key); let element = this.elements.get(key) as any; - if (!element){ + if (!element) { return } if (apply) { this.updateValueFromElement(key); } - return valueOf(element) + return item.getEleVal(element); } /** @@ -216,6 +240,13 @@ export class SettingUtils { addItem(item: ISettingUtilsItem) { this.settings.set(item.key, item); + if (item.getEleVal === undefined) { + item.getEleVal = createDefaultGetter(item.type); + } + if (item.setEleVal === undefined) { + item.setEleVal = createDefaultSetter(item.type); + } + if (item.createElement === undefined) { let itemElement = this.createDefaultElement(item); this.elements.set(item.key, itemElement); @@ -338,53 +369,13 @@ export class SettingUtils { let item = this.settings.get(key); if (item.type === 'button') return; let element = this.elements.get(key) as any; - item.value = valueOf(element); - // switch (item.type) { - // case 'checkbox': - // item.value = element.checked; - // break; - // case 'select': - // item.value = element.value; - // break; - // case 'slider': - // item.value = element.value; - // break; - // case 'textinput': - // item.value = element.value; - // break; - // case 'textarea': - // item.value = element.value; - // break; - // case 'number': - // item.value = parseInt(element.value); - // break; - // } + item.value = item.getEleVal(element); } private updateElementFromValue(key: string) { let item = this.settings.get(key); if (item.type === 'button') return; let element = this.elements.get(key) as any; - setValue(element, item.value); - // switch (item.type) { - // case 'checkbox': - // element.checked = item.value; - // break; - // case 'select': - // element.value = item.value; - // break; - // case 'slider': - // element.value = item.value; - // break; - // case 'textinput': - // element.value = item.value; - // break; - // case 'textarea': - // element.value = item.value; - // break; - // case 'number': - // element.value = item.value; - // break; - // } + item.setEleVal(element, item.value); } } \ No newline at end of file