From 1978bbf4d203f1d34af323c33d2af7f93eaa9a86 Mon Sep 17 00:00:00 2001 From: subhas-pramanik-09 Date: Fri, 13 Dec 2024 18:10:03 +0530 Subject: [PATCH] adding conformation for both cases ion advance mode --- js/activity.js | 151 +++++++++++++++++++++++++++++++++++-------------- js/turtles.js | 56 +----------------- 2 files changed, 112 insertions(+), 95 deletions(-) diff --git a/js/activity.js b/js/activity.js index 1abc6a5dfc..a53c6e987a 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1017,54 +1017,121 @@ class Activity { /* * Clears "canvas" */ + const renderClearConfirmation = (clearCanvasAction) => { + // Create a custom modal for confirmation + const modal = document.createElement("div"); + modal.style.position = "fixed"; + modal.style.top = "50%"; + modal.style.left = "50%"; + modal.style.transform = "translate(-50%, -50%)"; + modal.style.width = "400px"; + modal.style.padding = "24px"; + modal.style.backgroundColor = "#fff"; + modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)"; + modal.style.borderRadius = "8px"; + modal.style.zIndex = "10000"; + modal.style.textAlign = "left"; + const title = document.createElement("h2"); + title.textContent = "Clear Workspace"; + title.style.color = "#0066FF"; + title.style.fontSize = "24px"; + title.style.margin = "0 0 16px 0"; + modal.appendChild(title); + const message = document.createElement("p"); + message.textContent = "Are you sure you want to clear the workspace?"; + message.style.color = "#666666"; + message.style.fontSize = "16px"; + message.style.marginBottom = "24px"; + modal.appendChild(message); + // Add buttons + const buttonContainer = document.createElement("div"); + buttonContainer.style.display = "flex"; + buttonContainer.style.justifyContent = "flex-start"; + + const confirmBtn = document.createElement("button"); + confirmBtn.textContent = "Confirm"; + confirmBtn.style.backgroundColor = "#2196F3"; + confirmBtn.style.color = "white"; + confirmBtn.style.border = "none"; + confirmBtn.style.borderRadius = "4px"; + confirmBtn.style.padding = "8px 16px"; + confirmBtn.style.fontWeight = "bold"; + confirmBtn.style.cursor = "pointer"; + confirmBtn.style.marginRight = "16px"; + confirmBtn.addEventListener("click", () => { + document.body.removeChild(modal); + clearCanvasAction(); + }); + + const cancelBtn = document.createElement("button"); + cancelBtn.textContent = "Cancel"; + cancelBtn.style.backgroundColor = "#f1f1f1"; + cancelBtn.style.color = "black"; + cancelBtn.style.border = "none"; + cancelBtn.style.borderRadius = "4px"; + cancelBtn.style.padding = "8px 16px"; + cancelBtn.style.fontWeight = "bold"; + cancelBtn.style.cursor = "pointer"; + cancelBtn.addEventListener("click", () => { + document.body.removeChild(modal); + }); + + buttonContainer.appendChild(confirmBtn); + buttonContainer.appendChild(cancelBtn); + modal.appendChild(buttonContainer); + document.body.appendChild(modal); + }; + this._allClear = (noErase) => { - this.blocks.activeBlock = null; - hideDOMLabel(); - - this.logo.boxes = {}; - this.logo.time = 0; - this.hideMsgs(); - this.hideGrids(); - this.turtles.setBackgroundColor(-1); - this.logo.svgOutput = ""; - this.logo.notationOutput = ""; - for (let turtle = 0; turtle < this.turtles.turtleList.length; turtle++) { - this.logo.turtleHeaps[turtle] = []; - this.logo.turtleDicts[turtle] = {}; - this.logo.notation.notationStaging[turtle] = []; - this.logo.notation.notationDrumStaging[turtle] = []; - if (noErase === undefined || !noErase) { - this.turtles.turtleList[turtle].painter.doClear(true, true, true); + const clearCanvasAction = () => { + this.blocks.activeBlock = null; + hideDOMLabel(); + + this.logo.boxes = {}; + this.logo.time = 0; + this.hideMsgs(); + this.hideGrids(); + this.turtles.setBackgroundColor(-1); + this.logo.svgOutput = ""; + this.logo.notationOutput = ""; + for (let turtle = 0; turtle < this.turtles.turtleList.length; turtle++) { + this.logo.turtleHeaps[turtle] = []; + this.logo.turtleDicts[turtle] = {}; + this.logo.notation.notationStaging[turtle] = []; + this.logo.notation.notationDrumStaging[turtle] = []; + if (noErase === undefined || !noErase) { + this.turtles.turtleList[turtle].painter.doClear(true, true, true); + } } - } - - this.blocksContainer.x = 0; - this.blocksContainer.y = 0; - - // Code specific to cleaning up Music Blocks - Element.prototype.remove = () => { - this.parentElement.removeChild(this); - }; - - NodeList.prototype.remove = HTMLCollection.prototype.remove = () => { - for (let i = 0, len = this.length; i < len; i++) { - if (this[i] && this[i].parentElement) { - this[i].parentElement.removeChild(this[i]); + + this.blocksContainer.x = 0; + this.blocksContainer.y = 0; + + Element.prototype.remove = () => { + this.parentElement.removeChild(this); + }; + + NodeList.prototype.remove = HTMLCollection.prototype.remove = () => { + for (let i = 0, len = this.length; i < len; i++) { + if (this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); + } } + }; + + const table = docById("myTable"); + if (table !== null) { + table.remove(); + } + + if (docById("helpfulWheelDiv").style.display !== "none") { + docById("helpfulWheelDiv").style.display = "none"; + this.__tick(); } }; - - const table = docById("myTable"); - if (table !== null) { - table.remove(); - } - - if (docById("helpfulWheelDiv").style.display !== "none") { - docById("helpfulWheelDiv").style.display = "none"; - this.__tick(); - } + + renderClearConfirmation(clearCanvasAction); }; - /** * Sets up play button functionality; runs Music Blocks. * @param env {specifies environment} diff --git a/js/turtles.js b/js/turtles.js index 4f2a36c585..ce50ebff10 100644 --- a/js/turtles.js +++ b/js/turtles.js @@ -891,57 +891,6 @@ Turtles.TurtlesView = class { }; }; - const renderClearConfirmation = () => { - const modalContainer = document.getElementById("clear-modal-container"); - const clearDropdown = document.getElementById("cleardropdown"); - clearDropdown.innerHTML = ""; - - const title = document.createElement("div"); - title.innerHTML = `

${_("Clear Workspace")}

`; - clearDropdown.appendChild(title); - - const confirmationMessage = document.createElement("div"); - confirmationMessage.innerHTML = `
- ${_("Are you sure you want to clear the workspace ?")} -
`; - clearDropdown.appendChild(confirmationMessage); - - const confirmButton = document.createElement("button"); - confirmButton.innerHTML = _("Confirm"); - confirmButton.style.cssText = ` - background-color: #2196F3; - color: white; - border: none; - border-radius: 4px; - padding: 8px 16px; - font-weight: bold; - cursor: pointer; - margin-right: 16px; - `; - confirmButton.onclick = () => { - this.activity._allClear(); - modalContainer.style.display = "none"; - }; - clearDropdown.appendChild(confirmButton); - - const cancelButton = document.createElement("button"); - cancelButton.innerHTML = _("Cancel"); - cancelButton.style.cssText = ` - background-color: #f1f1f1; - color: black; - border: none; - border-radius: 4px; - padding: 8px 16px; - font-weight: bold; - cursor: pointer; - `; - cancelButton.onclick = () => { - modalContainer.style.display = "none"; - }; - clearDropdown.appendChild(cancelButton); - - modalContainer.style.display = "flex"; - }; const __makeClearButton = () => { @@ -957,9 +906,10 @@ Turtles.TurtlesView = class { ); // Assign click listener to the Clear button - this._clearButton.onclick = renderClearConfirmation; + this._clearButton.onclick = () => { + this.activity._allClear(); + }; }; - /** * Makes collapse button by initailising 'COLLAPSEBUTTON' SVG.