Visual JS Project

"use strict"; (() => { const save_el = document.querySelector("#vjs_save"); const run_el = document.querySelector("#vjs_run"); const toggles_el = document.querySelector("#vjs_toggles"); const toggle_design_el = document.querySelector("#vjs_toggle_design"); const toggle_code_el = document.querySelector("#vjs_toggle_code"); const design_window_el = document.querySelector("#vjs_design_window"); const code_window_el = document.querySelector("#vjs_code_window"); const share_el = document.querySelector("#vjs_share"); const export_el = document.querySelector("#vjs_export"); save_el.addEventListener("click", () => { const json = buildJSON(); promptToDownload(json, "project.vjs", "text/json"); }); run_el.addEventListener("click", () => { const html = buildHTML(); const tab = window.open("about:blank", "_blank"); tab.document.write(html); tab.document.close(); tab.opener = null; // Prevent code highjacking main window. }); toggle_design_el.addEventListener("click", (e) => { e.preventDefault(); toggles_el.querySelectorAll("li").forEach(el => { el.classList.remove("selected"); }); toggle_design_el.classList.add("selected"); code_window_el.style.display = "none"; design_window_el.style.display = "flex"; Eventer.emit("design_window_toggled"); }); toggle_code_el.addEventListener("click", (e) => { e.preventDefault(); toggles_el.querySelectorAll("li").forEach(el => { el.classList.remove("selected"); }); toggle_code_el.classList.add("selected"); design_window_el.style.display = "none"; code_window_el.style.display = "flex"; Eventer.emit("code_window_toggled"); }); share_el.addEventListener("click", () => { const json = buildJSON(); const data = btoa(json); let current_url = window.location.href; const current_hash = window.location.hash; if (current_hash !== "") current_url = current_url.substring(0, current_url.indexOf(current_hash)); const url = `${current_url}#${data}`; navigator.clipboard.writeText(url).then(() => { alert("URL has been copied to clipboard"); }, (err) => { console.error("Unable to copy URL to clipboard", err); }); }); export_el.addEventListener("click", () => { const html = buildHTML(true); promptToDownload(html, "project.html", "text/html"); }); const buildJSON = () => { return JSON.stringify(_data, (key, value) => { if (key === "el") return undefined; return value; }); }; const promptToDownload = (data, filename, type) => { var file = new Blob([data], {type: type}); // IE10+. if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(file, filename); } else { const a = document.createElement("a"); const url = URL.createObjectURL(file); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 0); } } const buildHTML = (for_export) => { let html = ""; if (for_export) { html += ` Visual JS Project `; } html += ` `; if (for_export) { html += ` `; } html += `

`; Object.keys(_data.screens).forEach(id => { html += `

`; _data.screens[id].forEach(id => { const control = _data.controls[id]; switch (control.type) { case "label": html += `

${control.properties.text}

`; break; case "textbox": html += ` `; break; case "button": html += ` `; break; case "shape": html += `

`; break; } }); }); html += `

Errors

`; let script_url = window.location.href; if (script_url.substring(script_url.length - 11) === "/index.html") { script_url = script_url.substring(0, script_url.length - 11); } html += ` `; Object.keys(_data.screens).forEach(id => { Object.keys(_data.controls[id].events).forEach(event => { html += ` `; }); _data.screens[id].forEach(id => { Object.keys(_data.controls[id].events).forEach(event => { html += ` `; }); }); }); if (for_export) { html += ` `; } return html; }; toggle_design_el.click(); })();