Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions assets/js/confirm-delete.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
// ── Confirm Delete Modal ─────────────────────────────────────────────────────
(function () {
// Inject modal HTML into page
const modalHTML = `
<div id="confirmDeleteModal" style="display:none; position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
align-items:center; justify-content:center;">
<div style="background:#fff; border-radius:16px; padding:32px 24px;
max-width:380px; width:90%; margin:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3);
text-align:center; font-family:inherit;">

<!-- Icon -->
<div style="width:56px; height:56px; background:#fee2e2; border-radius:50%;
display:flex; align-items:center; justify-content:center; margin:0 auto 16px;">
<svg width="28" height="28" fill="none" stroke="#dc2626" stroke-width="2"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7h6m-7 0a1 1 0 01-1-1V5a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1H5z"/>
</svg>
</div>

<h3 style="font-size:18px; font-weight:700; color:#111827; margin:0 0 8px;">
Confirm Delete
</h3>
<p id="confirmDeleteMessage"
style="font-size:14px; color:#6b7280; margin:0 0 24px; line-height:1.5;">
Are you sure you want to delete this? This action cannot be undone.
</p>

<div style="display:flex; gap:12px;">
<button onclick="closeConfirmDelete()"
style="flex:1; padding:10px; border-radius:10px; border:1.5px solid #e5e7eb;
background:#fff; color:#374151; font-weight:600; font-size:14px;
cursor:pointer;">
No, Cancel
</button>
<button id="confirmDeleteBtn"
style="flex:1; padding:10px; border-radius:10px; border:none;
background:#dc2626; color:#fff; font-weight:600; font-size:14px;
cursor:pointer;">
Yes, Delete
</button>
</div>
</div>
</div>`;

document.addEventListener("DOMContentLoaded", function () {
document.body.insertAdjacentHTML("beforeend", modalHTML);
});
})();

// ── Public API ────────────────────────────────────────────────────────────────

/**
* Call this on any delete link/button.
* Usage: onclick="return confirmDelete(this.href)"
* onclick="return confirmDelete('path/to/delete?id=5')"
* onclick="return confirmDelete(this.href, 'Delete this student?')"
*/
function confirmDelete(deleteUrl, message) {
var modal = document.getElementById("confirmDeleteModal");
var btn = document.getElementById("confirmDeleteBtn");
var msg = document.getElementById("confirmDeleteMessage");

if (message) msg.textContent = message;
else msg.textContent = "Are you sure you want to delete this? This action cannot be undone.";

modal.style.display = "flex";

// Remove old listener, add fresh one
var newBtn = btn.cloneNode(true);
btn.parentNode.replaceChild(newBtn, btn);

newBtn.addEventListener("click", function () {
window.location.href = deleteUrl;
});

return false; // prevent default link navigation
}

function closeConfirmDelete() {
document.getElementById("confirmDeleteModal").style.display = "none";
}

// Close on backdrop click
document.addEventListener("click", function (e) {
var modal = document.getElementById("confirmDeleteModal");
if (modal && e.target === modal) closeConfirmDelete();
});

// Close on Escape key
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeConfirmDelete();
});