`NX.NexaNotif` — Notifikasi

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Komponen toast untuk NXDOM: kartu di pojok layar (fixed), tipe success / warning / error / info, tombol Close / OK / Snooze, auto-hide dengan jeda hover, dan opsional suara lewat NX.NexaVoice jika pengaturan mengizinkan.

Akses	Keterangan
`NX.NexaNotif`	Kelas konstruktor
`NX.Notifikasi`	Alias ke `NexaNotif`

JavaScript

import {
  NexaNotif,
  ensureNotifStylesheet,
} from "/assets/modules/Notifikasi/NexaNotif.js";

Dialog blocking: NX.Modal. Penyimpanan preferensi suara lewat NX.ref / IndexedDB (md menyebut bucketsStore / system).

Contoh cepat

Dengan `NX`

JavaScript

const Notif = new NX.Notifikasi({ autoHideDelay: 5000 });
window.nexaNotif = Notif;

await Notif.show({
  type: "success",
  title: "Tersimpan",
  subtitle: "Data berhasil disimpan.",
});

Notif.addNotification(
  "Peringatan",
  "Silakan periksa kembali formulir.",
  "warning",
  ["close"],
  true
);

Notif.clearAll();

window.nexaNotif wajib agar tombol Close/OK/Snooze pada kartu (atribut onclick) berfungsi.

Import modul (tanpa `NX` global)

JavaScript

import { NexaNotif, ensureNotifStylesheet } from "/assets/modules/Notifikasi/NexaNotif.js";

await ensureNotifStylesheet();

const notif = new NexaNotif({ autoHideDelay: 4000 });
window.nexaNotif = notif;

notif.addNotification("Info", "Pesan singkat.", "info", ["close"], true);

1. Stylesheet (`ensureNotifStylesheet`)

notifikasi.css dimuat sekali lewat NX.NexaStylesheet.Dom, URL stabil dari import.meta.url. init() pada NexaNotif sudah memicu pemuatan (void ensureNotifStylesheet()).

JavaScript

await ensureNotifStylesheet();

2. Kontainer DOM

ID: notificationContainer
Kelas: nx-notif-container (+ nx-notif-hidden / nx-notif-showing)

Jika belum ada, NexaNotif membuat elemen dan menempatkannya ke #nexa_app, atau document.body.

HTML

<div
  class="nx-notif-container nx-notif-hidden"
  id="notificationContainer"
  role="region"
  aria-live="polite"
></div>

3. Instansiasi & `window.nexaNotif`

Kartu dari addNotification memakai onclick="window.nexaNotif.closeNotification(this)" (dan snooze). NexaNotif.js menginisialisasi window.nexaNotif = null; isi setelah instance dibuat (lihat NexaNotif.html).

JavaScript

const Notif = new NX.Notifikasi({ autoHideDelay: 3000 });
window.nexaNotif = Notif;

4. Opsi konstruktor

Opsi	Default	Keterangan
`autoHideDelay`	`5000`	Durasi (ms) auto-hide (dapat dijeda saat hover)

JavaScript

const notif = new NX.Notifikasi({ autoHideDelay: 8000 });
window.nexaNotif = notif;

5. Metode utama

Metode	Keterangan
`show(options?)`	Tampilkan kontainer; kartu dari `options` atau default demo.
`hide()`	Sembunyikan kontainer (`nx-notif-hidden`).
`addNotification(…)`	Tambah satu kartu dinamis.
`addNotificationWithDelay(…, delay)`	Sama + ganti sementara `autoHideDelay` untuk kartu itu.
`clearAll()`	Hapus kartu, timer, `hide()`.
`closeNotification(button)`	Tutup dari elemen tombol.
`closeNotificationDirect(card)`	Tutup tanpa tombol (kartu tanpa aksi).
`snoozeNotification` / `unsnoozeNotification`	Alur demo snooze.
`setAutoHideDelay(ms)`	Ubah delay default instance.
`setVoiceEnabled`, `updateVoiceSettings`, `speakNotification`, …	Integrasi suara / `NX.ref` — lihat §9.

JavaScript

Notif.hide();
Notif.clearAll();
Notif.addNotificationWithDelay(
  "Cepat",
  "Hilang dalam 1 detik",
  "info",
  ["close"],
  1000
);
Notif.setAutoHideDelay(10000);

addNotificationWithDelay(title, subtitle, type?, actions?, delay?, icon?) — sementara mengganti autoHideDelay instance untuk kartu yang ditambahkan (addNotification dipanggil dengan autoHide: true).

6. `show(options)`

