type out Dialog

This commit is contained in:
MathMan05 2024-09-08 17:47:36 -05:00
parent fc9d4d8d6f
commit b57988e734
2 changed files with 235 additions and 205 deletions

View file

@ -22,11 +22,11 @@ class Dialog {
const img = document.createElement("img"); const img = document.createElement("img");
img.src = array[1]; img.src = array[1];
if (array[2] != undefined) { if (array[2] != undefined) {
if (array[2].length == 2) { if (array[2].length === 2) {
img.width = array[2][0]; img.width = array[2][0];
img.height = array[2][1]; img.height = array[2][1];
} }
else if (array[2][0] == "fit") { else if (array[2][0] === "fit") {
img.classList.add("imgfit"); img.classList.add("imgfit");
} }
} }
@ -226,6 +226,7 @@ class Dialog {
} }
default: default:
console.error("can't find element:" + array[0], " full element:", array); console.error("can't find element:" + array[0], " full element:", array);
return document.createElement("span");
} }
} }
show() { show() {

View file

@ -1,4 +1,32 @@
type dialogjson=[
"hdiv",...dialogjson[]
]|[
"vdiv",...dialogjson[]
]|[
"img",string,[number,number]|undefined|["fit"]
]|[
"checkbox",string,boolean,(this:HTMLInputElement,e:Event)=>unknown
]|[
"button",string,string,(this:HTMLButtonElement,e:Event)=>unknown
]|[
"mdbox",string,string,(this:HTMLTextAreaElement,e:Event)=>unknown
]|[
"textbox",string,string,(this:HTMLInputElement,e:Event)=>unknown
]|[
"fileupload",string,(this:HTMLInputElement,e:Event)=>unknown
]|[
"text",string
]|[
"title",string
]|[
"radio",string,string[],(this:unknown,e:string)=>unknown,number
]|[
"html",HTMLElement
]|[
"select",string,string[],(this:HTMLSelectElement,e:Event)=>unknown,number
]|[
"tabs",[string,dialogjson][]
]
class Dialog{ class Dialog{
layout; layout;
onclose: Function; onclose: Function;
@ -17,222 +45,223 @@ class Dialog{
this.html.classList.add("nonimagecenter"); this.html.classList.add("nonimagecenter");
} }
} }
tohtml(array:any[]){ tohtml(array:dialogjson):HTMLElement{
switch(array[0]){ switch(array[0]){
case"img": case"img":
const img=document.createElement("img"); const img=document.createElement("img");
img.src=array[1]; img.src=array[1];
if(array[2]!=undefined){ if(array[2]!=undefined){
if(array[2].length==2){ if(array[2].length===2){
img.width=array[2][0]; img.width=array[2][0];
img.height=array[2][1]; img.height=array[2][1];
}else if(array[2][0]=="fit"){ }else if(array[2][0]==="fit"){
img.classList.add("imgfit"); img.classList.add("imgfit");
} }
}
return img;
case"hdiv":
const hdiv=document.createElement("table");
const tr=document.createElement("tr");
hdiv.appendChild(tr);
for(const thing of array){
if(thing==="hdiv"){
continue;
}
const td=document.createElement("td");
td.appendChild(this.tohtml(thing));
tr.appendChild(td);
}
return hdiv;
case"vdiv":
const vdiv=document.createElement("table");
for(const thing of array){
if(thing==="vdiv"){
continue;
} }
return img;
case"hdiv":
const hdiv=document.createElement("table");
const tr=document.createElement("tr"); const tr=document.createElement("tr");
tr.appendChild(this.tohtml(thing)); hdiv.appendChild(tr);
vdiv.appendChild(tr);
}
return vdiv;
case"checkbox":
{
const div=document.createElement("div");
const checkbox = document.createElement("input");
div.appendChild(checkbox);
const label=document.createElement("span");
checkbox.checked=array[2];
label.textContent=array[1];
div.appendChild(label);
checkbox.addEventListener("change",array[3]);
checkbox.type = "checkbox";
return div;
}
case"button":
{
const div=document.createElement("div");
const input = document.createElement("button");
const label=document.createElement("span"); for(const thing of array){
input.textContent=array[2]; if(thing==="hdiv"){
label.textContent=array[1];
div.appendChild(label);
div.appendChild(input);
input.addEventListener("click",array[3]);
return div;
}
case"mdbox":
{
const div=document.createElement("div");
const input=document.createElement("textarea");
input.value=array[2];
const label=document.createElement("span");
label.textContent=array[1];
input.addEventListener("input",array[3]);
div.appendChild(label);
div.appendChild(document.createElement("br"));
div.appendChild(input);
return div;
}
case"textbox":
{
const div=document.createElement("div");
const input=document.createElement("input");
input.value=array[2];
input.type="text";
const label=document.createElement("span");
label.textContent=array[1];
console.log(array[3]);
input.addEventListener("input",array[3]);
div.appendChild(label);
div.appendChild(input);
return div;
}
case"fileupload":
{
const div=document.createElement("div");
const input=document.createElement("input");
input.type="file";
const label=document.createElement("span");
label.textContent=array[1];
div.appendChild(label);
div.appendChild(input);
input.addEventListener("change",array[2]);
console.log(array);
return div;
}
case"text":{
const span =document.createElement("span");
span.textContent=array[1];
return span;
}
case"title":{
const span =document.createElement("span");
span.classList.add("title");
span.textContent=array[1];
return span;
}
case"radio":{
const div=document.createElement("div");
const fieldset=document.createElement("fieldset");
fieldset.addEventListener("change",()=>{
let i=-1;
for(const thing of fieldset.children){
i++;
if(i===0){
continue; continue;
} }
const checkbox = thing.children[0].children[0] as HTMLInputElement; const td=document.createElement("td");
if(checkbox.checked){ td.appendChild(this.tohtml(thing));
array[3](checkbox.value); tr.appendChild(td);
}
} }
}); return hdiv;
const legend=document.createElement("legend"); case"vdiv":
legend.textContent=array[1]; const vdiv=document.createElement("table");
fieldset.appendChild(legend); for(const thing of array){
let i=0; if(thing==="vdiv"){
for(const thing of array[2]){ continue;
}
const tr=document.createElement("tr");
tr.appendChild(this.tohtml(thing));
vdiv.appendChild(tr);
}
return vdiv;
case"checkbox":
{
const div=document.createElement("div");
const checkbox = document.createElement("input");
div.appendChild(checkbox);
const label=document.createElement("span");
checkbox.checked=array[2];
label.textContent=array[1];
div.appendChild(label);
checkbox.addEventListener("change",array[3]);
checkbox.type = "checkbox";
return div;
}
case"button":
{
const div=document.createElement("div");
const input = document.createElement("button");
const label=document.createElement("span");
input.textContent=array[2];
label.textContent=array[1];
div.appendChild(label);
div.appendChild(input);
input.addEventListener("click",array[3]);
return div;
}
case"mdbox":
{
const div=document.createElement("div");
const input=document.createElement("textarea");
input.value=array[2];
const label=document.createElement("span");
label.textContent=array[1];
input.addEventListener("input",array[3]);
div.appendChild(label);
div.appendChild(document.createElement("br"));
div.appendChild(input);
return div;
}
case"textbox":
{
const div=document.createElement("div"); const div=document.createElement("div");
const input=document.createElement("input"); const input=document.createElement("input");
input.classList.add("radio"); input.value=array[2];
input.type="radio"; input.type="text";
input.name=array[1]; const label=document.createElement("span");
input.value=thing; label.textContent=array[1];
if(i===array[4]){ console.log(array[3]);
input.checked=true; input.addEventListener("input",array[3]);
}
const label=document.createElement("label");
label.appendChild(input);
const span=document.createElement("span");
span.textContent=thing;
label.appendChild(span);
div.appendChild(label); div.appendChild(label);
fieldset.appendChild(div); div.appendChild(input);
i++; return div;
} }
div.appendChild(fieldset); case"fileupload":
return div; {
} const div=document.createElement("div");
case"html": const input=document.createElement("input");
return array[1]; input.type="file";
const label=document.createElement("span");
case"select":{ label.textContent=array[1];
const div=document.createElement("div"); div.appendChild(label);
const label=document.createElement("label"); div.appendChild(input);
const select=document.createElement("select"); input.addEventListener("change",array[2]);
console.log(array);
label.textContent=array[1]; return div;
div.append(label);
div.appendChild(select);
for(const thing of array[2]){
const option = document.createElement("option");
option.textContent=thing;
select.appendChild(option);
} }
select.selectedIndex=array[4]; case"text":{
select.addEventListener("change",array[3]); const span =document.createElement("span");
return div; span.textContent=array[1];
} return span;
case"tabs":{ }
const table=document.createElement("table"); case"title":{
const tabs=document.createElement("tr"); const span =document.createElement("span");
tabs.classList.add("tabbed-head"); span.classList.add("title");
table.appendChild(tabs); span.textContent=array[1];
const td=document.createElement("td"); return span;
tabs.appendChild(td); }
const content=document.createElement("tr"); case"radio":{
content.classList.add("tabbed-content"); const div=document.createElement("div");
table.appendChild(content); const fieldset=document.createElement("fieldset");
fieldset.addEventListener("change",()=>{
let shown; let i=-1;
for(const thing of array[1]){ for(const thing of fieldset.children){
const button=document.createElement("button"); i++;
button.textContent=thing[0]; if(i===0){
td.appendChild(button); continue;
}
const checkbox = thing.children[0].children[0] as HTMLInputElement;
const tdcontent=document.createElement("td"); if(checkbox.checked){
tdcontent.colSpan=array[1].length; array[3](checkbox.value);
tdcontent.appendChild(this.tohtml(thing[1])); }
content.appendChild(tdcontent); }
if(!shown){
shown=tdcontent;
}else{
tdcontent.hidden=true;
}
button.addEventListener("click",_=>{
shown.hidden=true;
tdcontent.hidden=false;
shown=tdcontent;
}); });
const legend=document.createElement("legend");
legend.textContent=array[1];
fieldset.appendChild(legend);
let i=0;
for(const thing of array[2]){
const div=document.createElement("div");
const input=document.createElement("input");
input.classList.add("radio");
input.type="radio";
input.name=array[1];
input.value=thing;
if(i===array[4]){
input.checked=true;
}
const label=document.createElement("label");
label.appendChild(input);
const span=document.createElement("span");
span.textContent=thing;
label.appendChild(span);
div.appendChild(label);
fieldset.appendChild(div);
i++;
}
div.appendChild(fieldset);
return div;
} }
return table; case"html":
} return array[1];
default:
console.error("can't find element:"+array[0]," full element:",array); case"select":{
const div=document.createElement("div");
const label=document.createElement("label");
const select=document.createElement("select");
label.textContent=array[1];
div.append(label);
div.appendChild(select);
for(const thing of array[2]){
const option = document.createElement("option");
option.textContent=thing;
select.appendChild(option);
}
select.selectedIndex=array[4];
select.addEventListener("change",array[3]);
return div;
}
case"tabs":{
const table=document.createElement("table");
const tabs=document.createElement("tr");
tabs.classList.add("tabbed-head");
table.appendChild(tabs);
const td=document.createElement("td");
tabs.appendChild(td);
const content=document.createElement("tr");
content.classList.add("tabbed-content");
table.appendChild(content);
let shown;
for(const thing of array[1]){
const button=document.createElement("button");
button.textContent=thing[0];
td.appendChild(button);
const tdcontent=document.createElement("td");
tdcontent.colSpan=array[1].length;
tdcontent.appendChild(this.tohtml(thing[1]));
content.appendChild(tdcontent);
if(!shown){
shown=tdcontent;
}else{
tdcontent.hidden=true;
}
button.addEventListener("click",_=>{
shown.hidden=true;
tdcontent.hidden=false;
shown=tdcontent;
});
}
return table;
}
default:
console.error("can't find element:"+array[0]," full element:",array);
return document.createElement("span");
} }
} }
show(){ show(){