class Dialog { layout; onclose; onopen; html; background; constructor(layout, onclose = _ => { }, onopen = _ => { }) { this.layout = layout; this.onclose = onclose; this.onopen = onopen; const div = document.createElement("div"); div.appendChild(this.tohtml(layout)); this.html = div; this.html.classList.add("centeritem"); if (!(layout[0] === "img")) { this.html.classList.add("nonimagecenter"); } } tohtml(array) { switch (array[0]) { case "img": const img = document.createElement("img"); img.src = array[1]; if (array[2] != undefined) { if (array[2].length === 2) { img.width = array[2][0]; img.height = array[2][1]; } else if (array[2][0] === "fit") { img.classList.add("imgfit"); } } return img; case "hdiv": const hdiv = document.createElement("div"); hdiv.classList.add("flexltr"); for (const thing of array) { if (thing === "hdiv") { continue; } hdiv.appendChild(this.tohtml(thing)); } return hdiv; case "vdiv": const vdiv = document.createElement("div"); vdiv.classList.add("flexttb"); for (const thing of array) { if (thing === "vdiv") { continue; } vdiv.appendChild(this.tohtml(thing)); } 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 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; } const checkbox = thing.children[0].children[0]; if (checkbox.checked) { array[3](checkbox.value); } } }); 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; } case "html": return array[1]; 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("div"); table.classList.add("flexttb"); const tabs = document.createElement("div"); tabs.classList.add("flexltr"); tabs.classList.add("tabbed-head"); table.appendChild(tabs); const content = document.createElement("div"); 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]; tabs.appendChild(button); const html = this.tohtml(thing[1]); content.append(html); if (!shown) { shown = html; } else { html.style.display = "none"; } button.addEventListener("click", _ => { if (shown) { shown.style.display = "none"; } html.style.display = ""; shown = html; }); } return table; } default: console.error("can't find element:" + array[0], " full element:", array); return document.createElement("span"); } } show() { this.onopen(); console.log("fullscreen"); this.background = document.createElement("div"); this.background.classList.add("background"); document.body.appendChild(this.background); document.body.appendChild(this.html); this.background.onclick = _ => { this.hide(); }; } hide() { document.body.removeChild(this.background); document.body.removeChild(this.html); } } export { Dialog };