Skip to content

Commit 29c494a

Browse files
frostimefrostime
committed
✨ feat(setting-utils): getter and setting
1 parent 59daefa commit 29c494a

File tree

3 files changed

+81
-88
lines changed

3 files changed

+81
-88
lines changed

‎src/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export default class PluginSample extends Plugin {
176176
// Called when focus is lost and content changes
177177
callback: () => {
178178
// Return data and save it in real time
179-
let value = this.settingUtils.takeAndSave("Input")
179+
let value = this.settingUtils.takeAndSave("Input");
180180
console.log(value);
181181
}
182182
}
@@ -191,7 +191,7 @@ export default class PluginSample extends Plugin {
191191
action: {
192192
callback: () => {
193193
// Read data in real time
194-
let value = this.settingUtils.take("InputArea")
194+
let value = this.settingUtils.take("InputArea");
195195
console.log(value);
196196
}
197197
}
@@ -205,8 +205,8 @@ export default class PluginSample extends Plugin {
205205
action: {
206206
callback: () => {
207207
// Return data and save it in real time
208-
let value = !this.settingUtils.get("Check")
209-
this.settingUtils.set("Check", value)
208+
let value = !this.settingUtils.get("Check");
209+
this.settingUtils.set("Check", value);
210210
console.log(value);
211211
}
212212
}
@@ -224,7 +224,7 @@ export default class PluginSample extends Plugin {
224224
action: {
225225
callback: () => {
226226
// Read data in real time
227-
let value = this.settingUtils.take("Select")
227+
let value = this.settingUtils.take("Select");
228228
console.log(value);
229229
}
230230
}
@@ -244,7 +244,7 @@ export default class PluginSample extends Plugin {
244244
action:{
245245
callback: () => {
246246
// Read data in real time
247-
let value = this.settingUtils.take("Slider")
247+
let value = this.settingUtils.take("Slider");
248248
console.log(value);
249249
}
250250
}

‎src/libs/index.d.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author : frostime
44
* @Date : 2024-04-19 18:30:12
55
* @FilePath : /src/libs/index.d.ts
6-
* @LastEditTime : 2024-04-30 15:53:15
6+
* @LastEditTime : 2024-04-30 16:26:23
77
* @Description :
88
*/
99
type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint";
@@ -38,4 +38,6 @@ interface ISettingUtilsItem extends ISettingItem {
3838
callback: () => void;
3939
}
4040
createElement?: (currentVal: any) => HTMLElement;
41+
getEleVal?: (ele: HTMLElement) => any;
42+
setEleVal?: (ele: HTMLElement, val: any) => void;
4143
}

‎src/libs/setting-utils.ts‎

Lines changed: 72 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,83 @@
33
* @Author : frostime
44
* @Date : 2023-12-17 18:28:19
55
* @FilePath : /src/libs/setting-utils.ts
6-
* @LastEditTime : 2024-04-30 16:09:54
6+
* @LastEditTime : 2024-04-30 16:28:00
77
* @Description :
88
*/
99

1010
import { Plugin, Setting } from 'siyuan';
1111

12-
const valueOf = (ele: HTMLElement, parseNumber: Function=parseInt) => {
13-
let val: any = null;
14-
if (ele instanceof HTMLInputElement) {
15-
if (ele.type === 'checkbox') {
16-
val = ele.checked;
17-
} else {
18-
if (ele.type === 'number') {
19-
val = parseNumber(ele.value);
20-
} else {
21-
val = ele.value;
12+
13+
/**
14+
* The default function to get the value of the element
15+
* @param type
16+
* @returns
17+
*/
18+
const createDefaultGetter = (type: TSettingItemType) => {
19+
let getter: (ele: HTMLElement) => any;
20+
switch (type) {
21+
case 'checkbox':
22+
getter = (ele: HTMLInputElement) => {
23+
return ele.checked;
2224
}
23-
}
24-
} else if (ele instanceof HTMLSelectElement) {
25-
val = ele.value;
26-
} else if (ele instanceof HTMLTextAreaElement) {
27-
val = ele.value;
28-
} else {
29-
val = ele?.textContent;
25+
break;
26+
case 'select':
27+
case 'slider':
28+
case 'textinput':
29+
case 'textarea':
30+
getter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
31+
return ele.value;
32+
}
33+
break;
34+
case 'number':
35+
getter = (ele: HTMLInputElement) => {
36+
return parseInt(ele.value);
37+
}
38+
break;
39+
default:
40+
getter = (ele: HTMLElement) => {
41+
return ele?.textContent;
42+
}
43+
break;
3044
}
31-
return val;
45+
return getter;
3246
}
3347

34-
const setValue = (ele: HTMLElement, value: any) => {
35-
if (ele === null || ele === undefined) return;
36-
if (ele instanceof HTMLInputElement) {
37-
if (ele.type === 'checkbox') {
38-
ele.checked = value;
39-
} else {
40-
ele.value = value;
41-
}
42-
if (ele.type === 'range') {
43-
ele.ariaLabel = value;
44-
}
45-
} else if (ele instanceof HTMLSelectElement) {
46-
ele.value = value;
47-
} else if (ele instanceof HTMLTextAreaElement) {
48-
ele.value = value;
49-
} else {
50-
ele.textContent = value;
48+
49+
/**
50+
* The default function to set the value of the element
51+
* @param type
52+
* @returns
53+
*/
54+
const createDefaultSetter = (type: TSettingItemType) => {
55+
let setter: (ele: HTMLElement, value: any) => void;
56+
switch (type) {
57+
case 'checkbox':
58+
setter = (ele: HTMLInputElement, value: any) => {
59+
ele.checked = value;
60+
}
61+
break;
62+
case 'select':
63+
case 'slider':
64+
case 'textinput':
65+
case 'textarea':
66+
case 'number':
67+
setter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: any) => {
68+
ele.value = value;
69+
}
70+
break;
5171
}
72+
return setter;
73+
5274
}
5375

76+
5477
export class SettingUtils {
5578
plugin: Plugin;
5679
name: string;
5780
file: string;
5881

59-
settings: Map<string, ISettingItemCore> = new Map();
82+
settings: Map<string, ISettingUtilsItem> = new Map();
6083
elements: Map<string, HTMLElement> = new Map();
6184

6285
constructor(args: {
@@ -157,14 +180,15 @@ export class SettingUtils {
157180
* @returns value in html
158181
*/
159182
take(key: string, apply: boolean = false) {
183+
let item = this.settings.get(key);
160184
let element = this.elements.get(key) as any;
161-
if (!element){
185+
if (!element) {
162186
return
163187
}
164188
if (apply) {
165189
this.updateValueFromElement(key);
166190
}
167-
return valueOf(element)
191+
return item.getEleVal(element);
168192
}
169193

170194
/**
@@ -216,6 +240,13 @@ export class SettingUtils {
216240

217241
addItem(item: ISettingUtilsItem) {
218242
this.settings.set(item.key, item);
243+
if (item.getEleVal === undefined) {
244+
item.getEleVal = createDefaultGetter(item.type);
245+
}
246+
if (item.setEleVal === undefined) {
247+
item.setEleVal = createDefaultSetter(item.type);
248+
}
249+
219250
if (item.createElement === undefined) {
220251
let itemElement = this.createDefaultElement(item);
221252
this.elements.set(item.key, itemElement);
@@ -338,53 +369,13 @@ export class SettingUtils {
338369
let item = this.settings.get(key);
339370
if (item.type === 'button') return;
340371
let element = this.elements.get(key) as any;
341-
item.value = valueOf(element);
342-
// switch (item.type) {
343-
// case 'checkbox':
344-
// item.value = element.checked;
345-
// break;
346-
// case 'select':
347-
// item.value = element.value;
348-
// break;
349-
// case 'slider':
350-
// item.value = element.value;
351-
// break;
352-
// case 'textinput':
353-
// item.value = element.value;
354-
// break;
355-
// case 'textarea':
356-
// item.value = element.value;
357-
// break;
358-
// case 'number':
359-
// item.value = parseInt(element.value);
360-
// break;
361-
// }
372+
item.value = item.getEleVal(element);
362373
}
363374

364375
private updateElementFromValue(key: string) {
365376
let item = this.settings.get(key);
366377
if (item.type === 'button') return;
367378
let element = this.elements.get(key) as any;
368-
setValue(element, item.value);
369-
// switch (item.type) {
370-
// case 'checkbox':
371-
// element.checked = item.value;
372-
// break;
373-
// case 'select':
374-
// element.value = item.value;
375-
// break;
376-
// case 'slider':
377-
// element.value = item.value;
378-
// break;
379-
// case 'textinput':
380-
// element.value = item.value;
381-
// break;
382-
// case 'textarea':
383-
// element.value = item.value;
384-
// break;
385-
// case 'number':
386-
// element.value = item.value;
387-
// break;
388-
// }
379+
item.setEleVal(element, item.value);
389380
}
390381
}

0 commit comments

Comments
 (0)