fixing up the dialog class with other bug fixes

This commit is contained in:
MathMan05 2024-09-09 10:46:30 -05:00
parent b57988e734
commit 8e87635209
9 changed files with 55 additions and 66 deletions

View file

@ -32,27 +32,23 @@ class Dialog {
} }
return img; return img;
case "hdiv": case "hdiv":
const hdiv = document.createElement("table"); const hdiv = document.createElement("div");
const tr = document.createElement("tr"); hdiv.classList.add("flexltr");
hdiv.appendChild(tr);
for (const thing of array) { for (const thing of array) {
if (thing === "hdiv") { if (thing === "hdiv") {
continue; continue;
} }
const td = document.createElement("td"); hdiv.appendChild(this.tohtml(thing));
td.appendChild(this.tohtml(thing));
tr.appendChild(td);
} }
return hdiv; return hdiv;
case "vdiv": case "vdiv":
const vdiv = document.createElement("table"); const vdiv = document.createElement("div");
vdiv.classList.add("flexttb");
for (const thing of array) { for (const thing of array) {
if (thing === "vdiv") { if (thing === "vdiv") {
continue; continue;
} }
const tr = document.createElement("tr"); vdiv.appendChild(this.tohtml(thing));
tr.appendChild(this.tohtml(thing));
vdiv.appendChild(tr);
} }
return vdiv; return vdiv;
case "checkbox": case "checkbox":
@ -192,34 +188,34 @@ class Dialog {
return div; return div;
} }
case "tabs": { case "tabs": {
const table = document.createElement("table"); const table = document.createElement("div");
const tabs = document.createElement("tr"); table.classList.add("flexttb");
const tabs = document.createElement("div");
tabs.classList.add("flexltr");
tabs.classList.add("tabbed-head"); tabs.classList.add("tabbed-head");
table.appendChild(tabs); table.appendChild(tabs);
const td = document.createElement("td"); const content = document.createElement("div");
tabs.appendChild(td);
const content = document.createElement("tr");
content.classList.add("tabbed-content"); content.classList.add("tabbed-content");
table.appendChild(content); table.appendChild(content);
let shown; let shown;
for (const thing of array[1]) { for (const thing of array[1]) {
const button = document.createElement("button"); const button = document.createElement("button");
button.textContent = thing[0]; button.textContent = thing[0];
td.appendChild(button); tabs.appendChild(button);
const tdcontent = document.createElement("td"); const html = this.tohtml(thing[1]);
tdcontent.colSpan = array[1].length; content.append(html);
tdcontent.appendChild(this.tohtml(thing[1]));
content.appendChild(tdcontent);
if (!shown) { if (!shown) {
shown = tdcontent; shown = html;
} }
else { else {
tdcontent.hidden = true; html.style.display = "none";
} }
button.addEventListener("click", _ => { button.addEventListener("click", _ => {
shown.hidden = true; if (shown) {
tdcontent.hidden = false; shown.style.display = "none";
shown = tdcontent; }
html.style.display = "";
shown = html;
}); });
} }
return table; return table;

View file

@ -6,7 +6,6 @@ import { Permissions } from "./permissions.js";
import { SnowFlake } from "./snowflake.js"; import { SnowFlake } from "./snowflake.js";
import { Contextmenu } from "./contextmenu.js"; import { Contextmenu } from "./contextmenu.js";
class Direct extends Guild { class Direct extends Guild {
channelids;
getUnixTime() { getUnixTime() {
throw new Error("Do not call this for Direct, it does not make sense"); throw new Error("Do not call this for Direct, it does not make sense");
} }

View file

@ -91,7 +91,7 @@ class InfiniteScroller {
} }
currrunning = false; currrunning = false;
async addedBottom() { async addedBottom() {
this.updatestuff(); await this.updatestuff();
const func = this.snapBottom(); const func = this.snapBottom();
await this.watchForChange(); await this.watchForChange();
func(); func();
@ -99,7 +99,7 @@ class InfiniteScroller {
snapBottom() { snapBottom() {
const scrollBottom = this.scrollBottom; const scrollBottom = this.scrollBottom;
return () => { return () => {
if (this.div && scrollBottom < 10) { if (this.div && scrollBottom < 4) {
this.div.scrollTop = this.div.scrollHeight + 20; this.div.scrollTop = this.div.scrollHeight + 20;
} }
}; };

View file

@ -1252,8 +1252,7 @@ class Localuser {
this.manageBot(appId); this.manageBot(appId);
} }
] ]
] ]]);
]);
appDialog.show(); appDialog.show();
} }
async manageBot(appId = "") { async manageBot(appId = "") {
@ -1319,8 +1318,7 @@ class Localuser {
botDialog.hide(); botDialog.hide();
} }
] ]
] ]]);
]);
botDialog.show(); botDialog.show();
} }
//---------- resolving members code ----------- //---------- resolving members code -----------

View file

