DialogManager

ภาพรวม

DialogManager คือระบบจัดการ dialogs และ modals ใน Now.js Framework รองรับ alerts, confirms, prompts และ custom dialogs

ใช้เมื่อ:

• ต้องการ alert/confirm/prompt
• ต้องการ modal dialogs
• ต้องการ form dialogs
• ต้องการ async dialog results

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

• ✅ Promise-based API
• ✅ Alert, Confirm, Prompt built-in
• ✅ Custom template support
• ✅ Keyboard accessible
• ✅ Focus trapping
• ✅ Backdrop management

การตั้งค่า

DialogManager.init({
  // Animation duration
  animationDuration: 200,

  // Close on backdrop click
  closeOnBackdrop: true,

  // Close on Escape key
  closeOnEscape: true,

  // Show backdrop
  showBackdrop: true,

  // Focus first input
  autoFocus: true,

  // Default button labels
  labels: {
    ok: 'OK',
    cancel: 'Cancel',
    yes: 'Yes',
    no: 'No'
  }
});

API อ้างอิง

DialogManager.alert(message, title?, options?)

Show alert dialog

Returns: Promise<void>

await DialogManager.alert('บันทึกสำเร็จ!', {
  title: 'สำเร็จ'
});

DialogManager.confirm(message, title?, options?)

Show confirm dialog

Returns: Promise<boolean>

const confirmed = await DialogManager.confirm('ลบรายการนี้?', {
  title: 'ยืนยันการลบ',
  confirmLabel: 'ลบ',
  cancelLabel: 'ยกเลิก'
});

DialogManager.prompt(message, defaultValue?, title?, options?)

Show prompt dialog

Returns: Promise<string|null>

const email = await DialogManager.prompt('Enter your email:', '', {
  title: 'Email Required',
  inputType: 'email',
  placeholder: 'user@example.com'
});

DialogManager.close(dialog)

Close current dialog

DialogManager.close(selectedValue);

DialogManager.closeAll()

Close all open dialogs

เหตุการณ์

เหตุการณ์ของ DialogManager เป็น DOM CustomEvent ที่ dispatch บนอีลิเมนต์ dialog
จึงต้องรับด้วย element.addEventListener() และอ่านค่าจาก event.detail

dialog.addEventListener('dialog:shown', (e) => {
  console.log('Dialog shown', e.detail.dialog);
});

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

/* Dialog container */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Dialog box */
.dialog {
  background: white;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}

.dialog-content {
  padding: 24px;
  overflow-y: auto;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Buttons */
.dialog-btn {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.dialog-btn-primary {
  background: #3b82f6;
  color: white;
  border: none;
}

ข้อควรระวัง

⚠️ 1. Await the Promise

// ❌ ไม่ await
DialogManager.confirm('Delete?');
deleteItem();  // Runs immediately!

// ✅ Await
const confirmed = await DialogManager.confirm('Delete?');
if (confirmed) {
  deleteItem();
}

⚠️ 2. Handle null/undefined

// prompt อาจ return null
const value = await DialogManager.prompt('Enter:');

// ❌ ไม่ check
processValue(value);

// ✅ Check null
if (value !== null) {
  processValue(value);
}

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

• BackdropManager - Backdrops
• NotificationManager - Notifications