fixes to settings.js

This commit is contained in:
MathMan05 2024-08-08 14:56:17 -05:00
parent ae76f2636e
commit ba1df39624
2 changed files with 126 additions and 36 deletions

View file

@ -9,7 +9,7 @@ interface OptionsElement {
class Buttons implements OptionsElement{
readonly name:string;
readonly buttons:[string,Options|string][];
bigtable:HTMLDivElement;
buttonList:HTMLDivElement;
warndiv:HTMLElement;
constructor(name:string){
this.buttons=[];
@ -21,10 +21,10 @@ class Buttons implements OptionsElement{
return thing;
}
generateHTML(){
const bigtable=document.createElement("div");
bigtable.classList.add("Buttons");
bigtable.classList.add("flexltr");
this.bigtable=bigtable;
const buttonList=document.createElement("div");
buttonList.classList.add("Buttons");
buttonList.classList.add("flexltr");
this.buttonList=buttonList;
const htmlarea=document.createElement("div");
htmlarea.classList.add("flexgrow");
const buttonTable=document.createElement("div");
@ -42,28 +42,28 @@ class Buttons implements OptionsElement{
buttonTable.append(button);
}
this.generateHTMLArea(this.buttons[0][1],htmlarea);
bigtable.append(buttonTable);
bigtable.append(htmlarea);
return bigtable;
buttonList.append(buttonTable);
buttonList.append(htmlarea);
return buttonList;
}
handleString(str:string):HTMLElement{
const div=document.createElement("div");
const div=document.createElement("span");
div.textContent=str;
return div;
}
private generateHTMLArea(genation:Options|string,htmlarea:HTMLElement){
private generateHTMLArea(buttonInfo:Options|string,htmlarea:HTMLElement){
let html:HTMLElement;
if(genation instanceof Options){
html=genation.generateHTML();
if(buttonInfo instanceof Options){
html=buttonInfo.generateHTML();
}else{
html=this.handleString(genation);
html=this.handleString(buttonInfo);
}
htmlarea.innerHTML="";
htmlarea.append(html);
}
changed(html:HTMLElement){
this.warndiv=html;
this.bigtable.append(html);
this.buttonList.append(html);
}
save(){}
submit(){
@ -175,6 +175,51 @@ class TextInput implements OptionsElement{
this.onSubmit(this.textContent);
}
}
class SelectInput implements OptionsElement{
readonly label:string;
readonly owner:Options;
readonly onSubmit:(str:number)=>void;
options:string[];
index:number;
select:WeakRef<HTMLSelectElement>
constructor(label:string,onSubmit:(str:number)=>void,options:string[],owner:Options,{defaultIndex=0}={}){
this.label=label;
this.index=defaultIndex;
this.owner=owner;
this.onSubmit=onSubmit;
this.options=options;
}
generateHTML():HTMLDivElement{
const div=document.createElement("div");
const span=document.createElement("span");
span.textContent=this.label;
div.append(span);
const select=document.createElement("select");
select.selectedIndex=this.index;
select.onchange=this.onChange.bind(this);
for(const thing of this.options){
const option = document.createElement("option");
option.textContent=thing;
select.appendChild(option);
}
this.select=new WeakRef(select);
div.append(select);
return div;
}
private onChange(ev:Event){
this.owner.changed();
const value=this.select.deref().selectedIndex;
this.onchange(value);
this.index=value;
}
onchange:(str:number)=>void=_=>{};
watchForChange(func:(str:number)=>void){
this.onchange=func;
}
submit(){
this.onSubmit(this.index);
}
}
class MDInput implements OptionsElement{
readonly label:string;
readonly owner:Options;
@ -358,12 +403,12 @@ class Options implements OptionsElement{
div.append(title);
title.classList.add("settingstitle");
}
const table=document.createElement("div");
table.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
const container=document.createElement("div");
container.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
for(const thing of this.options){
table.append(thing.generateHTML());
container.append(thing.generateHTML());
}
div.append(table);
div.append(container);
return div;
}
changed(){