DialogManager

Overview

DialogManager is the dialog and modal management system in Now.js Framework. It supports alerts, confirms, prompts, and custom dialogs.

When to use:

• Need alert/confirm/prompt
• Need modal dialogs
• Need form dialogs
• Need async dialog results

Why use it:

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

Basic Usage

Alert

await DialogManager.alert('Operation successful!');

Confirm

const confirmed = await DialogManager.confirm('Confirm delete?');

if (confirmed) {
  await deleteItem();
}

Prompt

const name = await DialogManager.prompt('Enter your name:', 'Default');

if (name) {
  console.log('Name entered:', 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 }
  ]
});

Configuration

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 Reference

DialogManager.alert(message, options?)

Show alert dialog

Returns: Promise<void>

await DialogManager.alert('Saved successfully!', {
  title: 'Success'
});

DialogManager.confirm(message, options?)

Show confirm dialog

Returns: Promise<boolean>

const confirmed = await DialogManager.confirm('Delete this item?', {
  title: 'Confirm Delete',
  confirmLabel: 'Delete',
  cancelLabel: 'Cancel'
});

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

Events

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);
}

Real-World Examples

Delete Confirmation

async function handleDelete(id) {
  const confirmed = await DialogManager.confirm(
    'Are you sure you want to delete this item? This action cannot be undone.',
    {
      title: 'Confirm Delete',
      confirmLabel: 'Delete Permanently',
      cancelLabel: 'Cancel'
    }
  );

  if (confirmed) {
    await ApiService.delete(`/items/${id}`);
    NotificationManager.success('Deleted successfully');
    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 Styling

/* 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;
}

Common Pitfalls

⚠️ 1. Await the Promise

// ❌ Not awaiting
DialogManager.confirm('Delete?');
deleteItem();  // Runs immediately!

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

⚠️ 2. Handle null/undefined

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

// ❌ Not checking
processValue(value);

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

Related Documentation

• BackdropManager - Backdrops
• NotificationManager - Notifications