@ -28,12 +28,12 @@ type dialogjson=[
"tabs",[string,dialogjson][] "tabs",[string,dialogjson][]
] ]
class Dialog{ class Dialog{
layout; layout:dialogjson;
onclose: Function; onclose: Function;
onopen: Function; onopen: Function;
html:HTMLDivElement; html:HTMLDivElement;
background: HTMLDivElement; background: HTMLDivElement;
constructor(layout,onclose=_=>{},onopen=_=>{}){ constructor(layout:dialogjson,onclose=_=>{},onopen=_=>{}){
this.layout=layout; this.layout=layout;
this.onclose=onclose; this.onclose=onclose;
this.onopen=onopen; this.onopen=onopen;
@ -60,28 +60,24 @@ class Dialog{
} }
return img; return img;
case"hdiv": case"hdiv":
const hdiv=document.createElement("table"); const hdiv=document.createElement("div");
const tr=document.createElement("tr"); hdiv.classList.add("flexltr")
hdiv.appendChild(tr);
for(const thing of array){ for(const thing of array){
if(thing==="hdiv"){ if(thing==="hdiv"){
continue; continue;
} }
const td=document.createElement("td"); hdiv.appendChild(this.tohtml(thing));
td.appendChild(this.tohtml(thing));
tr.appendChild(td);
} }
return hdiv; return hdiv;
case"vdiv": case"vdiv":
const vdiv=document.createElement("table"); const vdiv=document.createElement("div");
vdiv.classList.add("flexttb");
for(const thing of array){ for(const thing of array){
if(thing==="vdiv"){ if(thing==="vdiv"){
continue; continue;
} }
const tr=document.createElement("tr"); vdiv.appendChild(this.tohtml(thing));
tr.appendChild(this.tohtml(thing));
vdiv.appendChild(tr);
} }
return vdiv; return vdiv;
case"checkbox": case"checkbox":
@ -225,36 +221,35 @@ class Dialog{
return div; return div;
} }
case"tabs":{ case"tabs":{
const table=document.createElement("table"); const table=document.createElement("div");
const tabs=document.createElement("tr"); table.classList.add("flexttb");
const tabs=document.createElement("div");
tabs.classList.add("flexltr")
tabs.classList.add("tabbed-head"); tabs.classList.add("tabbed-head");
table.appendChild(tabs); table.appendChild(tabs);
const td=document.createElement("td"); const content=document.createElement("div");
tabs.appendChild(td);
const content=document.createElement("tr");
content.classList.add("tabbed-content"); content.classList.add("tabbed-content");
table.appendChild(content); table.appendChild(content);
let shown; let shown:HTMLElement|undefined;
for(const thing of array[1]){ for(const thing of array[1]){
const button=document.createElement("button"); const button=document.createElement("button");
button.textContent=thing[0]; button.textContent=thing[0];
td.appendChild(button); tabs.appendChild(button);
const html=this.tohtml(thing[1]);
const tdcontent=document.createElement("td"); content.append(html);
tdcontent.colSpan=array[1].length;
tdcontent.appendChild(this.tohtml(thing[1]));
content.appendChild(tdcontent);
if(!shown){ if(!shown){
shown=tdcontent; shown=html;
}else{ }else{
tdcontent.hidden=true; html.style.display="none";
} }
button.addEventListener("click",_=>{ button.addEventListener("click",_=>{
shown.hidden=true; if(shown){
tdcontent.hidden=false; shown.style.display="none";
shown=tdcontent; }
html.style.display="";
shown=html;
}); });
} }
return table; return table;

View file

@ -9,7 +9,7 @@ import { SnowFlake } from "./snowflake.js";
import { Contextmenu } from "./contextmenu.js"; import { Contextmenu } from "./contextmenu.js";
class Direct extends Guild{ class Direct extends Guild{
channelids:{[key:string]:Group}; declare channelids:{[key:string]:Group};
getUnixTime(): number { getUnixTime(): number {
throw new Error("Do not call this for Direct, it does not make sense"); throw new Error("Do not call this for Direct, it does not make sense");
} }

View file

@ -92,7 +92,7 @@ class InfiniteScroller{
} }
currrunning:boolean=false; currrunning:boolean=false;
async addedBottom(){ async addedBottom(){
this.updatestuff(); await this.updatestuff();
const func=this.snapBottom(); const func=this.snapBottom();
await this.watchForChange(); await this.watchForChange();
func(); func();
@ -100,7 +100,7 @@ class InfiniteScroller{
snapBottom(){ snapBottom(){
const scrollBottom=this.scrollBottom; const scrollBottom=this.scrollBottom;
return()=>{ return()=>{
if(this.div&&scrollBottom<10){ if(this.div&&scrollBottom<4){
this.div.scrollTop=this.div.scrollHeight+20; this.div.scrollTop=this.div.scrollHeight+20;
} }
}; };

View file

@ -1192,7 +1192,7 @@ class Localuser{
json.icon ? ["img", this.info.cdn+"/app-icons/" + appId + "/" + json.icon + ".png?size=128", [128, 128]] : ["text", "No icon"], json.icon ? ["img", this.info.cdn+"/app-icons/" + appId + "/" + json.icon + ".png?size=128", [128, 128]] : ["text", "No icon"],
["fileupload", "Application icon:", event=>{ ["fileupload", "Application icon:", event=>{
const reader=new FileReader(); const reader=new FileReader();
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL((event.target as HTMLInputElement).files[0]);
reader.onload=()=>{ reader.onload=()=>{
fields.icon=reader.result; fields.icon=reader.result;
}; };
@ -1280,7 +1280,7 @@ class Localuser{
fields.avatar ? ["img", fields.avatar, [128, 128]] : ["text", "No avatar"], fields.avatar ? ["img", fields.avatar, [128, 128]] : ["text", "No avatar"],
["fileupload", "Bot avatar:", event=>{ ["fileupload", "Bot avatar:", event=>{
const reader=new FileReader(); const reader=new FileReader();
reader.readAsDataURL(event.target.files[0]); reader.readAsDataURL((event.target as HTMLInputElement).files[0]);
reader.onload=()=>{ reader.onload=()=>{
fields.avatar=reader.result; fields.avatar=reader.result;
}; };

View file

@ -1054,6 +1054,7 @@ span {
} }
.tabbed-head{ .tabbed-head{
background: var(--profile-info-bg); background: var(--profile-info-bg);
width: 100%;
} }
.tabbed-content td{ .tabbed-content td{
/* border-color: var(--textarea-bg); */ /* border-color: var(--textarea-bg); */