Cara lain untuk menggunakan dialog, popup, dll.? – Beragampengetahuan

API Popup dan <dialog> elemen adalah dua fitur platform baru favorit saya. Faktanya, saya baru-baru ini [wrote a detailed overview of their use cases] dan segala macam hal yang dapat Anda lakukan dengan mereka, dan bahkan mempelajari beberapa trik yang tidak dapat saya temukan didokumentasikan di tempat lain.

Saya akui, satu hal yang saya benar-benar tidak suka tentang popup dan dialog adalah betapa mudahnya digabungkan ke dalam API. Mereka mencakup kasus penggunaan yang berbeda (perlu dicatat bahwa kotak dialog sering kali berupa modal) tetapi praktiknya sangat mirip, tetapi implementasinya berbeda.

Nah, browser web kini bereksperimen dengan dua atribut HTML (secara teknis disebut “perintah pemanggil”) yang dirancang untuk memanggil popup, kotak dialog, dan, selanjutnya, segala jenis tindakan, dan Tidak perlu menulis JavaScript. Meskipun, jika kamu Melakukan Properti JavaScript baru— command Dan commandfor – menghadirkan beberapa acara baru yang bisa kita dengarkan.

Perintah penelepon? Saya yakin Anda memiliki pertanyaan, jadi mari kita gali lebih dalam.

Kami berada di wilayah percobaan

Sebelum kita membahasnya, kita berurusan dengan fitur eksperimental. Untuk menggunakan perintah invoker hari ini, November 2024, Anda memerlukan Chrome kenari 134+ dengan enable-experimental-web-platform-features bendera disetel ke Enabledperamban Firefox setiap malam 135+ dengan dom.element.invokers.enabled bendera disetel ke trueatau Safari pratinjau teknologi Dan InvokerAttributesEnabled bendera disetel ke true.

Saya optimis kita akan mendapatkan cakupan dasar command Dan commandfor Jika perlu, pertimbangkan seberapa baik mereka mengabstraksi pekerjaan yang saat ini memerlukan skrip yang berat.

dasar command Dan commandfor penggunaan

Pertama, Anda memerlukan a <button> atau tekan tombol <input> bersama <input type="button"> atau <input type="reset">. Selanjutnya, tempelkan command milik. ini command value harus berupa nama perintah yang ingin Anda panggil tombolnya (misalnya, show-modal). Setelah itu, hapus commandfor Properti di sana mengacu pada dialog atau popup yang ingin Anda targetkan id.

<button command="show-modal" commandfor="dialogA">Show dialogA</button>

<dialog id="dialogA">...</dialog>

Dalam contoh ini saya punya <button> elemen dengan a command Properti disetel ke show-modal dan sebuah commandfor Properti disetel ke dialogAyang cocok id salah satu <dialog> Elemen target kami:

Mari kita pahami kemungkinan nilai dari perintah pemanggil ini dan membedah apa yang mereka lakukan.

Lihatlah lebih dekat nilai properti

ini show-modal value adalah perintah yang baru saja saya tunjukkan pada contoh sebelumnya. Secara khusus, ini setara dengan panggilan HTML dalam JavaScript showModal() metode.

Manfaat utamanya adalah show-modal Agar kita bisa, um… pameran satu modal Tidak perlu mengakses JavaScript secara langsung. Ya, jendela popup dengan panggilan HTML ini sudah adapopovertarget Dan popovertargetaction properti, sehingga seperti yang dijelaskan oleh penjelasan Open UI, “keseimbangan sedang diperbaiki”, yang keren, dan yang lebih penting, karena Anda dapat menggunakan command Dan commandfor Hal yang sama berlaku untuk perintah pemanggil popup.

tidak seorang pun show Memesan panggilan show() Digunakan untuk membuat kotak dialog modeless. Saya sebutkan sebelumnya bahwa dialog modeless menjadi mubazir sekarang karena kita memiliki API Popover, terutama karena popover memilikinya ::backdropdan fungsi seperti dialog lainnya. Prediksi saya yang berani adalah bahwa seiring berjalannya waktu, kotak dialog modeless akan menjadi usang.

