DialogManager - Now.js Example

1. Alert Dialog

Simple alert dialogs to notify users about important information.


              // Basic Alert
              await DialogManager.alert('This is a basic alert message', 'Alert');

              // Success Alert
              await DialogManager.alert(
                'Operation completed successfully!',
                'Success',
                { customClass: 'dialog-success' }
              );

              // Error Alert
              await DialogManager.alert(
                'An error occurred. Please try again.',
                'Error',
                { customClass: 'dialog-error' }
              );

2. Confirm Dialog

Ask users to confirm actions before proceeding.


              // Basic Confirm
              const confirmed = await DialogManager.confirm(
                'Are you sure you want to proceed?',
                'Confirm Action'
              );

              if (confirmed) {
                console.log('User confirmed');
              }

              // Delete Confirmation
              const deleteConfirmed = await DialogManager.confirm(
                'This action cannot be undone. Are you sure?',
                'Delete Item',
                { customClass: 'dialog-danger' }
              );

              // Unsaved Changes
              const saveConfirm = await DialogManager.confirm(
                'You have unsaved changes. Do you want to save before leaving?',
                'Unsaved Changes',
                {
                  buttons: {
                    cancel: { text: 'Discard', class: 'text' },
                    confirm: { text: 'Save Changes', class: 'btn-primary' }
                  }
                }
              );

3. Prompt Dialog

Get input from users with a simple dialog.


              // Ask Name
              const name = await DialogManager.prompt(
                'Please enter your name:',
                'Guest',
                'Welcome'
              );

              if (name !== null) {
                console.log('Name:', name);
              }

              // Ask Email
              const email = await DialogManager.prompt(
                'Enter your email address:',
                '',
                'Email'
              );

              // Custom Prompt with Validation
              const age = await DialogManager.prompt(
                'Please enter your age:',
                '18',
                'Age Verification'
              );

4. Custom Dialog

Create fully customized dialogs with HTML content, custom buttons, and callbacks.


              // HTML Content Dialog
              DialogManager.custom({
                title: 'Rich HTML Content',
                message: `
                  <div class="custom-content">
                    <h3>Welcome!</h3>
                    <p>This dialog supports <strong>HTML</strong> content.</p>
                    <ul>
                      <li>Bullet points</li>
                      <li>Formatted text</li>
                      <li>And more!</li>
                    </ul>
                  </div>
                `,
                buttons: {
                  close: { text: 'Close', class: 'btn-primary' }
                }
              });

              // Form Dialog
              const formDialog = DialogManager.custom({
                title: 'User Information',
                message: `
                  <form id="user-form">
                    <div class="form-group">
                      <label>Name</label>
                      <input type="text" name="name" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Email</label>
                      <input type="email" name="email" class="form-control">
                    </div>
                  </form>
                `,
                buttons: {
                  cancel: { text: 'Cancel', class: 'text' },
                  submit: {
                    text: 'Submit',
                    class: 'btn-primary',
                    callback: (dialog) => {
                      const form = dialog.querySelector('#user-form');
                      const data = new FormData(form);
                      console.log('Form data:', Object.fromEntries(data));
                    }
                  }
                }
              });

5. Multiple Dialogs

Open multiple dialogs at the same time. Each new dialog stacks on top.


              // Stack multiple dialogs
              DialogManager.alert('First dialog', 'Dialog 1');
              setTimeout(() => {
                DialogManager.alert('Second dialog', 'Dialog 2');
              }, 500);
              setTimeout(() => {
                DialogManager.alert('Third dialog', 'Dialog 3');
              }, 1000);

              // Close all dialogs at once
              DialogManager.closeAll();

              // Bring specific dialog to front
              DialogManager.bringToFront(dialog);

6. Features Demo

DialogManager comes with built-in features like dragging, keyboard support, and focus trap.

Built-in Features:

Draggable: Drag dialogs by their header
Focus Trap: Tab navigation stays within dialog
Keyboard Support: ESC to close, Tab/Shift+Tab navigation
Backdrop: Optional backdrop with click-to-close
Multiple Dialogs: Stack multiple dialogs with proper z-index
Animations: Smooth fade-in/out effects
Accessibility: ARIA attributes and focus management
Responsive: Works on all screen sizes


              // Draggable dialog
              DialogManager.custom({
                title: 'Drag Me!',
                message: 'Try dragging this dialog by the header',
                draggable: true,  // default is true
                buttons: { close: { text: 'Close', class: 'btn-primary' } }
              });

              // Prevent closing by backdrop click
              DialogManager.confirm(
                'You must choose an option',
                'Important',
                { closeOnBackdrop: false }
              );

              // Custom styling
              DialogManager.alert(
                'This dialog has custom CSS',
                'Styled Dialog',
                { customClass: 'my-custom-dialog rainbow-border' }
              );

7. Events & Callbacks

Listen to dialog events and use callbacks for custom behavior.


              // Using callbacks
              const dialog = DialogManager.custom({
                title: 'Event Demo',
                message: 'Check the console for event logs',
                onShow: (event) => {
                  console.log('Dialog shown:', event.detail.dialog);
                },
                onClose: (event) => {
                  console.log('Dialog closed:', event.detail.dialog);
                },
                buttons: {
                  action: {
                    text: 'Action',
                    class: 'btn-primary',
                    callback: (dialog) => {
                      console.log('Action button clicked!');
                    }
                  }
                }
              });

              // Using addEventListener
              dialog.addEventListener('dialog:shown', (event) => {
                console.log('Shown event fired');
              });

              dialog.addEventListener('dialog:closed', (event) => {
                console.log('Closed event fired');
              });