BackdropManager

ภาพรวม

BackdropManager คือระบบจัดการ backdrop overlays ใน Now.js Framework รองรับ multiple backdrops, animations และ keyboard handling

ใช้เมื่อ:

• ต้องการ backdrop สำหรับ modals, dialogs
• ต้องการ overlay พร้อม click handler
• ต้องการ stacking multiple overlays
• ต้องการ prevent body scroll

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

• ✅ Automatic z-index management
• ✅ Multiple backdrop stacking
• ✅ Click handlers
• ✅ Keyboard support (Escape)
• ✅ Smooth animations
• ✅ Scroll prevention

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

Show Backdrop

// Simple backdrop
const backdropId = BackdropManager.show(targetElement);

// With click handler
const backdropId = BackdropManager.show(element, () => {
  console.log('Backdrop clicked');
  closeModal();
});

// With options
const backdropId = BackdropManager.show(element, onClickHandler, {
  background: 'rgba(0, 0, 0, 0.7)',
  opacity: 0.7,
  className: 'custom-backdrop'
});

Hide Backdrop

// Hide specific backdrop
BackdropManager.hide(backdropId);

// Hide all backdrops
BackdropManager.hideAll();

การตั้งค่า

await BackdropManager.init({
  // Base z-index for first backdrop
  baseZIndex: 990,

  // Animation settings
  animation: true,
  duration: 200,        // Animation duration (ms)
  useTransition: true,

  // Appearance
  className: 'backdrop',
  background: 'rgba(0,0,0,0.5)',
  opacity: 0.5,

  // Behavior
  preventScroll: true,  // Prevent body scroll when active
  debug: false
});

API อ้างอิง

BackdropManager.init(options)

Initialize BackdropManager

Returns: Promise<BackdropManager>

BackdropManager.show(element, onClick?, options?)

แสดง backdrop

Returns: number - Backdrop ID

const id = BackdropManager.show(modalElement, () => {
  BackdropManager.hide(id);
});

BackdropManager.hide(id)

ซ่อน backdrop

BackdropManager.hideAll()

ซ่อน backdrops ทั้งหมด

BackdropManager.update(element, options)

อัพเดท backdrop options

BackdropManager.isActive(element)

ตรวจสอบว่ามี active backdrop

Returns: boolean

BackdropManager.getBackdropById(id)

รับ backdrop element

Returns: HTMLElement|null

BackdropManager.destroy()

ทำลาย manager และ cleanup

Keyboard Handling

กด Escape เพื่อปิด backdrop บนสุด:

// Automatically handled
// Press Escape to hide topmost backdrop

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

/* Base backdrop style */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 990;
}

/* Custom backdrop */
.backdrop.dark {
  background: rgba(0, 0, 0, 0.8);
}

.backdrop.blur {
  backdrop-filter: blur(4px);
}

.backdrop.light {
  background: rgba(255, 255, 255, 0.9);
}

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

Modal with Backdrop

function openModal(modalElement) {
  const backdropId = BackdropManager.show(modalElement, () => {
    closeModal(modalElement, backdropId);
  });

  modalElement.classList.add('open');
  modalElement.dataset.backdropId = backdropId;
}

function closeModal(modalElement, backdropId) {
  modalElement.classList.remove('open');
  BackdropManager.hide(backdropId || modalElement.dataset.backdropId);
}

Multiple Stacked Modals

// First modal
const backdrop1 = BackdropManager.show(modal1, () => closeModal1());
modal1.style.zIndex = 1001;

// Second modal (stacks on top)
const backdrop2 = BackdropManager.show(modal2, () => closeModal2());
modal2.style.zIndex = 1011;

// Escape closes topmost first
// Z-index automatically managed (990, 1000, 1010, ...)

Sidebar with Backdrop

function openSidebar() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.add('open');

  const backdropId = BackdropManager.show(sidebar, () => {
    closeSidebar();
  }, {
    background: 'rgba(0, 0, 0, 0.3)'
  });

  sidebar.dataset.backdropId = backdropId;
}

function closeSidebar() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.remove('open');
  BackdropManager.hide(sidebar.dataset.backdropId);
}

Integration with DialogManager

DialogManager ใช้ BackdropManager อัตโนมัติ:

// DialogManager.show() calls BackdropManager.show() internally
const dialog = DialogManager.custom({
  title: 'Modal Title',
  message: 'Content'
});

// Backdrop created and managed automatically

ข้อควรระวัง

⚠️ 1. เก็บ Backdrop ID

// ❌ ไม่เก็บ ID - ไม่สามารถ hide ได้
BackdropManager.show(element);

// ✅ เก็บ ID ไว้ใช้ hide
const backdropId = BackdropManager.show(element);
// ใช้ backdropId ใน hide()

⚠️ 2. Z-index ของ Content

// Backdrop z-index: 990, 1000, 1010, ...
// Content ต้องมี z-index สูงกว่า backdrop

const backdropId = BackdropManager.show(modal);
modal.style.zIndex = 1001; // สูงกว่า backdrop (1000)

⚠️ 3. Cleanup เมื่อ Remove Element

// ❌ ลบ element แต่ไม่ hide backdrop
element.remove();

// ✅ hide backdrop ก่อน
BackdropManager.hide(backdropId);
element.remove();

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

• DialogManager - Dialog boxes
• Modal - Modal windows