type out Dialog
This commit is contained in:
parent
fc9d4d8d6f
commit
b57988e734
2 changed files with 235 additions and 205 deletions
|
@ -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() {
|
||||||
|
|
|
@ -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(){
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue