NexaLink `NX.Link`

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Modul untuk mencegah reload penuh pada tautan dalam suatu kontainer (event delegation), memperbarui URL lewat history.pushState, mengirim link:navigate, dan (lewat NexaLinkUI) fetch halaman same-origin lalu menyisipkan fragmen HTML ke area konten — opsional dengan spinner (NexaSpinner.js).

Sumber: assets/modules/Link/NexaLink.js · Dokumentasi modul (Markdown): assets/modules/docs/NexaLink.md

API global (`nxdom.js`)

Simbol	Isi
`NX.Link`	Kelas `NexaLinkUI` — `new NX.Link({ … })`
`NX.NexaLink`	Kelas `NexaLink`
`NX.LinkDefault`	Fungsi `LinkDefault(selector, root?, options?)`
`NX.spinner`	Dipakai internal oleh `load()` bila opsi `spinner` di konstruktor diisi
`NX.onSkip`	Fungsi `onSkip(selector, linkSelector?)` — handle full page reload untuk link tertentu

Kelas `NexaLink`

Satu listener klik di root (bubbling). Hanya <a> yang cocok element.closest(selector) dan berada di dalam root yang diproses.

Method	Keterangan
`constructor(selector, root?)`	`root` default `document`; bisa string selector atau node
`getBase()`	Menyelesaikan `root` ke elemen
`attach({ onNavigate? })`	Pasang delegation; `onNavigate(detail)` dipanggil untuk klik yang lolos filter awal. Same-origin path → `preventDefault` + `pushState` + `link:navigate`. `href` hanya `#…` → tidak di-intersep

Root tidak ada: jika root string dan querySelector mengembalikan null, atau selector tidak valid, attach() tidak memasang listener (no-op, tanpa error).

Urutan: onNavigate dipanggil sebelum keputusan preventDefault / hash native, jadi callback (dan event nexa:link di NexaLinkUI) dapat menerima klik yang akhirnya tetap navigasi penuh (mis. origin lain).

Diabaikan: tombol non-primer, modifier keyboard, target="_blank", download, skema javascript: / mailto: / tel: / data:, origin asing.

`LinkDefault(selector, root?, options?)`

Singkatan: new NexaLink(selector, root).attach(options). Urutan argumen sama kebiasaan utilitas: selector tautan dulu, lalu root.

`NexaLinkUI` — opsi konstruktor

Opsi	Tipe	Default	Keterangan
`loadContentSelectors`	`string[]`	`["#dokumentasi .nx-doc-content", ".nx-doc-content"]`	Dicoba berurutan saat `load()` pada HTML hasil fetch dan pada dokumen aktif
`loadContentSelector`	`string`	—	Satu selector; menggantikan array di atas
`spinner`	objek / `false`	—	Lihat bagian Spinner; `false` atau `{ enabled: false }` mematikan

`onDefault` & `onClick`

onDefault(first, second?) — memasang NexaLink internal; setiap klik memicu nexa:link, menyimpan info(), dan memanggil onClick bila sudah didaftarkan.
Satu argumen berupa #id atau .class → dianggap root menu; selector tautan default "a". Dua string: jika yang kedua seperti root (#/.), urutan (selector, root) seperti LinkDefault.
onClick(fn) — idealnya dipanggil sebelum onDefault(...). Rantai method mengembalikan this.
info() — detail klik terakhir atau null.

`onSkip(selector, linkSelector?)`

Fungsi untuk menangani link yang tidak perlu AJAX loading. Link di dalam container akan melakukan full page reload normal (bukan AJAX load).

Berguna untuk link yang mengarah ke halaman lain sepenuhnya atau melayani konten statis, sementara link lain di menu utama menggunakan AJAX loading untuk performa lebih baik.

Parameter	Tipe	Default	Keterangan
`selector`	`string`	—	CSS selector untuk container yang berisi link (mis. `#nx-skip-links`)
`linkSelector`	`string`	`"a"`	CSS selector untuk link elements di dalam container

Diabaikan (tidak di-navigate): tautan dengan target="_blank", atribut download, skema javascript: / mailto: / tel: / data:, atau hash-only (#…).

Catatan: Jika container selector bersarang dalam container AJAX (mis. di dalam #workspace-menu), pastikan onSkip didaftarkan sesudah onDefault agar event handling bekerja dengan baik.

`load(href)`

Hanya same-origin; href hanya fragmen → no-op.
Halaman yang sama (hanya beda hash): jika pathname + search URL sama dengan lokasi saat ini → tidak fetch, spinner tidak tampil; hanya scroll halus ke elemen dengan id dari hash. Cocok untuk tautan seperti …/nexa-form#fm-config saat dokumen sudah berisi konten itu (setelah klik, URL sudah diperbarui lewat pushState di NexaLink).
Jika path berbeda: fetch pathname + search dengan Accept: text/html.
Parse dengan DOMParser; salin innerHTML dari node pertama yang cocok selector konten di response ke node yang sama di dokumen aktif. Jika salah satu sisi tidak ketemu, swap dilewati.
Perbarui document.title dari <title> response jika ada (hanya setelah fetch).
Jika URL punya hash, scrollIntoView({ behavior: "smooth" }) ke elemen dengan id tersebut.

Batasan: konten yang disisipkan lewat innerHTML tidak menjalankan tag <script>.

Integrasi dengan menu (`onClick` + `load`)

Pola umum: setiap klik memanggil link.load(info.href). Cabang “halaman yang sama” di atas mencegah fetch berulang untuk anchor di dokumen yang sedang ditampilkan; cukup scroll ke bagian dengan id yang sesuai hash.

Pastikan elemen root onDefault("#…") ada di halaman yang menjalankan skrip. Di tema, menu dokumentasi memakai #nx-js-doc-menu — pada halaman tanpa sidebar dok, jangan memasang listener ke selector yang tidak ada (atau gunakan halaman terpisah tanpa inisialisasi link dok).

`popstate` & tombol mundur

NexaLink tidak menangani popstate. Navigasi lewat pushState memperbarui bilah alamat; mengembalikan konten sesuai entri histori (tombol mundur/maju) menjadi tanggung jawab aplikasi, misalnya mendengarkan window.addEventListener("popstate", …) dan memanggil load(location.href) atau logika router Anda.

Spinner

Opsi spinner dinormalisasi ke argumen NX.spinner(): antara lain enabled, centerScreen (true → overlay di body), target (untuk inline), type, size, color, position, message.

Spinner inline pada elemen yang sama dengan target load() akan hilang saat innerHTML diganti; destroy() tetap dipanggil di finally.

Event

Event	Keterangan
`nexa:link`	`CustomEvent`; `detail` = `NexaLinkNavigateDetail`
`link:navigate`	Setelah `pushState` dari `NexaLink.attach` (event biasa)

`NexaLinkNavigateDetail`

Field	Keterangan
`href`	Atribut `href` (trim)
`element`	`HTMLAnchorElement`
`text`	Teks tampilan (trim)
`event`	`MouseEvent` asli

Contoh menu dokumen (ringkas)

JavaScript

const link = new NX.Link({
  loadContentSelectors: ["#dokumentasi .nx-doc-content", ".nx-doc-content"],
  spinner: {
    enabled: true,
    centerScreen: false,
    target: "#dokumentasi .nx-doc-content",
    type: "inline",
    size: "medium",
    color: "#CB2F2F",
    message: "Memuat…",
  },
});

link
  .onClick((info) => {
    if (info.href) {
      link.load(info.href).catch((err) => console.error("Menu fetch:", err));
    }
  })
  .onDefault("#nx-js-doc-menu");

// Setup link yang melakukan full page reload (bukan AJAX)
NX.onSkip("#nx-skip-links", "a");

Skrip ini hidup di menu.html sidebar; pastikan nxdom.js sudah dimuat sebelum modul tersebut dijalankan. Link di #nx-js-doc-menu akan AJAX load, sedangkan link di #nx-skip-links melakukan full page reload.

Contoh `onSkip` — link eksternal & platform

HTML

<nav class="nx-nav-group" id="nx-skip-links">
  <a href="/docs/platform/javascript" class="nx-nav-item">
    NXDOM <code>Core</code>
  </a>
  <a href="/docs/platform/electron" class="nx-nav-item">
    Electron <code>Desktop</code>
  </a>
  <a href="/docs/platform/react" class="nx-nav-item">
    React Native <code>Mobile</code>
  </a>
</nav>

JavaScript

// Daftarkan skip links dengan full page reload
NX.onSkip("#nx-skip-links", "a");

// Sekarang klik link di #nx-skip-links akan melakukan
// window.location.href = ... (full reload), bukan AJAX load

Use case: Link ke platform/dokumentasi lain, halaman statis, atau area yang tidak perlu AJAX loading untuk performa optimal. Link di #nx-skip-links akan full page reload, sementara link lain di menu utama tetap AJAX loading.

Impor modul langsung

JavaScript

import { NexaLink, LinkDefault, NexaLinkUI, onSkip } 
  from "/assets/modules/Link/NexaLink.js";

LinkDefault("a", "#sidebar", { 
  onNavigate: (d) => console.log(d.href) 
});

const ui = new NexaLinkUI({ loadContentSelector: "#main" });
ui.onDefault("#nav").onClick((info) => ui.load(info.href));

onSkip("#nx-skip-links", "a");

Setelah nxdom.js, gunakan NX.Link / NX.LinkDefault / NX.NexaLink / NX.onSkip.

Dokumentasi & sumber

assets/modules/docs/NexaLink.md — referensi penuh · assets/modules/Link/NexaLink.js · assets/modules/Dom/NexaSpinner.js · NexaScroll (menu samping memakai scroll + link bersamaan)

Nxdom Framework

NexaLink NX.Link

API global (nxdom.js)

Kelas NexaLink

LinkDefault(selector, root?, options?)

NexaLinkUI — opsi konstruktor

onDefault & onClick

onSkip(selector, linkSelector?)

load(href)

Integrasi dengan menu (onClick + load)

popstate & tombol mundur

Spinner

Event

NexaLinkNavigateDetail

Contoh menu dokumen (ringkas)

Contoh onSkip — link eksternal & platform

Impor modul langsung

Dokumentasi & sumber

NexaLink `NX.Link`

API global (`nxdom.js`)

Kelas `NexaLink`

`LinkDefault(selector, root?, options?)`

`NexaLinkUI` — opsi konstruktor

`onDefault` & `onClick`

`onSkip(selector, linkSelector?)`

`load(href)`

Integrasi dengan menu (`onClick` + `load`)

`popstate` & tombol mundur

`NexaLinkNavigateDetail`

Contoh `onSkip` — link eksternal & platform