Rozkazuję ci…!

W 2024 wspominałem o zwrocie deklaratywnym w standardach sieciowych: coraz więcej API przenosi rzeczy dotąd możliwe tylko w JS-ie na grunt HTML-a. Wspominałem tam też o wywoływaczach, które wówczas były tylko propozycją. Minęło ok. 1.5 roku i oto wywoływacze wyzwalacze są już w przeglądarkach.

Wyzwalacze

Wyzwalacze, a dokładniej Invoker Commands API (API Komend Wyzwalacza), dodają dwa nowe atrybuty: [command] oraz [commandfor]. Można ich użyć do przypięcia komend do określonych elementów:

W powyższym przykładzie nie ma ani linijki JS-a. Zarówno otwarcie, jak i zamknięcie modala, są zrobione przy pomocy nowego API. Przyjrzyjmy się, jak można to zrobić, na przykładzie otwierania:

<button command="show-modal" commandfor="dialog">Otwórz modal</button> <!-- 1 -->
<dialog id="dialog"> <!-- 2 -->
	<p>Cześć, jestem modalem!</p>
</dialog>

Tworzymy przycisk (1), któremu dodajemy dwa atrybuty: [command], z nazwą komendy, którą chcemy wywołać (w tym wypadku show-modal), oraz [commandfor], zawierający identyfikator elementu, któremu chcemy tę komendę wydać (w tym wypadku dialog). Oczywiście taki element też musimy dodać do kodu (2). W ten prosty sposób możemy otwierać modale bez udziału JS-a!

Warto przy tym zauważyć, że komendy można wywoływać wyłącznie przy pomocy elementu button. Atrybuty nie zadziałają na żadnym innym. Dzięki temu prostemu zabiegowi nie da się stworzyć całkowicie niedostępnej komendy. Przycisk bowiem został stworzony dokładnie do takich rzeczy i po prostu robi to najlepiej.

A jakie komendy są dostępne? Na ten moment jest ich niewiele:

• toggle-popover – przełącza stan popovera,
• show-popover – pokazuje popover,
• hide-popover – ukrywa popover,
• close – zamyka otwarty element dialog,
• request-close – wysyła żądanie zamknięcia elementu dialog (czyli odpala odpowiednie zdarzenie, żeby była możliwość zablokowania zamknięcia; w przypadku close element jest po prostu zamykany, bez możliwości zablokowania tego),
• show-modal – pokazuje wskazany elementy dialog w trybie modalnym.

Jak widać, można podzielić te komendy na dwie grupy: te do sterowania popoverami oraz te do sterowania modalami/dialogami. W przyszłości prawdopodobnie będą dodawane kolejne komendy.

Niestandardowe komendy

Jest także możliwość definiowania swoich komend:

<p>
	<button command="--add-filter" commandfor="logo">Dodaj filtr</button>
</p>
<p>
	<img id="logo" src="./logo.svg" alt="">
</p>

Dodaliśmy do przycisku komendę --add-filter. Tak jak w przypadku zmiennych w CSS-ie, tutaj też nazwa musi się zaczynać od dwóch myślników (--). Gdy kliknie się taki przycisk, na elemencie wskazanym przez atrybut [commandfor] zostanie wywołane zdarzenie command. Można je obsłużyć w JS-ie:

document.querySelector( '#logo' ).addEventListener( 'command', ( evt ) => { // 1
	if ( evt.command === '--add-filter' ) { // 2
		evt.target.style.filter = 'blur( 5px )'; // 3
	}
} );

Do elementu #logo przypinamy nasłuchiwacz zdarzenia command (1). Następnie sprawdzamy, jaka komenda została wywołana przy pomocy własności command zdarzenia (2). Jeśli to nasza komenda, dodajemy filtr rozmycia do elementu (3).

Efekt końcowy wygląda tak:

I to w sumie tyle! Małe, przyjemne API, pozwalające się pozbyć kolejnego fragmentu JS-a. Jedynym minusem jest niepełne wsparcie przeglądarek. Ale gdy tylko Safari nadgoni, raz na zawsze pozbędę się tych wszystkich showModal() z mojego kodu JS!