Skip to content

Commit 1978bbf

Browse files
subhas-pramanik-09subhas-pramanik-09
committed
adding conformation for both cases ion advance mode
1 parent 86872af commit 1978bbf

File tree

2 files changed

+112
-95
lines changed

2 files changed

+112
-95
lines changed

‎js/activity.js‎

Lines changed: 109 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1017,54 +1017,121 @@ class Activity {
10171017
/*
10181018
* Clears "canvas"
10191019
*/
1020+
const renderClearConfirmation = (clearCanvasAction) => {
1021+
// Create a custom modal for confirmation
1022+
const modal = document.createElement("div");
1023+
modal.style.position = "fixed";
1024+
modal.style.top = "50%";
1025+
modal.style.left = "50%";
1026+
modal.style.transform = "translate(-50%, -50%)";
1027+
modal.style.width = "400px";
1028+
modal.style.padding = "24px";
1029+
modal.style.backgroundColor = "#fff";
1030+
modal.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
1031+
modal.style.borderRadius = "8px";
1032+
modal.style.zIndex = "10000";
1033+
modal.style.textAlign = "left";
1034+
const title = document.createElement("h2");
1035+
title.textContent = "Clear Workspace";
1036+
title.style.color = "#0066FF";
1037+
title.style.fontSize = "24px";
1038+
title.style.margin = "0 0 16px 0";
1039+
modal.appendChild(title);
1040+
const message = document.createElement("p");
1041+
message.textContent = "Are you sure you want to clear the workspace?";
1042+
message.style.color = "#666666";
1043+
message.style.fontSize = "16px";
1044+
message.style.marginBottom = "24px";
1045+
modal.appendChild(message);
1046+
// Add buttons
1047+
const buttonContainer = document.createElement("div");
1048+
buttonContainer.style.display = "flex";
1049+
buttonContainer.style.justifyContent = "flex-start";
1050+
1051+
const confirmBtn = document.createElement("button");
1052+
confirmBtn.textContent = "Confirm";
1053+
confirmBtn.style.backgroundColor = "#2196F3";
1054+
confirmBtn.style.color = "white";
1055+
confirmBtn.style.border = "none";
1056+
confirmBtn.style.borderRadius = "4px";
1057+
confirmBtn.style.padding = "8px 16px";
1058+
confirmBtn.style.fontWeight = "bold";
1059+
confirmBtn.style.cursor = "pointer";
1060+
confirmBtn.style.marginRight = "16px";
1061+
confirmBtn.addEventListener("click", () => {
1062+
document.body.removeChild(modal);
1063+
clearCanvasAction();
1064+
});
1065+
1066+
const cancelBtn = document.createElement("button");
1067+
cancelBtn.textContent = "Cancel";
1068+
cancelBtn.style.backgroundColor = "#f1f1f1";
1069+
cancelBtn.style.color = "black";
1070+
cancelBtn.style.border = "none";
1071+
cancelBtn.style.borderRadius = "4px";
1072+
cancelBtn.style.padding = "8px 16px";
1073+
cancelBtn.style.fontWeight = "bold";
1074+
cancelBtn.style.cursor = "pointer";
1075+
cancelBtn.addEventListener("click", () => {
1076+
document.body.removeChild(modal);
1077+
});
1078+
1079+
buttonContainer.appendChild(confirmBtn);
1080+
buttonContainer.appendChild(cancelBtn);
1081+
modal.appendChild(buttonContainer);
1082+
document.body.appendChild(modal);
1083+
};
1084+
10201085
this._allClear = (noErase) => {
1021-
this.blocks.activeBlock = null;
1022-
hideDOMLabel();
1023-
1024-
this.logo.boxes = {};
1025-
this.logo.time = 0;
1026-
this.hideMsgs();
1027-
this.hideGrids();
1028-
this.turtles.setBackgroundColor(-1);
1029-
this.logo.svgOutput = "";
1030-
this.logo.notationOutput = "";
1031-
for (let turtle = 0; turtle < this.turtles.turtleList.length; turtle++) {
1032-
this.logo.turtleHeaps[turtle] = [];
1033-
this.logo.turtleDicts[turtle] = {};
1034-
this.logo.notation.notationStaging[turtle] = [];
1035-
this.logo.notation.notationDrumStaging[turtle] = [];
1036-
if (noErase === undefined || !noErase) {
1037-
this.turtles.turtleList[turtle].painter.doClear(true, true, true);
1086+
const clearCanvasAction = () => {
1087+
this.blocks.activeBlock = null;
1088+
hideDOMLabel();
1089+
1090+
this.logo.boxes = {};
1091+
this.logo.time = 0;
1092+
this.hideMsgs();
1093+
this.hideGrids();
1094+
this.turtles.setBackgroundColor(-1);
1095+
this.logo.svgOutput = "";
1096+
this.logo.notationOutput = "";
1097+
for (let turtle = 0; turtle < this.turtles.turtleList.length; turtle++) {
1098+
this.logo.turtleHeaps[turtle] = [];
1099+
this.logo.turtleDicts[turtle] = {};
1100+
this.logo.notation.notationStaging[turtle] = [];
1101+
this.logo.notation.notationDrumStaging[turtle] = [];
1102+
if (noErase === undefined || !noErase) {
1103+
this.turtles.turtleList[turtle].painter.doClear(true, true, true);
1104+
}
10381105
}
1039-
}
1040-
1041-
this.blocksContainer.x = 0;
1042-
this.blocksContainer.y = 0;
1043-
1044-
// Code specific to cleaning up Music Blocks
1045-
Element.prototype.remove = () => {
1046-
this.parentElement.removeChild(this);
1047-
};
1048-
1049-
NodeList.prototype.remove = HTMLCollection.prototype.remove = () => {
1050-
for (let i = 0, len = this.length; i < len; i++) {
1051-
if (this[i] && this[i].parentElement) {
1052-
this[i].parentElement.removeChild(this[i]);
1106+
1107+
this.blocksContainer.x = 0;
1108+
this.blocksContainer.y = 0;
1109+
1110+
Element.prototype.remove = () => {
1111+
this.parentElement.removeChild(this);
1112+
};
1113+
1114+
NodeList.prototype.remove = HTMLCollection.prototype.remove = () => {
1115+
for (let i = 0, len = this.length; i < len; i++) {
1116+
if (this[i] && this[i].parentElement) {
1117+
this[i].parentElement.removeChild(this[i]);
1118+
}
10531119
}
1120+
};
1121+
1122+
const table = docById("myTable");
1123+
if (table !== null) {
1124+
table.remove();
1125+
}
1126+
1127+
if (docById("helpfulWheelDiv").style.display !== "none") {
1128+
docById("helpfulWheelDiv").style.display = "none";
1129+
this.__tick();
10541130
}
10551131
};
1056-
1057-
const table = docById("myTable");
1058-
if (table !== null) {
1059-
table.remove();
1060-
}
1061-
1062-
if (docById("helpfulWheelDiv").style.display !== "none") {
1063-
docById("helpfulWheelDiv").style.display = "none";
1064-
this.__tick();
1065-
}
1132+
1133+
renderClearConfirmation(clearCanvasAction);
10661134
};
1067-
10681135
/**
10691136
* Sets up play button functionality; runs Music Blocks.
10701137
* @param env {specifies environment}

‎js/turtles.js‎

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -891,57 +891,6 @@ Turtles.TurtlesView = class {
891891
};
892892
};
893893

894-
const renderClearConfirmation = () => {
895-
const modalContainer = document.getElementById("clear-modal-container");
896-
const clearDropdown = document.getElementById("cleardropdown");
897-
clearDropdown.innerHTML = "";
898-
899-
const title = document.createElement("div");
900-
title.innerHTML = `<h2 style="color: #0066FF; font-size: 24px; text-align: left; margin: 0;">${_("Clear Workspace")}</h2>`;
901-
clearDropdown.appendChild(title);
902-
903-
const confirmationMessage = document.createElement("div");
904-
confirmationMessage.innerHTML = `<div style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">
905-
${_("Are you sure you want to clear the workspace ?")}
906-
</div>`;
907-
clearDropdown.appendChild(confirmationMessage);
908-
909-
const confirmButton = document.createElement("button");
910-
confirmButton.innerHTML = _("Confirm");
911-
confirmButton.style.cssText = `
912-
background-color: #2196F3;
913-
color: white;
914-
border: none;
915-
border-radius: 4px;
916-
padding: 8px 16px;
917-
font-weight: bold;
918-
cursor: pointer;
919-
margin-right: 16px;
920-
`;
921-
confirmButton.onclick = () => {
922-
this.activity._allClear();
923-
modalContainer.style.display = "none";
924-
};
925-
clearDropdown.appendChild(confirmButton);
926-
927-
const cancelButton = document.createElement("button");
928-
cancelButton.innerHTML = _("Cancel");
929-
cancelButton.style.cssText = `
930-
background-color: #f1f1f1;
931-
color: black;
932-
border: none;
933-
border-radius: 4px;
934-
padding: 8px 16px;
935-
font-weight: bold;
936-
cursor: pointer;
937-
`;
938-
cancelButton.onclick = () => {
939-
modalContainer.style.display = "none";
940-
};
941-
clearDropdown.appendChild(cancelButton);
942-
943-
modalContainer.style.display = "flex";
944-
};
945894

946895

947896
const __makeClearButton = () => {
@@ -957,9 +906,10 @@ Turtles.TurtlesView = class {
957906
);
958907

959908
// Assign click listener to the Clear button
960-
this._clearButton.onclick = renderClearConfirmation;
909+
this._clearButton.onclick = () => {
910+
this.activity._allClear();
911+
};
961912
};
962-
963913

964914
/**
965915
* Makes collapse button by initailising 'COLLAPSEBUTTON' SVG.

0 commit comments

Comments
 (0)