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

Merge pull request #29 from tengfei-xy/main

Browse source 
实时读取和实时保存
This commit is contained in:
Frostime 2024-04-06 16:33:26 +08:00 • committed by GitHub
commit cd38b61aba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 105 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/index.ts
View file

@ -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({

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

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

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

@ -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':
@ -178,7 +234,7 @@ export class SettingUtils {
let buttonElement: HTMLButtonElement = document.createElement('button');
buttonElement.className = "b3-button b3-button--outline fn__flex-center fn__size200";
buttonElement.innerText = item.button?.label ?? 'Button';
buttonElement.onclick = item.button?.callback ?? (() => {});
buttonElement.onclick = item.button?.callback ?? (() => { });
itemElement = buttonElement;
break;
case 'hint':
@ -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':