Properti	Keterangan
`type`	`success` \| `warning` \| `error` \| `info` — default judul/subtitle/ikon.
`title`, `subtitle`	Teks kartu.
`actions`	`false` tanpa tombol; atau `['close']`, `['ok']`, `['close','snooze']`, dll.
`autoHide`	Default `true`; `false` tanpa timer.
`icon`	Nama glyph Material Symbols (override default per tipe).

Kontainer kosong: dengan options.type → createSingleNotification; tanpa type → createDefaultNotifications() (tiga kartu demo).

JavaScript

await Notif.show({
  type: "error",
  title: "Gagal menyimpan",
  subtitle: "Periksa koneksi lalu coba lagi.",
});

await Notif.show({
  type: "info",
  title: "Pemberitahuan",
  subtitle: "Ada pembaruan tersedia.",
  icon: "notifications_active",
});

await Notif.show({
  type: "success",
  title: "Selesai",
  subtitle: "Tidak ada tombol; auto-hide.",
  actions: false,
});

await Notif.show();

7. `addNotification` & tipe

addNotification(title, subtitle, type = 'info', actions = ['close'], autoHide = true, icon = null)

Tipe	Warna ikon (perkiraan)	Ikon default
`success`	hijau	`check_circle`
`warning`	oranye	`warning`
`error`	merah	`error`
`info`	biru	`info`

Aksi: close, ok (memanggil closeNotification), snooze. Auto-hide: hover membersihkan timer, mouseleave menjadwalkan ulang. Kartu tanpa tombol ditutup lewat closeNotificationDirect.

JavaScript

Notif.addNotification("Berhasil", "Proses selesai.", "success", ["ok"], true);

Notif.addNotification("Jadwal", "Istirahat dalam 5 menit.", "info", ["close", "snooze"], true);

Notif.addNotification("Upload", "File siap.", "success", ["close"], true, "cloud_upload");

Notif.addNotification("Hanya teks", "Auto hilang.", "info", [], true);

8. Struktur HTML & kelas CSS

HTML

<div class="nx-notif-card">
  <div class="nx-notif-icon">…</div>
  <div class="nx-notif-content">
    <div class="nx-notif-title">Judul</div>
    <div class="nx-notif-subtitle">Subjudul</div>
  </div>
  <div class="nx-notif-actions">
    <button class="nx-notif-action-btn nx-notif-close-btn">Close</button>
  </div>
</div>

Kontainer: .nx-notif-container — fixed kanan atas, kolom vertikal, z-index tinggi.
Kartu: .nx-notif-card — hover sedikit terangkat.
Demo HTML: .nx-notif-trigger-btn

Ikon memakai <span class="material-symbols-outlined"> — pastikan font Material Symbols dimuat.

9. Suara (voice)

Jika NX.NexaVoice dan NX.ref tersedia, preferensi bucketsStore / system (field voice) digunakan; speakNotification membaca subtitle. Tanpa dependensi itu, hanya visual.

JavaScript

await Notif.updateVoiceSettings();

10. Referensi di proyek

Lokasi	Isi
`assets/modules/Notifikasi/NexaNotif.html`	Tombol uji, kontainer, instansiasi, `window.nexaNotif`, contoh `show` / `addNotificationWithDelay`.
`templates/notifikasi.js`	Rute demo `NX.Notifikasi` + `show({ type: 'success', … })`.

JavaScript

const Notif = new NX.Notifikasi({ autoHideDelay: 3000 });
window.nexaNotif = Notif;

await Notif.show({
  type: "success",
  title: "Operation Successful",
  subtitle: "Your data has been saved successfully!",
});

Berkas implementasi

assets/modules/Notifikasi/NexaNotif.js, notifikasi.css (satu folder dengan modul), assets/modules/Notifikasi/NexaNotif.html.

Jika API berubah, utamakan sumber NexaNotif.js dan NexaNotif.html.

Nxdom Framework

NX.NexaNotif — Notifikasi

Contoh cepat

Dengan NX

Import modul (tanpa NX global)

1. Stylesheet (ensureNotifStylesheet)

2. Kontainer DOM

3. Instansiasi & window.nexaNotif

4. Opsi konstruktor

5. Metode utama

6. show(options)

7. addNotification & tipe

8. Struktur HTML & kelas CSS

9. Suara (voice)

10. Referensi di proyek

Berkas implementasi

`NX.NexaNotif` — Notifikasi

Dengan `NX`

Import modul (tanpa `NX` global)

1. Stylesheet (`ensureNotifStylesheet`)

3. Instansiasi & `window.nexaNotif`

6. `show(options)`

7. `addNotification` & tipe