Su
Mo
Tu
We
Th
Fr
Sa
diff --git a/js/app.js b/js/app.js
index ccec3408..773fa465 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1409,10 +1409,38 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
- document.getElementById('cal-next').addEventListener('click', () => {
- currentMonthDate.setMonth(currentMonthDate.getMonth() + 1);
+ const calPrevBtn = document.getElementById('cal-prev');
+ const calNextBtn = document.getElementById('cal-next');
+
+ function moveCalendarMonth(offset) {
+ currentMonthDate = new Date(
+ currentMonthDate.getFullYear(),
+ currentMonthDate.getMonth() + offset,
+ 1
+ );
renderCalendar();
- });
+ renderTasks();
+ }
+
+ if (calPrevBtn) {
+ calPrevBtn.addEventListener('click', () => moveCalendarMonth(-1));
+ calPrevBtn.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ moveCalendarMonth(-1);
+ }
+ });
+ }
+
+ if (calNextBtn) {
+ calNextBtn.addEventListener('click', () => moveCalendarMonth(1));
+ calNextBtn.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ moveCalendarMonth(1);
+ }
+ });
+ }
document.getElementById('nav-dashboard').addEventListener('click', (e) => {
e.preventDefault();
diff --git a/js/utils/toast.js b/js/utils/toast.js
index b03b4e8c..c84e9f95 100644
--- a/js/utils/toast.js
+++ b/js/utils/toast.js
@@ -2,6 +2,15 @@
* Custom modern toast notifications for StudyPlan
*/
+function escapeHtml(value) {
+ return String(value)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
class ToastManager {
constructor() {
this.container = document.createElement('div');
@@ -12,35 +21,32 @@ class ToastManager {
show(message, type = 'info', duration = 3000) {
const toast = document.createElement('div');
toast.className = `toast-notification toast-${type}`;
-
+
let icon = '';
- if (type === 'success') icon = '✅';
- else if (type === 'error') icon = '❌';
- else if (type === 'warning') icon = '⚠';
- else icon = 'ℹ️';
+ if (type === 'success') icon = '\u2705';
+ else if (type === 'error') icon = '\u274c';
+ else if (type === 'warning') icon = '\u26a0';
+ else icon = '\u2139\uFE0F';
- // Handle messages that already have emojis at the start to avoid double icons
let cleanMessage = message;
- if (/^[✅❌⚠]/.test(message)) {
+ if (/^[\u2705\u274c\u26a0]/.test(message)) {
icon = message.charAt(0);
cleanMessage = message.substring(1).trim();
}
toast.innerHTML = `
-
${icon}
-
${cleanMessage}
+
${escapeHtml(icon)}
+
${escapeHtml(cleanMessage)}
`;
this.container.appendChild(toast);
- // Setup close button
const closeBtn = toast.querySelector('.toast-close');
closeBtn.addEventListener('click', () => {
this.closeToast(toast);
});
- // Auto dismiss
if (duration > 0) {
setTimeout(() => {
this.closeToast(toast);
@@ -62,45 +68,66 @@ class ToastManager {
return new Promise((resolve) => {
const backdrop = document.createElement('div');
backdrop.className = 'custom-confirm-backdrop';
-
+ backdrop.setAttribute('role', 'presentation');
+
const modal = document.createElement('div');
- modal.className = 'custom-confirm-modal modal-card';
-
+ modal.className = 'custom-confirm-modal';
+ modal.setAttribute('role', 'dialog');
+ modal.setAttribute('aria-modal', 'true');
+ modal.setAttribute('aria-labelledby', 'custom-confirm-title');
+ modal.setAttribute('aria-describedby', 'custom-confirm-message');
+
modal.innerHTML = `
-
Confirm Action
-
${message}
-
-
-
+
!
+
+
Confirm deletion
+
${escapeHtml(message)}
+
+
+
+
`;
-
+
backdrop.appendChild(modal);
document.body.appendChild(backdrop);
+ document.body.classList.add('confirm-open');
- // Animation in
- backdrop.style.animation = 'fadeIn 0.2s ease-out forwards';
- modal.style.animation = 'slideUp 0.2s ease-out forwards';
+ const cancelBtn = backdrop.querySelector('.confirm-cancel');
+ const okBtn = backdrop.querySelector('.confirm-ok');
+
+ let isClosing = false;
const close = (result) => {
- backdrop.style.animation = 'fadeOut 0.2s ease-out forwards';
- modal.style.animation = 'slideDown 0.2s ease-out forwards';
+ if (isClosing) return;
+ isClosing = true;
+ backdrop.classList.add('custom-confirm-closing');
+ document.removeEventListener('keydown', onKeyDown);
setTimeout(() => {
if (backdrop.parentNode) {
backdrop.parentNode.removeChild(backdrop);
}
+ document.body.classList.remove('confirm-open');
resolve(result);
- }, 200); // match animation duration
+ }, 180);
};
- backdrop.querySelector('.confirm-cancel').addEventListener('click', () => close(false));
- backdrop.querySelector('.confirm-ok').addEventListener('click', () => close(true));
-
+ function onKeyDown(e) {
+ if (e.key === 'Escape') close(false);
+ }
+
+ cancelBtn.addEventListener('click', () => close(false));
+ okBtn.addEventListener('click', () => close(true));
+
backdrop.addEventListener('click', (e) => {
if (e.target === backdrop) close(false);
});
+
+ document.addEventListener('keydown', onKeyDown);
+ okBtn.focus();
});
}
}
export const Toast = new ToastManager();
+
diff --git a/package-lock.json b/package-lock.json
index 56528823..e9685a4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
"sqlite3": "^6.0.1"
},
"engines": {
- "node": "20.x"
+ "node": ">=20.x"
}
},
"node_modules/@google/genai": {