massivebox/siyuan-jsdraw-plugin
massivebox/siyuan-jsdraw-plugin
2
1
Fork 0
forked from mirrors/plugin-sample-vite-svelte
Code Issues 4 Pull requests Projects 3 Releases 7 Packages Wiki Activity Actions

✨ feat(setting-utils): 增加自定义元素功能

Browse source
This commit is contained in:
frostime 2024-04-29 17:43:02 +08:00
parent 57cc62f7b5
commit 0df9ec29ea
2 changed files with 89 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/libs/index.d.ts vendored
View file

@ -19,4 +19,5 @@ interface ISettingItem {
label: string; label: string;
callback: () => void; callback: () => void;
} }
createElement?: (currentVal: any) => HTMLElement;
} }

148
src/libs/setting-utils.ts
View file

@ -3,35 +3,45 @@
* @Author : frostime * @Author : frostime
* @Date : 2023-12-17 18:28:19 * @Date : 2023-12-17 18:28:19
* @FilePath : /src/libs/setting-utils.ts * @FilePath : /src/libs/setting-utils.ts
* @LastEditTime : 2024-04-28 17:49:31 * @LastEditTime : 2024-04-29 17:17:19
* @Description : * @Description :
*/ */
import { Plugin, Setting } from 'siyuan'; import { Plugin, Setting } from 'siyuan';
const valueOf = (ele: HTMLElement) => { const valueOf = (ele: HTMLElement, parseNumber: Function=parseInt) => {
let val: any = null;
if (ele instanceof HTMLInputElement) { if (ele instanceof HTMLInputElement) {
if (ele.type === 'checkbox') { if (ele.type === 'checkbox') {
return ele.checked; val = ele.checked;
} else { } else {
return ele.value; if (ele.type === 'number') {
val = parseNumber(ele.value);
} else {
val = ele.value;
}
} }
} else if (ele instanceof HTMLSelectElement) { } else if (ele instanceof HTMLSelectElement) {
return ele.value; val = ele.value;
} else if (ele instanceof HTMLTextAreaElement) { } else if (ele instanceof HTMLTextAreaElement) {
return ele.value; val = ele.value;
} else { } else {
return ele.textContent; val = ele?.textContent;
} }
return val;
} }
const setValue = (ele: HTMLElement, value: any) => { const setValue = (ele: HTMLElement, value: any) => {
if (ele === null || ele === undefined) return;
if (ele instanceof HTMLInputElement) { if (ele instanceof HTMLInputElement) {
if (ele.type === 'checkbox') { if (ele.type === 'checkbox') {
ele.checked = value; ele.checked = value;
} else { } else {
ele.value = value; ele.value = value;
} }
if (ele.type === 'range') {
ele.ariaLabel = value;
}
} else if (ele instanceof HTMLSelectElement) { } else if (ele instanceof HTMLSelectElement) {
ele.value = value; ele.value = value;
} else if (ele instanceof HTMLTextAreaElement) { } else if (ele instanceof HTMLTextAreaElement) {
@ -74,7 +84,7 @@ export class SettingUtils {
this.save(); this.save();
}, },
destroyCallback: () => { destroyCallback: () => {
//从值恢复元素 //Restore the original value
for (let key of this.settings.keys()) { for (let key of this.settings.keys()) {
this.updateElementFromValue(key); this.updateElementFromValue(key);
} }
@ -197,8 +207,6 @@ export class SettingUtils {
*/ */
dump(): Object { dump(): Object {
let data: any = {}; let data: any = {};
for (let [key, item] of this.settings) { for (let [key, item] of this.settings) {
if (item.type === 'button') continue; if (item.type === 'button') continue;
data[key] = item.value; data[key] = item.value;
@ -208,6 +216,33 @@ export class SettingUtils {
addItem(item: ISettingItem) { addItem(item: ISettingItem) {
this.settings.set(item.key, item); this.settings.set(item.key, item);
if (item.createElement === undefined) {
let itemElement = this.createDefaultElement(item);
this.elements.set(item.key, itemElement);
this.plugin.setting.addItem({
title: item.title,
description: item?.description,
createActionElement: () => {
this.updateElementFromValue(item.key);
let element = this.getElement(item.key);
return element;
}
});
} else {
this.plugin.setting.addItem({
title: item.title,
description: item?.description,
createActionElement: () => {
let val = this.get(item.key);
let element = item.createElement(val);
this.elements.set(item.key, element);
return element;
}
});
}
}
createDefaultElement(item: ISettingItem) {
let itemElement: HTMLElement; let itemElement: HTMLElement;
switch (item.type) { switch (item.type) {
case 'checkbox': case 'checkbox':
@ -283,16 +318,7 @@ export class SettingUtils {
itemElement = hintElement; itemElement = hintElement;
break; break;
} }
this.elements.set(item.key, itemElement); return itemElement;
this.plugin.setting.addItem({
title: item.title,
description: item?.description,
createActionElement: () => {
this.updateElementFromValue(item.key);
let element = this.getElement(item.key);
return element;
}
})
} }
/** /**
@ -309,50 +335,52 @@ export class SettingUtils {
private updateValueFromElement(key: string) { private updateValueFromElement(key: string) {
let item = this.settings.get(key); let item = this.settings.get(key);
let element = this.elements.get(key) as any; let element = this.elements.get(key) as any;
switch (item.type) { item.value = valueOf(element);
case 'checkbox': // switch (item.type) {
item.value = element.checked; // case 'checkbox':
break; // item.value = element.checked;
case 'select': // break;
item.value = element.value; // case 'select':
break; // item.value = element.value;
case 'slider': // break;
item.value = element.value; // case 'slider':
break; // item.value = element.value;
case 'textinput': // break;
item.value = element.value; // case 'textinput':
break; // item.value = element.value;
case 'textarea': // break;
item.value = element.value; // case 'textarea':
break; // item.value = element.value;
case 'number': // break;
item.value = parseInt(element.value); // case 'number':
break; // item.value = parseInt(element.value);
} // break;
// }
} }
private updateElementFromValue(key: string) { private updateElementFromValue(key: string) {
let item = this.settings.get(key); let item = this.settings.get(key);
let element = this.elements.get(key) as any; let element = this.elements.get(key) as any;
switch (item.type) { setValue(element, item.value);
case 'checkbox': // switch (item.type) {
element.checked = item.value; // case 'checkbox':
break; // element.checked = item.value;
case 'select': // break;
element.value = item.value; // case 'select':
break; // element.value = item.value;
case 'slider': // break;
element.value = item.value; // case 'slider':
break; // element.value = item.value;
case 'textinput': // break;
element.value = item.value; // case 'textinput':
break; // element.value = item.value;
case 'textarea': // break;
element.value = item.value; // case 'textarea':
break; // element.value = item.value;
case 'number': // break;
element.value = item.value; // case 'number':
break; // element.value = item.value;
} // break;
// }
} }
} }