`); outputDoc.close(); logMessage("success", "Code executed successfully."); } // Bind run functions to both Run buttons runButton.addEventListener("click", runCode); runOutputButton.addEventListener("click", runCode); // Dropdown toggle functionality layoutButton.addEventListener("click", function(e) { e.stopPropagation(); layoutDropdown.classList.toggle("open"); settingsDropdown.classList.remove("open"); }); settingsButton.addEventListener("click", function(e) { e.stopPropagation(); settingsDropdown.classList.toggle("open"); layoutDropdown.classList.remove("open"); }); document.addEventListener("click", function() { layoutDropdown.classList.remove("open"); settingsDropdown.classList.remove("open"); }); document.querySelectorAll(".cp-dropdown-menu").forEach(menu => { menu.addEventListener("click", function(e) { e.stopPropagation(); }); }); layoutMenuItems.forEach(item => { item.addEventListener("click", function() { const layout = this.getAttribute("data-layout"); setLayout(layout); layoutDropdown.classList.remove("open"); logMessage("info", "Layout changed to " + layout + "."); }); }); function setLayout(layout) { const panels = document.querySelector('.cp-panels'); panels.style.display = ""; panels.style.gridTemplateColumns = ""; panels.style.gridTemplateRows = ""; const tabNav = document.querySelector('.cp-tab-nav'); if (tabNav) tabNav.remove(); const tabNavColumns = document.querySelector('.cp-tab-nav-columns'); if (tabNavColumns) tabNavColumns.remove(); document.querySelectorAll('.cp-panel').forEach(panel => { panel.style.display = "flex"; panel.style.position = ""; panel.style.width = ""; panel.style.height = ""; panel.style.top = ""; panel.style.left = ""; panel.style.right = ""; panel.style.bottom = ""; panel.style.gridColumn = ""; panel.style.gridRow = ""; }); switch(layout) { case 'classic': panels.style.display = "grid"; panels.style.gridTemplateColumns = "1fr 1fr"; panels.style.gridTemplateRows = "1fr 1fr"; break; case 'columns': panels.style.display = "grid"; panels.style.gridTemplateColumns = "repeat(4, 1fr)"; panels.style.gridTemplateRows = "1fr"; break; case 'tabs-rows': panels.style.display = "block"; document.querySelectorAll('.cp-panel').forEach((panel, index) => { panel.style.display = index === 0 ? "block" : "none"; }); let tabNavEl = document.createElement('div'); tabNavEl.className = 'cp-tab-nav'; tabNavEl.style.marginBottom = "10px"; const panelNames = ["HTML", "CSS", "JS", "Output"]; panelNames.forEach((name, i) => { let btn = document.createElement('button'); btn.innerText = name; btn.addEventListener('click', function() { document.querySelectorAll('.cp-panel').forEach((panel, idx) => { panel.style.display = (idx === i) ? "block" : "none"; }); document.querySelectorAll('.cp-tab-nav button').forEach(b => b.classList.remove("active")); btn.classList.add("active"); }); if(i===0) btn.classList.add("active"); tabNavEl.appendChild(btn); }); panels.parentNode.insertBefore(tabNavEl, panels); break; case 'tabs-columns': panels.style.display = "flex"; document.querySelectorAll('.cp-panel').forEach((panel, index) => { panel.style.display = index === 0 ? "block" : "none"; }); let tabNavCol = document.createElement('div'); tabNavCol.className = 'cp-tab-nav-columns'; const names = ["HTML", "CSS", "JS", "Output"]; names.forEach((name, i) => { let btn = document.createElement('button'); btn.innerText = name; btn.addEventListener('click', function() { document.querySelectorAll('.cp-panel').forEach((panel, idx) => { panel.style.display = (idx === i) ? "block" : "none"; }); document.querySelectorAll('.cp-tab-nav-columns button').forEach(b => b.classList.remove("active")); btn.classList.add("active"); }); if(i===0) btn.classList.add("active"); tabNavCol.appendChild(btn); }); panels.parentNode.insertBefore(tabNavCol, panels); break; case 'right-results': panels.style.display = "grid"; panels.style.gridTemplateColumns = "2fr 1fr"; panels.style.gridTemplateRows = "repeat(3, 1fr)"; let children = panels.children; if (children.length >= 4) { children[0].style.gridColumn = "1 / 2"; children[1].style.gridColumn = "1 / 2"; children[2].style.gridColumn = "1 / 2"; children[3].style.gridColumn = "2 / 3"; children[3].style.gridRow = "1 / 4"; } break; case 'bottom-results': panels.style.display = "grid"; panels.style.gridTemplateColumns = "1fr"; panels.style.gridTemplateRows = "repeat(3, 1fr) 1fr"; break; case 'floating': panels.style.display = "block"; document.querySelectorAll('.cp-panel').forEach(panel => { panel.style.position = "absolute"; panel.style.width = "45%"; panel.style.height = "45%"; }); document.querySelector('.cp-panel-html').style.top = "10px"; document.querySelector('.cp-panel-html').style.left = "10px"; document.querySelector('.cp-panel-css').style.top = "10px"; document.querySelector('.cp-panel-css').style.right = "10px"; document.querySelector('.cp-panel-js').style.bottom = "10px"; document.querySelector('.cp-panel-js').style.left = "10px"; document.querySelector('.cp-panel-output').style.bottom = "10px"; document.querySelector('.cp-panel-output').style.right = "10px"; break; case 'custom': alert("Custom layout is not yet implemented."); break; default: panels.style.display = "grid"; panels.style.gridTemplateColumns = "1fr 1fr"; panels.style.gridTemplateRows = "1fr 1fr"; } } // Full screen toggling for individual panels document.querySelectorAll(".cp-fullscreen-btn").forEach(btn => { btn.addEventListener("click", function(e) { e.stopPropagation(); const targetId = btn.getAttribute("data-target"); const targetElem = document.getElementById(targetId); if (targetElem.requestFullscreen) { targetElem.requestFullscreen(); } else if (targetElem.webkitRequestFullscreen) { targetElem.webkitRequestFullscreen(); } else if (targetElem.msRequestFullscreen) { targetElem.msRequestFullscreen(); } }); }); // Full screen popup for output panel outputFullscreenBtn.addEventListener("click", function(e) { e.stopPropagation(); const outputDoc = outputFrame.contentDocument || outputFrame.contentWindow.document; const popup = window.open("", "OutputPopup", "width=800,height=600"); popup.document.open(); popup.document.write(` ${outputDoc.documentElement.innerHTML} `); popup.document.close(); }); downloadButton.addEventListener("click", function() { const htmlCode = htmlEditorAce.getValue(); const cssCode = cssEditorAce.getValue(); const jsCode = jsEditorAce.getValue(); const fullCode = ` ${htmlCode} `; const blob = new Blob([fullCode], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "code.html"; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); function loadHtml2Canvas(callback) { if (window.html2canvas) { callback(); } else { const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"; script.onload = callback; document.head.appendChild(script); } } screenshotButton.addEventListener("click", function() { loadHtml2Canvas(function() { const iframe = document.getElementById("cp-output"); const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; html2canvas(iframeDoc.body).then(function(canvas) { canvas.toBlob(function(blob) { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "screenshot.png"; document.body.appendChild(a); a.click(); document.body.removeChild(a); }); }); }); }); let autoRunTimeout; function debounceAutoRun() { clearTimeout(autoRunTimeout); autoRunTimeout = setTimeout(() => { if (document.getElementById("auto-run") && document.getElementById("auto-run").checked) { runCode(); } }, 500); } // Ace change events for auto-run htmlEditorAce.session.on('change', debounceAutoRun); cssEditorAce.session.on('change', debounceAutoRun); jsEditorAce.session.on('change', debounceAutoRun); // --- Editor Settings Logic --- // Toggle line numbers document.getElementById("line-numbers").addEventListener("change", function() { var show = this.checked; htmlEditorAce.renderer.setShowGutter(show); cssEditorAce.renderer.setShowGutter(show); jsEditorAce.renderer.setShowGutter(show); }); // Toggle wrap lines document.getElementById("wrap-lines").addEventListener("change", function() { var wrap = this.checked; htmlEditorAce.session.setUseWrapMode(wrap); cssEditorAce.session.setUseWrapMode(wrap); jsEditorAce.session.setUseWrapMode(wrap); }); // Toggle indent with tabs (if unchecked, use soft tabs) document.getElementById("indent-tabs").addEventListener("change", function() { var useTabs = this.checked; htmlEditorAce.session.setUseSoftTabs(!useTabs); cssEditorAce.session.setUseSoftTabs(!useTabs); jsEditorAce.session.setUseSoftTabs(!useTabs); }); // Indent size change document.getElementById("indent-size").addEventListener("change", function() { var size = parseInt(this.value, 10); htmlEditorAce.session.setTabSize(size); cssEditorAce.session.setTabSize(size); jsEditorAce.session.setTabSize(size); }); // Background color change for editor windows document.getElementById("background-color").addEventListener("change", function() { var color = this.value; var bg; switch(color) { case "black": bg = "#000"; break; case "darkgray": bg = "#333"; break; case "white": bg = "#fff"; break; case "red": bg = "#ffdddd"; break; case "blue": bg = "#ddeeff"; break; case "green": bg = "#ddffdd"; break; case "yellow": bg = "#ffffdd"; break; default: bg = ""; } document.querySelectorAll(".cp-editor").forEach(function(editorContainer) { editorContainer.style.backgroundColor = bg; }); }); // Font color change for editor windows document.getElementById("font-color").addEventListener("change", function() { var color = this.value; var fontColor; switch(color) { case "white": fontColor = "#fff"; break; case "black": fontColor = "#000"; break; case "gray": fontColor = "#888"; break; case "blue": fontColor = "#00f"; break; case "red": fontColor = "#f00"; break; default: fontColor = ""; } document.querySelectorAll(".cp-editor").forEach(function(editorContainer) { editorContainer.style.color = fontColor; }); }); // Toggle console in the editor document.getElementById("console-editor").addEventListener("change", function() { var consoleDiv = document.querySelector(".cp-console"); consoleDiv.style.display = this.checked ? "block" : "none"; }); closeSettingsButton.addEventListener("click", function(e) { e.stopPropagation(); settingsDropdown.classList.remove("open"); }); function loadSampleCode() { fetch('sample_code.php') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { htmlEditorAce.setValue(data.html, -1); cssEditorAce.setValue(data.css, -1); jsEditorAce.setValue(data.js, -1); runCode(); }) .catch(error => console.error("Error loading sample code:", error)); } // (Optional) Add initial console log logMessage("info", "Console initialized."); });