DOCUMENTATION / FRONTEND

JavaScript & events.

Enhancement kecil, event eksplisit, tanpa frontend build.

PHP 8.2+No buildDL 0.2 alpha

JavaScript aplikasi

Taruh script di public/assets/app.js dan muat dengan defer setelah dl.js. CSP default menolak inline event handler; gunakan addEventListener.

Mengamati perubahan

Komponen seperti select, toggle, calendar dan resizable mengirim dl:change yang bubbles. Struktur detail berbeda per komponen; select mengirim value, toggle pressed.

JavaScript

document.querySelector('[data-dl-select]')?.addEventListener('dl:change', event => {
    console.log(event.detail.value);
});

Questionnaire

dl:complete menandai akhir langkah. Baca field form dan lakukan validasi sebelum menyimpan; event tidak melakukan request otomatis.

JavaScript

document.querySelector('[data-dl-questionnaire]')?.addEventListener('dl:complete', () => {
    // Validasi dan kirim jawaban melalui alur aplikasi.
});

Konfirmasi dialog

Pasang id pada alert-dialog dan dengarkan close. Lanjutkan aksi hanya untuk returnValue confirm, lalu kirim POST ber-CSRF.

JavaScript

document.getElementById('confirm-delete')?.addEventListener('close', event => {
    if (event.target.returnValue !== 'confirm') return;
    // Jalankan alur POST yang telah diotorisasi aplikasi.
});

Konten dinamis

Enhancement saat ini diinisialisasi pada pemuatan halaman. Markup baru yang disisipkan setelahnya tidak otomatis diinisialisasi; gunakan navigasi server atau tulis handler aplikasi khusus.