Skip to content

Commit

Permalink
adding conformation for both cases ion advance mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@subhas-pramanik-09
subhas-pramanik-09 committed Dec 13, 2024
1 parent 86872af commit 1978bbf
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 95 deletions.
151 changes: 109 additions & 42 deletions js/activity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
56 changes: 3 additions & 53 deletions js/turtles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<h2 style="color: #0066FF; font-size: 24px; text-align: left; margin: 0;">${_("Clear Workspace")}</h2>`;
clearDropdown.appendChild(title);

const confirmationMessage = document.createElement("div");
confirmationMessage.innerHTML = `<div style="color: #666666; font-size: 16px; margin-bottom: 24px; text-align: left;">
${_("Are you sure you want to clear the workspace ?")}
</div>`;
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 = () => {
Expand All @@ -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.
Expand Down

0 comments on commit 1978bbf

Please sign in to comment.