NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NX.Dropdown — NexaDropdown

Komponen dropdown modular: trigger membuka/menutup menu dengan menambah/menghapus class visible (default: show), menutup saat klik di luar dan tombol Escape, serta opsi menutup dropdown lain saat satu dibuka.

  • Sumber: assets/modules/Dropdown/NexaDropdown.js
  • NX: NX.NexaDropdown dan alias NX.Dropdown (kelas sama)

Prasyarat markup

  1. Trigger dan menu harus bisa di-resolve lewat id atau selector CSS.
  2. Menu perlu styling sendiri: default hanya mengelola class (mis. display: none tanpa show, display: block dengan show). Bungkus trigger + menu dalam kontainer position: relative jika menu position: absolute.
  3. Agar NexaDropdown.closeAll() membersihkan DOM konsisten, class menu sebaiknya mengandung substring dropdown-menu atau nav-dropdown-menu. Jika tidak, instance tetap buka/tutup, tetapi cabang querySelectorAll di closeAll mungkin tidak menyentuh menu Anda (instance lain tetap ditutup lewat instance.close()).

Opsi konstruktor

Opsi Tipe Default Keterangan
triggerId string null id elemen trigger
menuId string null id elemen menu
triggerSelector string null Alternatif dari triggerId
menuSelector string null Alternatif dari menuId
showClass string 'show' Class saat menu terbuka
closeOthers boolean true Saat membuka, panggil closeAll (kecuali instance ini)
closeOnOutsideClick boolean true Tutup saat klik di luar trigger dan menu
closeOnEscape boolean true Tutup saat Escape
autoInit boolean true Jika true, init() dijadwalkan di konstruktor (DOMContentLoaded atau segera)
onOpen function null (instance) => void
onClose function null (instance) => void

Prioritas resolve: triggerId / menuId lebih dulu daripada selector.

Instance: metode

Metode Keterangan
init() Pasang listener; cari trigger/menu dari opsi
open() Tambah showClass, set isOpen, panggil onOpen
close() Hapus showClass, set isOpen, panggil onClose
toggle() Sinkron state dengan DOM lalu buka atau tutup
syncState() Samakan isOpen dengan keberadaan showClass di menu
destroy() Lepas listener dokumen & trigger, close(), hapus dari NexaDropdown.instances

Static API

Static Keterangan
NexaDropdown.init(configs) Satu objek atau array konfigurasi; kembalikan satu instance jika satu config, atau array
NexaDropdown.autoInit(container?) Cari [data-dropdown-trigger] di container (default document); nilai atribut = id menu; trigger wajib punya id; tiap pasangan → instance autoInit: false lalu init()
NexaDropdown.closeAll(excludeInstance?) Tutup semua instance terdaftar kecuali yang di-exclude; pada node dengan class mengandung dropdown-menu / nav-dropdown-menu, hapus class show hard-coded (bukan showClass per instance). Jika showClass bukan show, sesuaikan markup atau jangan mengandalkan cabang DOM ini
NexaDropdown.getInstanceByMenu(menuOrId) Cari instance yang menu-nya sama dengan elemen atau getElementById

NexaDropdown.instances — array instance aktif (setelah konstruktor, sebelum destroy).

Auto-init saat load modul

Di akhir NexaDropdown.js, jika document ada, NexaDropdown.autoInit() dipanggil pada DOMContentLoaded atau segera. Hanya menangkap trigger yang sudah ada saat itu.

SPA / konten dinamis: setelah inject HTML (mis. ke #main), panggil lagi:

NX.NexaDropdown.autoInit(containerElem);

Hindari listener ganda: destroy() pada instance lama sebelum mengganti markup route yang sama, atau buat instance manual / init([...]).

Contoh cepat

Manual (by id)

const dd = new NX.Dropdown({ triggerId: "my-dd-btn", menuId: "my-dd-menu", onOpen: () => console.log("open"), onClose: () => console.log("close"), }); // dd.destroy() saat unmount route

Banyak sekaligus

const list = NX.NexaDropdown.init([ { triggerId: "btn-a", menuId: "menu-a" }, { triggerId: "btn-b", menuId: "menu-b" }, ]); // array jika lebih dari satu config

Markup + autoInit

<button type="button" id="user-menu-btn" data-dropdown-trigger="user-menu">User</button> <ul id="user-menu" class="dropdown-menu …"> <li><a href="/profil">Profil</a></li> </ul>
NX.NexaDropdown.autoInit(document.getElementById("main"));

Integrasi routing (NexaRoute)

NexaRoute dapat memanggil getInstanceByMenu / menutup menu dengan class show saat navigasi link di dalam menu. Pastikan menu memakai pola class yang dikenali (mis. dropdown-menu).

Gaya siap pakai (opsional)

assets/modules/assets/css/dropdown.css — kelas .nx-dropdown, .nx-dropdown-btn, .nx-dropdown-content (buka dengan .nx-dropdown.active pada parent). Pola berbeda dari class show default: komponen menambah class pada elemen menu, bukan wrapper. Untuk .nx-dropdown, samakan showClass dengan class yang dipakai CSS Anda atau tetap show + override CSS.

nexa.css meng-import dropdown.css sehingga kelas .nx-dropdown tersedia global bila bundle dipakai.

Demo di proyek

Rute /dropdown — templates/dropdown.js: instance tunggal, init array, data-dropdown-trigger + autoInit(container), plus destroy saat route di-render ulang.

Berkas implementasi

assets/modules/Dropdown/NexaDropdown.js, stylesheet opsional assets/modules/assets/css/dropdown.css; agregasi assets/modules/nxdom.js.