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

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

Alert

await DialogManager.alert('ข้อความสำเร็จ!');

Confirm

const confirmed = await DialogManager.confirm('ยืนยันการลบ?');

if (confirmed) {
  await deleteItem();
}

Prompt

const name = await DialogManager.prompt('กรุณาใส่ชื่อ:', 'ค่าเริ่มต้น');

if (name) {
  console.log('ชื่อที่ใส่:', name);
}

Custom Dialog

const result = await DialogManager.open({
  title: 'Edit Profile',
  template: '/dialogs/edit-profile.html',
  data: { user: currentUser },
  buttons: [
    { label: 'Cancel', value: false },
    { label: 'Save', value: true, primary: true }
  ]
});

การตั้งค่า

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, options?)

Show alert dialog

Returns: Promise<void>

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

DialogManager.confirm(message, options?)

Show confirm dialog

Returns: Promise<boolean>

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

DialogManager.prompt(message, defaultValue?, 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.open(options)

Open custom dialog

Returns: Promise<any>

const result = await DialogManager.open({
  title: 'Select Option',
  content: `
    <div class="options">
      <button data-value="a">Option A</button>
      <button data-value="b">Option B</button>
    </div>
  `,
  width: '400px'
});

DialogManager.close(result?)

Close current dialog

DialogManager.close(selectedValue);

DialogManager.closeAll()

Close all open dialogs

เหตุการณ์

EventManager.on('dialog:open', (e) => {
  console.log('Dialog opened');
});

Custom Dialog Templates

Template File

<!-- /dialogs/edit-user.html -->
<div class="edit-user-form">
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="name" value="{{user.name}}">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" value="{{user.email}}">
  </div>
</div>

Usage

const result = await DialogManager.open({
  title: 'Edit User',
  template: '/dialogs/edit-user.html',
  data: { user: selectedUser },
  buttons: [
    { label: 'Cancel', value: null },
    { label: 'Save', value: 'save', primary: true }
  ]
});

if (result === 'save') {
  const form = document.querySelector('.dialog-content form');
  const data = FormManager.getValues(form);
  await saveUser(data);
}

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

Delete Confirmation

async function handleDelete(id) {
  const confirmed = await DialogManager.confirm(
    'คุณแน่ใจหรือไม่ว่าต้องการลบรายการนี้? การดำเนินการนี้ไม่สามารถย้อนกลับได้',
    {
      title: 'ยืนยันการลบ',
      confirmLabel: 'ลบถาวร',
      cancelLabel: 'ยกเลิก'
    }
  );

  if (confirmed) {
    await ApiService.delete(`/items/${id}`);
    NotificationManager.success('ลบสำเร็จ');
    refreshList();
  }
}

Form Dialog

async function openEditDialog(item) {
  const result = await DialogManager.open({
    title: `Edit: ${item.name}`,
    template: '/dialogs/item-form.html',
    data: { item },
    width: '500px',
    buttons: [
      { label: 'Cancel', value: false },
      { label: 'Save Changes', value: true, primary: true }
    ]
  });

  if (result) {
    const formData = DialogManager.getFormData();
    await ApiService.put(`/items/${item.id}`, formData);
    NotificationManager.success('Saved!');
  }
}

Image Preview

function previewImage(src) {
  DialogManager.open({
    className: 'image-preview-dialog',
    content: `<img src="${src}" alt="Preview">`,
    buttons: [{ label: 'Close', value: null }]
  });
}

การจัดรูปแบบ 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