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): getter and setting

Browse source
This commit is contained in:
frostime 2024-04-30 16:32:26 +08:00
parent 59daefa941
commit 29c494a3f4
3 changed files with 81 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/index.ts
View file

@ -176,7 +176,7 @@ export default class PluginSample extends Plugin {
// Called when focus is lost and content changes // Called when focus is lost and content changes
callback: () => { callback: () => {
// Return data and save it in real time // Return data and save it in real time
let value = this.settingUtils.takeAndSave("Input") let value = this.settingUtils.takeAndSave("Input");
console.log(value); console.log(value);
} }
} }
@ -191,7 +191,7 @@ export default class PluginSample extends Plugin {
action: { action: {
callback: () => { callback: () => {
// Read data in real time // Read data in real time
let value = this.settingUtils.take("InputArea") let value = this.settingUtils.take("InputArea");
console.log(value); console.log(value);
} }
} }
@ -205,8 +205,8 @@ export default class PluginSample extends Plugin {
action: { action: {
callback: () => { callback: () => {
// Return data and save it in real time // Return data and save it in real time
let value = !this.settingUtils.get("Check") let value = !this.settingUtils.get("Check");
this.settingUtils.set("Check", value) this.settingUtils.set("Check", value);
console.log(value); console.log(value);
} }
} }
@ -224,7 +224,7 @@ export default class PluginSample extends Plugin {
action: { action: {
callback: () => { callback: () => {
// Read data in real time // Read data in real time
let value = this.settingUtils.take("Select") let value = this.settingUtils.take("Select");
console.log(value); console.log(value);
} }
} }
@ -244,7 +244,7 @@ export default class PluginSample extends Plugin {
action:{ action:{
callback: () => { callback: () => {
// Read data in real time // Read data in real time
let value = this.settingUtils.take("Slider") let value = this.settingUtils.take("Slider");
console.log(value); console.log(value);
} }
} }

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

@ -3,7 +3,7 @@
* @Author : frostime * @Author : frostime
* @Date : 2024-04-19 18:30:12 * @Date : 2024-04-19 18:30:12
* @FilePath : /src/libs/index.d.ts * @FilePath : /src/libs/index.d.ts
* @LastEditTime : 2024-04-30 15:53:15 * @LastEditTime : 2024-04-30 16:26:23
* @Description : * @Description :
*/ */
type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint"; type TSettingItemType = "checkbox" | "select" | "textinput" | "textarea" | "number" | "slider" | "button" | "hint";
@ -38,4 +38,6 @@ interface ISettingUtilsItem extends ISettingItem {
callback: () => void; callback: () => void;
} }
createElement?: (currentVal: any) => HTMLElement; createElement?: (currentVal: any) => HTMLElement;
getEleVal?: (ele: HTMLElement) => any;
setEleVal?: (ele: HTMLElement, val: any) => void;
} }

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

@ -3,60 +3,83 @@
* @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-30 16:09:54 * @LastEditTime : 2024-04-30 16:28:00
* @Description : * @Description :
*/ */
import { Plugin, Setting } from 'siyuan'; import { Plugin, Setting } from 'siyuan';
const valueOf = (ele: HTMLElement, parseNumber: Function=parseInt) => {
let val: any = null; /**
if (ele instanceof HTMLInputElement) { * The default function to get the value of the element
if (ele.type === 'checkbox') { * @param type
val = ele.checked; * @returns
} else { */
if (ele.type === 'number') { const createDefaultGetter = (type: TSettingItemType) => {
val = parseNumber(ele.value); let getter: (ele: HTMLElement) => any;
} else { switch (type) {
val = ele.value; case 'checkbox':
getter = (ele: HTMLInputElement) => {
return ele.checked;
} }
break;
case 'select':
case 'slider':
case 'textinput':
case 'textarea':
getter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
return ele.value;
} }
} else if (ele instanceof HTMLSelectElement) { break;
val = ele.value; case 'number':
} else if (ele instanceof HTMLTextAreaElement) { getter = (ele: HTMLInputElement) => {
val = ele.value; return parseInt(ele.value);
} else {
val = ele?.textContent;
} }
return val; break;
default:
getter = (ele: HTMLElement) => {
return ele?.textContent;
}
break;
}
return getter;
} }
const setValue = (ele: HTMLElement, value: any) => {
if (ele === null || ele === undefined) return; /**
if (ele instanceof HTMLInputElement) { * The default function to set the value of the element
if (ele.type === 'checkbox') { * @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; ele.checked = value;
} else { }
break;
case 'select':
case 'slider':
case 'textinput':
case 'textarea':
case 'number':
setter = (ele: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: any) => {
ele.value = value; ele.value = value;
} }
if (ele.type === 'range') { break;
ele.ariaLabel = value;
}
} else if (ele instanceof HTMLSelectElement) {
ele.value = value;
} else if (ele instanceof HTMLTextAreaElement) {
ele.value = value;
} else {
ele.textContent = value;
} }
return setter;
} }
export class SettingUtils { export class SettingUtils {
plugin: Plugin; plugin: Plugin;
name: string; name: string;
file: string; file: string;
settings: Map<string, ISettingItemCore> = new Map(); settings: Map<string, ISettingUtilsItem> = new Map();
elements: Map<string, HTMLElement> = new Map(); elements: Map<string, HTMLElement> = new Map();
constructor(args: { constructor(args: {
@ -157,14 +180,15 @@ export class SettingUtils {
* @returns value in html * @returns value in html
*/ */
take(key: string, apply: boolean = false) { take(key: string, apply: boolean = false) {
let item = this.settings.get(key);
let element = this.elements.get(key) as any; let element = this.elements.get(key) as any;
if (!element){ if (!element) {
return return
} }
if (apply) { if (apply) {
this.updateValueFromElement(key); this.updateValueFromElement(key);
} }
return valueOf(element) return item.getEleVal(element);
} }
/** /**
@ -216,6 +240,13 @@ export class SettingUtils {
addItem(item: ISettingUtilsItem) { addItem(item: ISettingUtilsItem) {
this.settings.set(item.key, item); 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) { if (item.createElement === undefined) {
let itemElement = this.createDefaultElement(item); let itemElement = this.createDefaultElement(item);
this.elements.set(item.key, itemElement); this.elements.set(item.key, itemElement);
@ -338,53 +369,13 @@ export class SettingUtils {
let item = this.settings.get(key); let item = this.settings.get(key);
if (item.type === 'button') return; if (item.type === 'button') return;
let element = this.elements.get(key) as any; let element = this.elements.get(key) as any;
item.value = valueOf(element); item.value = item.getEleVal(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;
// }
} }
private updateElementFromValue(key: string) { private updateElementFromValue(key: string) {
let item = this.settings.get(key); let item = this.settings.get(key);
if (item.type === 'button') return; if (item.type === 'button') return;
let element = this.elements.get(key) as any; let element = this.elements.get(key) as any;
setValue(element, item.value); item.setEleVal(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;
// }
} }
} }