SimpleChat:UI: Add Div wrapped label+element helpers

Move settings related elements to use the new div wrapped ones.
This commit is contained in:
HanishKVC 2024-05-27 01:40:52 +05:30
parent 94bc0b08d8
commit e17f5e0204
2 changed files with 51 additions and 4 deletions

View file

@ -576,17 +576,17 @@ class Me {
*/ */
show_settings(elDiv) { show_settings(elDiv) {
let bb = ui.el_create_boolbutton("SetCompletionFreshChatAlways", {true: "[+] CompletionFreshChatAlways", false: "[-] CompletionFreshChatAlways"}, this.bCompletionFreshChatAlways, (val)=>{ let bb = ui.el_creatediv_boolbutton("SetCompletionFreshChatAlways", "CompletionFreshChatAlways", {true: "[+] CompletionFreshChatAlways", false: "[-] CompletionFreshChatAlways"}, this.bCompletionFreshChatAlways, (val)=>{
this.bCompletionFreshChatAlways = val; this.bCompletionFreshChatAlways = val;
}); });
elDiv.appendChild(bb); elDiv.appendChild(bb);
bb = ui.el_create_boolbutton("SetCompletionInsertStandardRolePrefix", {true: "[+] CompletionInsertStandardRolePrefix", false: "[-] CompletionInsertStandardRolePrefix"}, this.bCompletionInsertStandardRolePrefix, (val)=>{ bb = ui.el_creatediv_boolbutton("SetCompletionInsertStandardRolePrefix", "CompletionInsertStandardRolePrefix", {true: "[+] CompletionInsertStandardRolePrefix", false: "[-] CompletionInsertStandardRolePrefix"}, this.bCompletionInsertStandardRolePrefix, (val)=>{
this.bCompletionInsertStandardRolePrefix = val; this.bCompletionInsertStandardRolePrefix = val;
}); });
elDiv.appendChild(bb); elDiv.appendChild(bb);
let sel = ui.el_create_select("SetChatHistoryInCtxt", this.sRecentUserMsgCnt, this.iRecentUserMsgCnt, (val)=>{ let sel = ui.el_creatediv_select("SetChatHistoryInCtxt", "ChatHistoryInCtxt", this.sRecentUserMsgCnt, this.iRecentUserMsgCnt, (val)=>{
this.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val]; this.iRecentUserMsgCnt = this.sRecentUserMsgCnt[val];
}); });
elDiv.appendChild(sel); elDiv.appendChild(sel);

View file

@ -62,7 +62,9 @@ export function el_create_append_p(text, elParent=undefined, id=undefined) {
} }
/** /**
* Create a para and set it up. Optionaly append it to a passed parent. * Create a button which represents bool value using specified text wrt true and false.
* When ever user clicks the button, it will toggle the value and update the shown text.
*
* @param {string} id * @param {string} id
* @param {{true: string, false: string}} texts * @param {{true: string, false: string}} texts
* @param {boolean} defaultValue * @param {boolean} defaultValue
@ -85,6 +87,31 @@ export function el_create_boolbutton(id, texts, defaultValue, cb) {
} }
/** /**
* Create a div wrapped button which represents bool value using specified text wrt true and false.
* @param {string} id
* @param {string} label
* @param {{ true: string; false: string; }} texts
* @param {boolean} defaultValue
* @param {(arg0: boolean) => void} cb
*/
export function el_creatediv_boolbutton(id, label, texts, defaultValue, cb) {
let div = document.createElement("div");
let lbl = document.createElement("label");
lbl.setAttribute("for", id);
lbl.innerText = label;
div.appendChild(lbl);
let sel = el_create_boolbutton(id, texts, defaultValue, cb);
div.appendChild(sel);
return div;
}
/**
* Create a select ui element, with a set of options to select from.
* * options: an object which contains name-value pairs
* * defaultOption: the value whose name should be choosen, by default.
* * cb : the call back returns the name string of the option selected.
*
* @param {string} id * @param {string} id
* @param {Object<string,*>} options * @param {Object<string,*>} options
* @param {*} defaultOption * @param {*} defaultOption
@ -114,3 +141,23 @@ export function el_create_select(id, options, defaultOption, cb) {
}) })
return el; return el;
} }
/**
* Create a div wrapped select ui element, with a set of options to select from.
*
* @param {string} id
* @param {any} label
* @param {{ [x: string]: any; }} options
* @param {any} defaultOption
* @param {(arg0: string) => void} cb
*/
export function el_creatediv_select(id, label, options, defaultOption, cb) {
let div = document.createElement("div");
let lbl = document.createElement("label");
lbl.setAttribute("for", id);
lbl.innerText = label;
div.appendChild(lbl);
let sel = el_create_select(id, options,defaultOption, cb);
div.appendChild(sel);
return div;
}