ini close Memesan Apakah setara dengan JavaScript yang disebut dengan HTML close() Metode yang digunakan untuk menutup kotak dialog. Anda mungkin sudah bisa menebaknya hanya dengan melihat namanya!

<dialog id="dialogA">
  <!-- Close #dialogA -->
  <button command="close" commandfor="dialogA">Close dialogA</button>
</dialog>

ini show-popover, hide-popoverDan toggle-popover nilai-nilai

<button command="show-popover" commandfor="id">

…panggilan showPopover()dan sama dengan:

<button popovertargetaction="show" popovertarget="id">

Demikian pula:

<button command="hide-popover" commandfor="id">

…panggilan hidePopover()dan sama dengan:

<button popovertargetaction="hide" popovertarget="id">

akhirnya:

<button command="toggle-popover" commandfor="id">

…panggilan togglePopover()dan sama dengan:

<button popovertargetaction="toggle" popovertarget="id">
<!--  or <button popovertarget="id">, since ‘toggle’ is the default action anyway. -->

Saya tahu mungkin sulit untuk mengatur semua ini di kepala Anda, jadi mungkin sebuah tabel dapat membantu menyatukan semuanya:

Jadi… YaAnda sudah dapat menggunakan atribut HTML untuk memanggil jendela pop-up, sehingga command Dan commandfor Tidak terlalu berguna dalam kasus ini. Tapi seperti yang saya katakan, perintah invoker juga dilengkapi dengan beberapa hal JavaScript yang berguna, jadi mari kita gali lebih dalam.

Gunakan JavaScript untuk mendengarkan perintah

Perintah pemanggil menjadwalkan a command Setiap kali tombol sumber diklik, sebuah peristiwa dikirim ke target, yang dapat kita dengarkan dan gunakan dalam JavaScript. Ini berguna untuk <dialog> unsur close acara, atau popover milik toggle atau beforetoggle event, karena kita sudah bisa mendengarkan event tersebut kan?

Misalnya, Dialog API tidak mengirimkan peristiwa ketika: <dialog> menunjukkan. Jadi mari kita gunakan perintah pemanggil untuk mendengarkan command acara sebagai gantinya dan kemudian membaca event.command Ambil tindakan yang tepat.

// Select all dialogs
const dialogs = document.querySelectorAll("dialog");

// Loop all dialogs
dialogs.forEach(dialog => {

  // Listen for close (as normal)
  dialog.addEventListener("close", () => {
    // Dialog was closed
  });

  // Listen for command
  dialog.addEventListener("command", event => {

    // If command is show-modal
    if (event.command == "show-modal") {
      // Dialog was shown (modally)
    }

    // Another way to listen for close
    else if (event.command == "close") {
      // Dialog was closed
    }

  });
});

Oleh karena itu, perintah pemanggil memberi kita cara lain untuk bekerja dengan kotak dialog dan pop-up, dan dalam beberapa kasus lebih ringkas. Namun dalam kasus lain, mereka akan melakukannya lagi panjang. Pendekatan Anda harus bergantung pada apa yang Anda perlukan untuk dilakukan oleh kotak dialog dan popup Anda.

Untuk kelengkapannya, berikut contoh popupnya, walaupun pada dasarnya sama:

// Select all popovers
const popovers = document.querySelectorAll("[popover]");

// Loop all popovers
popovers.forEach(popover => {

  // Listen for command
  popover.addEventListener("command", event => {

    // If command is show-popover
    if (event.command == "show-popover") {
      // Popover was shown
    }

    // If command is hide-popover
    else if (event.command == "hide-popover") {
      // Popover was hidden
    }

    // If command is toggle-popover
    else if (event.command == "toggle-popover") {
      // Popover was toggled
    }

  });
});

