NotificationManager

ภาพรวม

NotificationManager คือระบบแสดง toast notifications ใน Now.js Framework รองรับ multiple types, animations และ positioning

ใช้เมื่อ:

• ต้องการแจ้งเตือนผู้ใช้
• ต้องการ feedback หลัง action สำเร็จ/ล้มเหลว
• ต้องการ toast messages
• ต้องการ non-blocking alerts

ทำไมต้องใช้:

• ✅ Multiple types (success, error, warning, info, loading)
• ✅ Configurable position
• ✅ Auto-dismiss with progress bar
• ✅ Queue management
• ✅ Pause on hover
• ✅ RTL support
• ✅ Accessibility (ARIA)

การใช้งานพื้นฐาน

Quick Methods

// Success
NotificationManager.success('บันทึกสำเร็จ');

// Error
NotificationManager.error('เกิดข้อผิดพลาด');

// Warning
NotificationManager.warning('กรุณาตรวจสอบข้อมูล');

// Info
NotificationManager.info('มีข้อความใหม่');

// Loading
const loadingId = NotificationManager.loading('กำลังดำเนินการ...');
// Dismiss later
NotificationManager.dismiss(loadingId);

With Options

NotificationManager.success('บันทึกสำเร็จ', {
  duration: 5000,          // Display duration (ms)
  dismissible: true,       // Can dismiss by click
  progressBar: true,       // Show progress bar
  position: 'top-right'    // Position
});

Notification Types

การตั้งค่า

NotificationManager.init({
  // Position: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
  position: 'top-right',

  // Default duration (ms)
  duration: 3000,

  // Maximum visible notifications
  maxVisible: 5,

  // Enable animations
  animation: true,

  // Allow click to dismiss
  dismissible: true,

  // Show progress bar
  progressBar: false,

  // Pause timer on hover
  pauseOnHover: false,

  // Show close button
  closeButton: true,

  // Show type icons
  icons: true,

  // RTL support
  rtl: false,

  // ARIA attributes
  aria: true
});

API อ้างอิง

NotificationManager.success(message, options?)

แสดง success notification

Returns: string - Notification ID

NotificationManager.error(message, options?)

แสดง error notification

NotificationManager.warning(message, options?)

แสดง warning notification

NotificationManager.info(message, options?)

แสดง info notification

NotificationManager.loading(message, options?)

แสดง loading notification (ต้อง dismiss เอง)

NotificationManager.show(options)

แสดง notification พร้อม custom options

Returns: string - Notification ID

NotificationManager.dismiss(id)

ปิด notification

NotificationManager.clear()

ปิด notifications ทั้งหมด

NotificationManager.setPosition(position)

เปลี่ยน position

เหตุการณ์

// Listen via EventManager
EventManager.on('notification:shown', (data) => {
  console.log('Notification shown:', data.id);
});

EventManager.on('notification:dismissed', (data) => {
  console.log('Notification dismissed:', data.id);
});

การจัดรูปแบบ CSS

/* Container */
.notification-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-container.top-right {
  top: 16px;
  right: 16px;
}

.notification-container.bottom-left {
  bottom: 16px;
  left: 16px;
}

/* Notification */
.notification {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 300px;
  max-width: 400px;
}

.notification.success {
  border-left: 4px solid #10b981;
}

.notification.error {
  border-left: 4px solid #ef4444;
}

.notification.warning {
  border-left: 4px solid #f59e0b;
}

.notification.info {
  border-left: 4px solid #3b82f6;
}

/* Progress bar */
.notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  transition: width linear;
}

/* Animation */
.notification.entering {
  animation: notification-in 0.3s ease-out;
}

.notification.leaving {
  animation: notification-out 0.3s ease-in;
}

@keyframes notification-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes notification-out {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

ตัวอย่างการใช้งานจริง

Form Submission Feedback

async function submitForm(formData) {
  const loadingId = NotificationManager.loading('กำลังบันทึก...');

  try {
    await ApiService.post('/api/save', formData);
    NotificationManager.dismiss(loadingId);
    NotificationManager.success('บันทึกข้อมูลสำเร็จ');
  } catch (error) {
    NotificationManager.dismiss(loadingId);
    NotificationManager.error(error.message || 'เกิดข้อผิดพลาด');
  }
}

API Response Integration

// In ResponseHandler
ApiService.onError((error) => {
  if (error.status === 401) {
    NotificationManager.warning('กรุณาเข้าสู่ระบบใหม่');
  } else if (error.status >= 500) {
    NotificationManager.error('เซิร์ฟเวอร์มีปัญหา กรุณาลองใหม่');
  } else {
    NotificationManager.error(error.message);
  }
});

Stacked Notifications

// Multiple notifications stack automatically
NotificationManager.info('ข้อความ 1');
NotificationManager.info('ข้อความ 2');
NotificationManager.info('ข้อความ 3');
// All 3 shown, oldest at top

ข้อควรระวัง

⚠️ 1. Loading ต้อง Dismiss เอง

// ❌ Loading ค้างอยู่ตลอด
NotificationManager.loading('Loading...');

// ✅ จำ ID ไว้แล้ว dismiss
const id = NotificationManager.loading('Loading...');
// ... do work ...
NotificationManager.dismiss(id);

⚠️ 2. ไม่ควรแสดงมากเกินไป

// ❌ แสดงทุก item
items.forEach(item => {
  NotificationManager.success(`Saved ${item.name}`);
});

// ✅ แสดงสรุป
await Promise.all(items.map(saveItem));
NotificationManager.success(`Saved ${items.length} items`);

เอกสารที่เกี่ยวข้อง

• ErrorManager - Error handling
• DialogManager - Dialogs