Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes to settings.js

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

81
.dist/settings.js
View File

@@ -4,7 +4,7 @@ import { Role } from "./role.js";
class Buttons { class Buttons {
name; name;
buttons; buttons;
bigtable; buttonList;
warndiv; warndiv;
constructor(name) { constructor(name) {
this.buttons = []; this.buttons = [];
@@ -18,10 +18,10 @@ class Buttons {
return thing; return thing;
} }
generateHTML() { generateHTML() {
const bigtable = document.createElement("div"); const buttonList = document.createElement("div");
bigtable.classList.add("Buttons"); buttonList.classList.add("Buttons");
bigtable.classList.add("flexltr"); buttonList.classList.add("flexltr");
this.bigtable = bigtable; this.buttonList = buttonList;
const htmlarea = document.createElement("div"); const htmlarea = document.createElement("div");
htmlarea.classList.add("flexgrow"); htmlarea.classList.add("flexgrow");
const buttonTable = document.createElement("div"); const buttonTable = document.createElement("div");
@@ -39,29 +39,29 @@ class Buttons {
buttonTable.append(button); buttonTable.append(button);
} }
this.generateHTMLArea(this.buttons[0][1], htmlarea); this.generateHTMLArea(this.buttons[0][1], htmlarea);
bigtable.append(buttonTable); buttonList.append(buttonTable);
bigtable.append(htmlarea); buttonList.append(htmlarea);
return bigtable; return buttonList;
} }
handleString(str) { handleString(str) {
const div = document.createElement("div"); const div = document.createElement("span");
div.textContent = str; div.textContent = str;
return div; return div;
} }
generateHTMLArea(genation, htmlarea) { generateHTMLArea(buttonInfo, htmlarea) {
let html; let html;
if (genation instanceof Options) { if (buttonInfo instanceof Options) {
html = genation.generateHTML(); html = buttonInfo.generateHTML();
} }
else { else {
html = this.handleString(genation); html = this.handleString(buttonInfo);
} }
htmlarea.innerHTML = ""; htmlarea.innerHTML = "";
htmlarea.append(html); htmlarea.append(html);
} }
changed(html) { changed(html) {
this.warndiv = html; this.warndiv = html;
this.bigtable.append(html); this.buttonList.append(html);
} }
save() { } save() { }
submit() { submit() {
@@ -175,6 +175,51 @@ class TextInput {
this.onSubmit(this.textContent); this.onSubmit(this.textContent);
} }
} }
class SelectInput {
label;
owner;
onSubmit;
options;
index;
select;
constructor(label, onSubmit, options, owner, { defaultIndex = 0 } = {}) {
this.label = label;
this.index = defaultIndex;
this.owner = owner;
this.onSubmit = onSubmit;
this.options = options;
}
generateHTML() {
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;
}
onChange(ev) {
this.owner.changed();
const value = this.select.deref().selectedIndex;
this.onchange(value);
this.index = value;
}
onchange = _ => { };
watchForChange(func) {
this.onchange = func;
}
submit() {
this.onSubmit(this.index);
}
}
class MDInput { class MDInput {
label; label;
owner; owner;
@@ -358,12 +403,12 @@ class Options {
div.append(title); div.append(title);
title.classList.add("settingstitle"); title.classList.add("settingstitle");
} }
const table = document.createElement("div"); const container = document.createElement("div");
table.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace"); container.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace");
for (const thing of this.options) { for (const thing of this.options) {
table.append(thing.generateHTML()); container.append(thing.generateHTML());
} }
div.append(table); div.append(container);
return div; return div;
} }
changed() { changed() {

81
webpage/settings.ts
View File

@@ -9,7 +9,7 @@ interface OptionsElement {
class Buttons implements OptionsElement{ class Buttons implements OptionsElement{
readonly name:string; readonly name:string;
readonly buttons:[string,Options|string][]; readonly buttons:[string,Options|string][];
bigtable:HTMLDivElement; buttonList:HTMLDivElement;
warndiv:HTMLElement; warndiv:HTMLElement;
constructor(name:string){ constructor(name:string){
this.buttons=[]; this.buttons=[];
@@ -21,10 +21,10 @@ class Buttons implements OptionsElement{
return thing; return thing;
} }
generateHTML(){ generateHTML(){
const bigtable=document.createElement("div"); const buttonList=document.createElement("div");
bigtable.classList.add("Buttons"); buttonList.classList.add("Buttons");
bigtable.classList.add("flexltr"); buttonList.classList.add("flexltr");
this.bigtable=bigtable; this.buttonList=buttonList;
const htmlarea=document.createElement("div"); const htmlarea=document.createElement("div");
htmlarea.classList.add("flexgrow"); htmlarea.classList.add("flexgrow");
const buttonTable=document.createElement("div"); const buttonTable=document.createElement("div");
@@ -42,28 +42,28 @@ class Buttons implements OptionsElement{
buttonTable.append(button); buttonTable.append(button);
} }
this.generateHTMLArea(this.buttons[0][1],htmlarea); this.generateHTMLArea(this.buttons[0][1],htmlarea);
bigtable.append(buttonTable); buttonList.append(buttonTable);
bigtable.append(htmlarea); buttonList.append(htmlarea);
return bigtable; return buttonList;
} }
handleString(str:string):HTMLElement{ handleString(str:string):HTMLElement{
const div=document.createElement("div"); const div=document.createElement("span");
div.textContent=str; div.textContent=str;
return div; return div;
} }
private generateHTMLArea(genation:Options|string,htmlarea:HTMLElement){ private generateHTMLArea(buttonInfo:Options|string,htmlarea:HTMLElement){
let html:HTMLElement; let html:HTMLElement;
if(genation instanceof Options){ if(buttonInfo instanceof Options){
html=genation.generateHTML(); html=buttonInfo.generateHTML();
}else{ }else{
html=this.handleString(genation); html=this.handleString(buttonInfo);
} }
htmlarea.innerHTML=""; htmlarea.innerHTML="";
htmlarea.append(html); htmlarea.append(html);
} }
changed(html:HTMLElement){ changed(html:HTMLElement){
this.warndiv=html; this.warndiv=html;
this.bigtable.append(html); this.buttonList.append(html);
} }
save(){} save(){}
submit(){ submit(){
@@ -175,6 +175,51 @@ class TextInput implements OptionsElement{
this.onSubmit(this.textContent); 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{ class MDInput implements OptionsElement{
readonly label:string; readonly label:string;
readonly owner:Options; readonly owner:Options;
@@ -358,12 +403,12 @@ class Options implements OptionsElement{
div.append(title); div.append(title);
title.classList.add("settingstitle"); title.classList.add("settingstitle");
} }
const table=document.createElement("div"); const container=document.createElement("div");
table.classList.add(this.ltr?"flexltr":"flexttb","flexspace"); container.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
for(const thing of this.options){ for(const thing of this.options){
table.append(thing.generateHTML()); container.append(thing.generateHTML());
} }
div.append(table); div.append(container);
return div; return div;
} }
changed(){ changed(){