mampu mendengarkan show-popover Dan hide-popover berguna, jika tidak, kita harus menulis logika “jika aktif, lakukan ini, jika tidak, lakukan ini” di a toggle atau beforetoggle pendengar acara atau toggle-popover Secara kondisional. Tetapi <dialog> elemen? Ya, orang-orang itu mendapat manfaat lebih banyak command Dan commandfor Properti lebih baik daripada apa yang mereka lakukan dari sini command Acara JavaScript.

Hal lain yang bisa kita dapatkan dengan JavaScript adalah event.sourceyang merupakan tombol yang memanggil popover atau <dialog>:

if (event.command == "toggle-popover") {
  // Toggle the invoker’s class
  event.source.classList.toggle("active");
}

Anda juga dapat mengatur command Dan commandfor Menggunakan atribut JavaScript:

const button = document.querySelector("button");
const dialog = document.querySelector("dialog");

button.command = "show-modal";
button.commandForElement = dialog; /* Not dialog.id */

…yang hanya sedikit lebih ringkas daripada:

button.command = "show-modal";
button.setAttribute("commandfor", dialog.id);

Buat perintah khusus

ini command Properti juga menerima perintah khusus yang diawali dengan dua tanda hubung (--). Saya kira ini membuatnya mirip dengan properti khusus CSS, tetapi untuk acara JavaScript dan properti HTML penangan acara. Pengamatan terakhir ini mungkin sedikit (atau pastinya banyak) kontroversial, karena penggunaan atribut HTML event handler dianggap praktik yang buruk. Tapi, mari kita lihat ini, oke?

Perintah khusus terlihat seperti ini:

<button command="--spin-me-a-bit" commandfor="record">Spin me a bit</button>
<button command="--spin-me-a-lot" commandfor="record">Spin me a lot</button>
<button command="--spin-me-right-round" commandfor="record">Spin me right round</button>

const record = document.querySelector("#record");

record.addEventListener("command", event => {
  if (event.command == "--spin-me-a-bit") {
    record.style.rotate = "90deg";
  } else if (event.command == "--spin-me-a-lot") {
    record.style.rotate = "180deg";
  } else if (event.command == "--spin-me-right-round") {
    record.style.rotate = "360deg";
  }
});

event.command Harus cocok dengan string putus-putus (--) awalan.

Ya popover Dan <dialog> Apa satu-satunya fungsi yang mendukung perintah pemanggil?

Menurut Open UI, pemanggil menargetkan elemen lain, mis. <details> Tertunda untuk rilis awal. Saya pikir ini karena dialog yang dipanggil HTML dan dialog terpadu serta API popup harus dimiliki, sementara perintah lain (bahkan perintah khusus) terasa lebih bagus untuk dimiliki.

Namun, berdasarkan eksperimen (saya tidak bisa menahan diri!), browser web sebenarnya sudah mengimplementasikan penelepon tambahan pada tingkat yang berbeda-beda. Misalnya, <details> Perintahnya berfungsi seperti yang diharapkan, sementara <select> pencocokan perintah event.command (Misalnya, show-picker) namun gagal memanggil metode tersebut (showPicker()). Saya melewatkan semua ini pada awalnya karena MDN hanya menyebutkan dialog dan popup.

Open UI juga menyebutkan perintah berikut <input type="file">, <input type="number">, <video>, <audio>dan metode yang terkait dengan layar penuh, tapi menurut saya belum ada yang pasti.

Jadi, apa manfaat dari perintah pemanggil?

Ya, JavaScript akan jauh lebih sedikit, terutama karena lebih banyak perintah pemanggil akan diterapkan seiring waktu. Selain itu, kita dapat mendengarkan perintah ini seolah-olah itu adalah peristiwa JavaScript. Namun jika tidak ada yang lain, perintah pemanggil hanya menyediakan lebih banyak cara untuk berinteraksi dengan API, seperti Dialog dan Popover API. Singkatnya, tampaknya ada banyak “titik-titik” dan “tanda silang”, yang tidak pernah merupakan hal yang buruk.

Perintah pemanggil: cara lain untuk menggunakan dialog, popup, dll.? Awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.